首页 文章

如何在javaScript中创建动画

提问于
浏览
1

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

如果它是正确的,唯一的方法,绿色袜子(Gsap)和其他JS动画库使用 setTimeOutsetInterval 在特定时间做动画?怎么样的jQuery中的 animate 方法?

UPDATE

我正在使用GreenSock Animation Platform (Gsap)动画,它提供了非常快速和流畅的动画 . 我刚问了这个问题,弄清楚他们如何非常流畅和快速地处理动画?

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

因此,使用这些定义,绿色袜子和velocity.js等快速动画库如何处理它们的动画?

谢谢 .

2 回答

  • 4

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

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

    并且https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

  • 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是一个动画引擎 with the same API as jQuery's $.animate() . It works with and without jQuery . 它是 incredibly fast, ,它具有色彩动画,变换,循环,缓动,SVG支持和滚动 . 它是jQuery和CSS转换相结合的最佳选择 .

    http://velocityjs.org/

相关问题