用纯javascript制作动画或效果的正确方法是什么？

Posted 2021-03-19

我想知道正确的使用方法是什么？setTimeOut 或 setInterval 用于在javascript中制作动画（我指的是动画的循环部分，在特定时间后循环）？

如果这是正确的，也是唯一的方法，那么green sock (Gsap)和其他JS动画库是否使用了这个方法？setTimeOut 和 setInterval 在特定时间内做动画？animate jQuery中的方法？

更新

我用的是 绿袜子动画平台(Gsap) 的动画，它提供了非常快速和流畅的动画。我只是问了一个问题，想弄清楚他们是如何处理动画非常流畅和快速的？

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

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

谢谢您。

答案

我创建了一个手机，有一些动画的光和声音的心灵机器。

我使用了setTimeout，但它的表现并不好。有一个滞后，你必须处理，使其顺利。

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

https:/developer.mozilla.orgen-USdocsWebAPIwindowrequestAnimationFrame。

不要用jQuery来做动画（除非是很简单的东西），它很慢，而且在android上是不能用的。

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

Velocity是一个动画引擎 和jQuery的$.animate()一样的API。. 它可以与jQuery一起使用，也可以不使用. 是啊 快得不可思议。 它的特点是彩色动画、变换、循环、简单化、SVG支持和滚动。它是jQuery和CSS转换的最佳结合。

http:/velocityjs.org

另一答案

如果您必须使用JavaScript，请使用requestAnimationFrame，但请考虑是否可以使用CSS3过渡来代替JavaScript实现您所需的动画。

请看 https:/developer.mozilla.orgen-USdocsWebAPIwindowrequestAnimationFrame。

还有 https:/developer.mozilla.orgen-USdocsWebCSSCSS_TransitionsUsing_CSS_transitions。