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

Question

我已经使用 vivus.js 制作小 svg 动画有一段时间了，现在这个插件有以下初始化格式：

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

使用起来非常简单，现在我的问题是关于 duration: 200 参数。请参阅它的文档 HERE。现在每当我使用 jquery 和其他库等时 1000 意味着 1 秒，但是这里 200 不是很清楚，文档说以下内容：

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

现在帧中的动画持续时间到底是什么意思？ 200 真的是 2000 年吗？

Answer 1

你说的"whenever i use jQuery and other librarys etc 1000 means 1"是毫秒，是秒的一部分。

帧是一个不同的概念。这是一个离散的时间管理（步骤）。您将有一定数量的 每秒帧数 "fps".

您可以通过以下方式设置帧的速度：

play(speed) 以参数给定的速度播放动画。该值可以为负值表示后退，介于 0 和 1 之间表示速度较慢，或者大于 1 表示速度较快。 [默认值：1]

我在网上怎么也找不到速度为1的每秒多少帧，大家可以测试一下。 ~~可能是 100。~~ 大约每秒 30 帧（来自 Jazzepi 的回答）

Answer 2

在引擎盖下，vivus 使用 requestAnimationFrame，因此它以帧而不是毫秒为单位进行处理。

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

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

从上面linkYou can keep in mind an average score of 30 frames per second and adapt your instance with it.

位于 mozilla link 的代码确实有效，只是没有显示任何视觉内容（至少在 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);

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

What does the animation duration in frames mean?

javascript

css

svg

css-animations

vivus