JavaScriptでアニメーションを作成する方法

Question

setTimeOutまたはsetIntervalを使用してJavaScriptでアニメーションを作成する方法は正しいですか（特定の時間の後にループするアニメーションのループ部分を意味します）。それが正しいとそれを行うための唯一の方法である場合

は、緑色の靴下（GSAP）および他のJSのアニメーションライブラリは、特定の時間でアニメーションを行うためsetTimeOutとsetIntervalを使うのですか？ jQueryのanimateメソッドはどうですか？

UPDATE

私はアニメーションのためGreenSock Animation Platform (Gsap)を使用していて、それは本当に速いし、スムーズなアニメーションを提供します。私はちょうど彼らが非常に滑らかで速いアニメーションをどのように扱うのか把握するための質問をしましたか？

私は質問で述べたように、アニメーションを処理するためのsetTimeOutとsetIntervalのようないくつかの機能があり、また、別の関数名がタイムアウトとインターバル機能とは異なり、隙間なくアニメーションを作るためrequestAnimationFrame()されています。

これらの定義では、green sockやvelocity.jsなどの高速アニメーションライブラリはどのようにアニメーションを処理しますか？

ありがとうございます。

Answer 1

JavaScriptを使用する必要がある場合はrequestAnimationFrameを使用しますが、JavaScriptではなくCSS3のトランジションを使用して目的のアニメーションを実現できるかどうかを検討してください。

は、私はそれが光と音マインドマシンのいくつかのアニメーションを持っていることを、モバイルを作成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

Answer 2

を参照してください。

setTimeoutを使用していて、うまく動作しませんでした。あなたがそれを滑らかにするために扱わなければならない遅れがあります。

代わりにrequestAnimationFrame（）を使用し、JavaScriptでFPS（frames per second）を処理してアニメーションを実行しました。 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/