投稿者: Idle Interface
-

減速ルーレットで学ぶ時間ベースアニメーション設計
← Prev Next → JavaScriptで「自然に止まる」アニメーションを作る これまで学んできたこと: 今回はそれらをすべて使って、 減速しながら止まるルーレットを作ります。 ここからが「設…
-

cancelAnimationFrameの正しい使い方と設計パターン
← Prev Next → 1. まずは結論 requestAnimationFrame は「動かす」ための関数でした。では 止めるときは? 👉 それが cancelAn…
-

フレームレートとは?60fpsの仕組みとパフォーマンス最適化
← Prev Next → アニメーションが「なめらか」に見えるとき、裏ではある数字が動いています。 それが フレームレート(fps) です。 今回は、 を、できるだけやさしく整理…
-

easingとは?アニメーションの減速・加速を作る方法【cubic-bezierも解説】
← Prev Next → アニメーションが「どこか硬い」と感じたことはありませんか? それは 速度が一定だから かもしれません。 そこで登場するのが easing(イー…
-

deltaTimeとは?requestAnimationFrameで正確なアニメーションを作る方法
← Prev Next → JavaScriptでアニメーションを作っていると、こんな現象に出会います。 原因はほぼ同じです。 フレーム数に依存して動かしていること。 それを解決するのが d…
-

requestAnimationFrameの使い方を初心者向けに解説【setIntervalとの違いも比較】
← Prev Next → 1. requestAnimationFrameとは? JavaScriptで「なめらかなアニメーション」を作るときに使うのがrequestAnimationFrame(r…