requestAnimationFrameでのアニメーションの最適化

Question

javascriptでアニメーションを行うことについての疑問です。

1. JavascriptのアニメーションではrequestAnimationFrameが使われるようですが、ネット上に挙げられている様々な方のコードを見ると、requestAnimationFrameで実行される関数をrender()とおいて、それのみをループしているように見えます。

このようなアニメーションのやり方は、「processing」のdraw関数でのアニメーションに通じるような気がするのですが、JavascriptとJavaではコードを動かす環境が異なる（ブラウザでの動作か否か、またsafariではRESASのような重いサイトは、しばらく見ていないと動作が停止する）ので、例えば「クリックされたらそのアイテムを透明化して、見えてはいないけどアニメーションは行われている」といった処理は、「クリックされたらアイテムが消える」といった動作を叶えるうえで、ブラウザ上での処理に適しているとは思えません。
Javascriptの「canvas」は、一度描画したらそのまま残る性質があるので、例えば「アイテム１は動かないが、クリックされると一秒間だけ右へ動く」といったときには、render()でアイテム1が移動するときだけ中でアイテム１のdraw関数を実行させて、止まった時は外すといったようにできるだけ負荷をなくした方が好ましいような気がしますが、それはそれで複雑になりそうな気がします。
Javascriptにおける最適なアニメーションの方法はどのようなものなのでしょうか？

---

２. requestAnimationFrameを使ったアニメーションではfpsの制御ができないので、内部でnew　Date()を使って時間を取得し、一定以上の差になったらコールバック関数を実行するといった方法がとられているのを多く見受けられますが、newする処理が重そうに見えたので、フラグを一個作って、setIntervalでfpsを制御するのもありかなと思って調べたところ、setIntervalでも処理が重いと、こちらが思っていた感覚で関数を実行してくれないという情報を見つけました。これは本当なのでしょうか？

Answer 1

内部でnew　Date()を使って時間を取得し、（中略）、newする処理が重そうに見えたので

Date.now()という、インスタンスを作らずに時間の値だけ取得する関数があります（MDN）。

そして、requestAnimationFrameはその名の通りフレームごとに実行する関数ですが、ブラウザの場合、重たい処理が入ればフレームレートが落ちることも日常茶飯事です。そのような状況でフレームと関係なくsetIntervalで描画したところで、フレームが遅れていると画面反映されず、描画処理が完全に無駄となります（requestAnimationFrameだと、落ちたペースに合わせて呼出を削減してくれます）。

Comments

[maisumakun]

> Javascriptにおける最適なアニメーションの方法はどのようなものなのでしょうか？

CSSアニメーションで表現できる場合はそちらに任せて、JavaScriptでアニメーションさせない、というのが最良かもしれません。

[meron-pan]

かなり難解な質問文で、申し訳ありませんでした。