浏览器中的 SVG 动画答案

【问题标题】：SVG animation in browser浏览器中的 SVG 动画
【发布时间】：2013-12-17 15:49:43
【问题描述】：

我在一个组中有一堆 svg 圈子。

我希望它们每秒向左移动 30 次以创建滚动效果。

我以 1/30 秒的间隔使用 requestAnimationFrame，我申请了

setAttribute('transform', 'translate(-' + offsetPx + ', 0)')

在 chrome 时间线调试工具中显示设置此变换属性会导致重新计算布局，这是相当昂贵的。根据这篇文章：http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ 我认为这不应该发生。

对我来说，实现这种滚动效果最有效的方法是什么？

提前致谢。

【问题讨论】：

【解决方案1】：

如果你不需要使用 requestAnimationFrame 可以使用 SVG animate 标签。

<circle cx="50" cy="50" r="10">
    <animate attributeName="cx" from="50" to="0" dur="2" repeatCount="indefinite" />
</circle>

【讨论】：

问题是我不知道每次迭代需要移动多少。我可以应用 1 个动画，等待它完成然后再应用另一个吗？
如果你在谈论一个简单的补间，只需使用 translate ，相信我它不是处理器杀手。
好的，那么 SVG 可能不是最好的，但我想你可以在计时器上编辑动画标签的属性（所以是的，你可以等待它完成然后再应用另一个）。我相信 SVG 动画对 CPU 的负担更少。

【解决方案2】：

我很久以前就搜索过这个，我认为如果你打算针对移动设备，不要担心这个问题，但是我希望你测试这个插件：

因为那里的许多统计数据都不正确。

【讨论】：