Question

我现在一直在使用vivus.js进行微小的svg动画，现在这个插件有以下初始化格式：

new Vivus('my-div', {duration: 200, file: 'link/to/my.svg'}, myCallback);

死了简单易用，现在我的问题是关于duration: 200参数。请参阅 HERE 的文档。现在每当我使用jquery和其他图书馆等1000意味着1英寸，但这里200不是很清楚，文档说的是以下内容：

持续时间 ::动画持续时间，以帧为单位。 [默认值：200]。

现在帧中的动画持续时间究竟是什么意思？什么是200真的在这里2000？

Answer 1

在引擎盖下，vivus正在使用requestAnimationFrame，所以它处理帧而不是毫秒。

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

https://github.com/maxwellito/vivus/issues/72

来自上述链接You can keep in mind an average score of 30 frames per second and adapt your instance with it.

位于mozilla链接的代码确实有效，它只是没有显示任何视觉效果（至少在jfiddle中）。

这是一个显示运动的工作示例。

http://jsfiddle.net/4ej3Legg/

HTML

<div id="anim">
  <span id="blah">asdasf</span>
</div>

的Javascript

var start = null;
var element = document.getElementById("blah");

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.position = "absolute";
  element.style.left = Math.min(progress / 10, 500) + "px";
  if (progress < 100000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

Answer 2

你的意思是“每当我使用jQuery和其他图书馆等1000意味着1”都是毫秒，这是秒的一部分。

框架是一个不同的概念。这是一个离散的时间管理（步骤）。您将拥有一定数量的帧/秒“fps”。

您可以使用以下方式设置帧的速度：

<div class="index"> <table class="index"> <tr> <td> event 1 </td> <td> event 2 </td> </tr> <tr> <td> event 6 </td> <td> event 7 </td> </tr> </table> </div>以参数中给出的速度播放动画。这个值可以为负向后，0到1之间缓慢，或高于1以快速。 [默认值：1]

我在互联网上的任何地方都找不到速度为1的每秒帧数，但你可以测试一下。 ~~可能是100。~~每秒约30帧（来自Jazzepi的回答）

帧中的动画持续时间是什么意思？

2 个答案: