ブログ
-
ループ設計パターン比較：壊れないアニメーションの作り方
← Prev Next → #07 アニメーション設計まとめ では「アニメーション設計の全体像」を整理しました。 今回は一段階踏み込みます。 ループは“どう書くか”で安定性が変わります。 同じ&nbs…
-
JavaScriptアニメーション設計の基本構造まとめ
← Prev Next → ここまで、 を学んできました。 でももしかすると、 「結局どう組み立てればいいの？」 と感じているかもしれません。 今回は、JavaScriptアニメーションの“全体構造”…
-
減速ルーレットで学ぶ時間ベースアニメーション設計
← Prev Next → JavaScriptで「自然に止まる」アニメーションを作る これまで学んできたこと： 今回はそれらをすべて使って、 減速しながら止まるルーレットを作ります。 ここからが「設…
-
cancelAnimationFrameの正しい使い方と設計パターン
← Prev Next → 1. まずは結論 requestAnimationFrame は「動かす」ための関数でした。では 止めるときは？ 👉 それが cancelAn…
-
フレームレートとは？60fpsの仕組みとパフォーマンス最適化
← Prev Next → アニメーションが「なめらか」に見えるとき、裏ではある数字が動いています。 それが フレームレート（fps） です。 今回は、 を、できるだけやさしく整理…
-
easingとは？アニメーションの減速・加速を作る方法【cubic-bezierも解説】
← Prev Next → アニメーションが「どこか硬い」と感じたことはありませんか？ それは 速度が一定だから かもしれません。 そこで登場するのが easing（イー…