Chart.js - 如何设置动画速度？答案

【问题标题】：Chart.js - How to set animation speed?Chart.js - 如何设置动画速度？
【发布时间】：2013-11-07 13:44:12
【问题描述】：

我正在使用 Chart.js (documentation)，但似乎没有设置动画速度的选项。

我什至无法在源代码中找到动画速度/时间变量。

我该怎么做？

（ps：我用的是甜甜圈图）

编辑：更改animationSteps，在动画完成后显示奇怪的伪影，有几个值（即：30 或 75）。 60 工作正常。而且它不仅出现在图表的 100 多个值中：

【问题讨论】：

【解决方案1】：

我喜欢 Chart.js，但这绝对是 API 的一部分，为了清晰起见可以进行改进。

Chart.js 使用window.requestAnimationFrame() 方法制作动画，这是一种更现代、更高效的浏览器动画方式，因为它只在每次屏幕刷新时重绘（即基于屏幕刷新率，通常为 60Hz） .这可以防止对永远不会实际渲染的帧进行大量不必要的计算。

以 60 帧/秒的速度，一帧持续 16-2/3 毫秒 (1000ms / 60)。不过，Chart.js 出现在 round this off to 17ms 上。 API允许您指定步数globally，例如：

Chart.defaults.global.animationSteps = 60;

new Chart(ctx).Doughnut(data, {
  animationSteps: 60
});

将 60 步乘以 17 毫秒/帧，您的动画将运行 1020 毫秒，也就是一秒多一点。由于 JavaScript 程序员习惯于以毫秒为单位思考（不是 60Hz 的帧），因此要换一种方式转换，只需除以 17 即可得到步数，例如：

Chart.defaults.global.animationSteps = Math.round(5000 / 17); // results in 294 steps for a 5-second animation

希望对您有所帮助。不过，我不确定是什么导致了这些奇怪的伪影。

【讨论】：

【解决方案2】：

使用动画对象

options: {
        animation: {
            duration: 2000,
        },

我在任何地方都没有看到这方面的记录，但是不必为每个图表全局设置速度是非常有帮助的。

【讨论】：

【解决方案3】：

如果以后有人遇到这个问题（就像我一样），有一种改变动画持续时间的新方法。我想这是对 Chart.js 库的更新 :-)

Chart.defaults.global.animation.duration = [ms];

因此，例如，如果您想要一个非常快的 200 毫秒动画，您可以：

Chart.defaults.global.animation.duration = 200;

希望这可以帮助某人:-)

【讨论】：