javascript / jquery网站动画的良好做法

Question

我正在尝试构建一个包含大量移动元素的主页。我已经检查过具有相同移动动画的其他网站使用相同的技术，例如在setInterval()上移动内容。但我不知道它是否可以，在我的电脑上运行顺畅。但我不知道是否会对其他用户造成任何损害，特别是计算机速度慢。我这样说是因为当我在手机上打开网站时，它真的很快就热了。

我做了一个fiddle，你可以看到发生了什么样的简单动作，但是函数的执行速度有多快。小提琴只显示了4个元素，但主页上还有大约10个元素在移动。

那么在实施这些网站动画时应遵循哪些好的做法？

Answer 1

如果您定位旧浏览器，

setInterval会没问题，但它并不适用于动画。 Some browsers cap it to 4ms. Some won't slow down when the window is not focused，因此会占用CPU周期，因此耗费电量 - 当您使用移动设备时效果不佳。

有requestAnimationFrame，一个针对动画优化的计时器。当窗口不在焦点时，动画会减慢或停止，并且它的目标是以60fps的速度绘制。

对于次要的非行为动画（风格，而不是行为），您可以CSS animations instead。关于CSS动画的一个好处是它们中的一些，特别是the ones that deal with 3D, are GPU accelerated，使它们比你的移动JS动画更快更流畅。