Idle Interface
Designing Animation Systems in JavaScript
requestAnimationFrameから始めて、Fixed Time Step / State / Scene / Eventまで。 “動き”を壊さずに拡張するための設計を、シリーズでまとめています。 初めてなら Animation Fundamentals → 設計を固めたいなら System Architecture Series
Animation Fundamentals
7 articles · from rAF to architecture
Read in order
基礎から段階的に積み上げます。最後の #07 で全体を統合します。
What you’ll get
“動かす方法”より先に、“壊れない構造”を作るための基本要素を集めています。
- CoreLoop / time / easing / stop
- Goal再利用できる最小アーキテクチャ
- NextFixed Time Step 〜 Systemへ接続
System Architecture Series
9 articles · scalable system design
Read in order
ループ設計から始まり、State・Scene・Eventへと拡張していきます。 #16 は実践統合のまとめです。
UI Motion Patterns
-
スクロールを状態として扱うUI設計【Scroll-Driven State UI】
スクロール連動UIを作るとき、scrollイベントのたびに「今どこまで来たか」を判定して、要素を動かしたくなる…
-
Scroll Sync UI の作り方【JavaScriptで作る連動スクロールUI】
スクロールに合わせて、画像やテキストの内容が切り替わるUIを見たことはないでしょうか。 たとえば、左側にビジュ…
-
スクロール位置に応じてナビをハイライトする Scroll Spy UI の作り方
長いページで「今どこを読んでいるのか分かるUI」見たことありませんか？ こういったUIでは、スクロールに応じて…
Latest Articles
-
スクロールを状態として扱うUI設計【Scroll-Driven State UI】
スクロール連動UIを作るとき、scrollイベントのたびに「今どこまで来たか」を判定して、要素を動かしたくなる…
-
Scroll Sync UI の作り方【JavaScriptで作る連動スクロールUI】
スクロールに合わせて、画像やテキストの内容が切り替わるUIを見たことはないでしょうか。 たとえば、左側にビジュ…