以帧为单位的动画持续时间是什么意思？答案

【问题标题】：What does the animation duration in frames mean?以帧为单位的动画持续时间是什么意思？
【发布时间】：2016-03-11 08:31:03
【问题描述】：

我一直在使用 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 是什么？

【问题讨论】：

标签： javascript css svg css-animations vivus

【解决方案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);

【讨论】：

所以它不会适应屏幕刷新率，而是尽可能减慢到 30？！
@Jazzepi jsfiddle.net/gg0h2n0u MSN 提供的代码绝对没有任何作用！
@AlexanderSolonik 它确实更新了左侧位置值。我包含了一个指向您的小提琴修改版本的链接，以显示它为一些文本设置动画。
@CodeiSir 我不是这方面的专家，但我认为基本的想法是你告诉操作系统你的目标帧率，它最好匹配它。它还可以防止你做一堆无关的平局。这里有相当多的信息。 createjs.com/tutorials/Animation%20and%20Ticker 向下滚动到“计时模式”部分。这适用于 EasleJS，但它可以选择在后台使用 requestAnimationFrame。
@Jazzepi 所以在您提供的小提琴示例中，假设我说：element.style.left = '500px'; 然后在元素到达左侧 500px 之前，调用函数 window.requestAnimationFrame(step); .. 对吗？

【解决方案2】：

你所说的“每当我使用 jQuery 和其他库等 1000 意味着 1”是毫秒，它是秒的一部分。

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

您可以设置帧的速度：

play(speed) 以参数中给定的速度播放动画。这个值可以是负数表示后退，0 到 1 之间表示慢，或高于 1 表示快。 [默认值：1]

我无法在 Internet 上的任何地方找到速度为 1 的每秒多少帧，但您可以测试一下。 ~~可能是 100。~~ 大约每秒 30 帧（来自 Jazzepi 的回答）

【讨论】：