css - 浏览器中的 SVG 动画

Question

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

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

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

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

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

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

提前致谢。

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

2 回答 2