タグ: requestAnimationFrame
-
スムーズなプログレスバーの作り方【JavaScript】
progress / lerp / easing を使って、気持ちよく伸びるUIを作る 読み込み中、達成率の表示、レベルゲージ、アップロード進行状況など、プログレスバーはさまざまなUIで使われます。 …
-
JavaScriptで数値カウントアップUIを作る方法【Number Animation入門】
1. はじめに 「0 から 1000 まで数字が増えていく表示」を見たことがあると思います。たとえば、以下のようなUIです。 こうした 数値が変化するUI は、ただ値を一気に切り替…
-
Interpolation（補間）とは？Fixed Time Stepを滑らかにする最重要技術
← Prev Next → 1.Fixed Time Stepを滑らかに見せる最後のピース #09 Fixed Time Step の記事で Fixed Time Step を導入しました。 ここで問…
-
状態管理統合（State Management）アニメーションを「構造」にする
← Prev Next → ここまでで、私たちはこういうものを作ってきました。 でも、まだ1つ問題があります。 1.問題：処理が全部1つの中にある 例えばこんなコードになっていませんか？ 動きます。で…
-
Fixed Time Stepとは？フレームに左右されない時間制御の作り方
← Prev Next → これまでの記事で、 を学んできました。 ここで出てくる疑問がこれです。 「フレームレートが変わったら、ゲームの速さも変わらない？」 実はその通りです。 1.なぜ問題が起きる…
-
ループ設計パターン比較：壊れないアニメーションの作り方
← Prev Next → #07 アニメーション設計まとめ では「アニメーション設計の全体像」を整理しました。 今回は一段階踏み込みます。 ループは“どう書くか”で安定性が変わります。 同じ&nbs…
-
JavaScriptアニメーション設計の基本構造まとめ
← Prev Next → ここまで、 を学んできました。 でももしかすると、 「結局どう組み立てればいいの？」 と感じているかもしれません。 今回は、JavaScriptアニメーションの“全体構造”…
-
cancelAnimationFrameの正しい使い方と設計パターン
← Prev Next → 1. まずは結論 requestAnimationFrame は「動かす」ための関数でした。では 止めるときは？ 👉 それが cancelAn…
-
フレームレートとは？60fpsの仕組みとパフォーマンス最適化
← Prev Next → アニメーションが「なめらか」に見えるとき、裏ではある数字が動いています。 それが フレームレート（fps） です。 今回は、 を、できるだけやさしく整理…
-
easingとは？アニメーションの減速・加速を作る方法【cubic-bezierも解説】
← Prev Next → アニメーションが「どこか硬い」と感じたことはありませんか？ それは 速度が一定だから かもしれません。 そこで登場するのが easing（イー…