浏览器中的SVG动画

Question

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

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

我以1/30秒的间隔使用requestAnimationFrame，然后我应用

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

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

实现此滚动效果的最有效方法是什么？

提前致谢。

Answer 1

如果您不需要使用requestAnimationFrame，则可以使用SVG动画标记。

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

此处有更多信息https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate。

Answer 2

看起来我已经搜索了很久以前，在我看来，如果你要针对移动设备，不要担心这个问题，但是我想让你测试这个插件：

http://www.greensock.com/js/speed.html

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