1

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

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

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

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

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

4

2 回答 2

4

在引擎盖下，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);
于 2015-12-06T19:51:01.470 回答
1

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

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

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

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

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

于 2015-12-06T19:40:50.823 回答