javascript - javascript/jquery 网站动画的良好实践

Question

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

我做了一个fiddle在这里您可以看到正在发生什么样的简单运动，以及功能执行的速度有多快。 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 动画更快更流畅。