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

问题描述 投票:1回答:2

我想知道正确的使用方法是什么?setTimeOutsetInterval 用于在javaScript中制作动画(我指的是动画的循环部分,在特定时间后循环)?

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

更新

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

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

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

谢谢您。

javascript jquery animation
2个回答
4
投票

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

我使用了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


1
投票

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.