javascript - 使用纯 javascript 创建动画或效果的正确方法是什么？

Question

我想知道在 javaScript 中使用 setTimeOut 或 setInterval 制作动画的正确方法是什么(我的意思是动画的循环部分，在特定的之后循环时间)？

如果这是正确且唯一的方法，那么绿 socks (Gsap) 和其他 JS 动画库使用 setTimeOut 和 setInterval 来做特定时间的动画？ jQuery 中的 animate 方法怎么样？

更新

我正在使用 GreenSock Animation Platform (Gsap)对于动画，它提供了非常快速和流畅的动画。我只是问这个问题，想弄清楚他们如何非常流畅和快速地处理动画？

正如我在问题中提到的，有一些函数，如 setTimeOut 和 setInterval 用于处理动画，还有另一个函数名称是 requestAnimationFrame() 与 timeOut 和 Interval 函数不同，用于制作没有间隙的动画。

那么根据这些定义，像 green sock 和 velocity.js 这样的快速动画库是如何处理它们的动画的呢？

谢谢。

Answer 1

我创建了一个移动设备，其中包含一些用于 Light and Sound Mind Machine 的动画。

我使用了 setTimeout，但效果不佳。您必须处理延迟才能使其流畅。

相反，我使用了 requestAnimationFrame() 并在我的 JavaScript 中处理了 FPS(每秒帧数)并执行了动画。您可以依靠 requestAnimationFrame 为您提供所需的性能，其中 settimeout 或 interval 会有一些差距。

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

不要为动画使用 jQuery(除非它非常简单)，它很慢，而且在 Android 上无法使用。

相反...使用Velocity.js 来处理其他一些动画。它像丝绸一样光滑。

Velocity 是一个动画引擎具有与 jQuery 的 $.animate() 相同的 API。 无论是否使用 jQuery，它都适用。它速度极快，并且具有彩色动画、变换、循环、缓动、SVG 支持和滚动功能。它是 jQuery 和 CSS 转换的最佳组合。

http://velocityjs.org/