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

Question

I want to know is it the correct way to use setTimeOut or setInterval for making an animation in javaScript (I mean the loop part of the animation, looping after specific time) ?

if it is the correct and the only way of doing that , do the green sock (Gsap) and the other JS animation library use the setTimeOut and setInterval for doing the animation in specific time ? what about the animate method in jQuery ?

UPDATE

I'm using the GreenSock Animation Platform (Gsap) for animations , and it provides really fast and smooth animations. I just asked the question to figure out how do they handle the animations very smooth and fast?

as I mentioned in the question , there is some functions like setTimeOut and setInterval for handling animations and also there is another function name is requestAnimationFrame() for making animations without gaps unlike the timeOut and Interval functions.

So with these definitions how does the fast animation libraries like green sock and velocity.js handles their animations?

Thank you .

Answer 1

I created a mobile that that has some animations for a Light and Sound Mind Machine.

I used setTimeout and it did not perform well. There is a lag that you have to handle to make it smooth.

Instead I used requestAnimationFrame() and I handled the FPS (frames per second) in my JavaScript and performed the animation. You can count on requestAnimationFrame to give you the performance you want, where settimeout or interval will have some gaps.

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

Don't bother with jQuery for animations (unless it is something very simple), it is slow, and on Android it is unusable.

Instead... use Velocity.js to handle some other annimations. It is smooth as silk.

Velocity is an animation engine with the same API as jQuery's $.animate() . It works with and without jQuery . It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined.

http://velocityjs.org/

Answer 2

Use requestAnimationFrame if you HAVE to use JavaScript, however consider if you can achieve your desired animation using CSS3 transitions instead of JavaScript.

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

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