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

我正试图建立一个主页，有很多移动元素。我检查过其他具有相同移动动画的网站，它们使用相同的技术，例如

setInterval（）

上的move stuff。但我不知道它是否会好，在我的电脑上它运行平稳。但我不知道它是否会对其他用户造成任何损害，特别是对速度较慢的计算机。我这么说是因为当我用手机打开网站时，它很快就变得很热

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

---

那么，在实现这些类型的网站动画时，应该遵循哪些良好的实践呢？

setInterval

如果您以旧浏览器为目标，则可以，但这并不适用于动画，因此，当你在移动设备上时，它会消耗CPU周期，因此电源不好

有一个，一个为动画而优化的计时器。当窗口不对焦时，动画会减慢或停止，并以60fps的速度绘制

---

对于次要的非行为动画（样式，而不是行为），可以执行以下操作。CSS动画的一个优点是，其中一些动画比临时制作的JS动画更快、更流畅。

您的目标浏览器版本是什么？如果您想要最新和最好的，您不需要尝试

requestAnimationFrame

。它应该会产生更流畅、更节能的（笔记本电脑等）动画。我现在就去拿我的水晶球，看看2014年的人们对你的动画有什么看法；）不，只是开玩笑，这是一个非常有趣的问题，因为我正在考虑重新设计我的网站，以包含一些动画也很快。我从你的小提琴上注意到你正在用JS做动画。为什么不使用CSS3关键帧，这样您就可以利用移动设备上的硬件加速？这取决于您站点的用途。你的目标是移动平台吗？这家网站的主要目标是让手机用户对他们的手机性能感到惊讶吗？总的来说，你应该尽量减少动画，以避免在手机上反应迟缓，因为不需要太多JS就能让移动设备陷入困境，特别是如果你关心Android 2.3，实际上这是一个一般性的问题，没有特定的用户。我在寻找一些无论在什么情况下都应该练习的东西？这可能吗？对不起，在你发布你的评论之前，我更新了我的评论：），但总的来说，你应该将动画控制在最低限度，以避免用户界面迟钝