JavaScriptで学ぶUIアニメーション設計
Designing animation systems in JavaScript
requestAnimationFrame から state、input、scene、event まで。動きの実装だけでなく、「壊れにくい構造」として理解するためのUI設計ラボです。
はじめての方へ
Start here
このサイトは、基礎 → 設計 → 実践の順で学べる構成になっています。
目的に合わせて、以下の入り口から進んでください。
基礎から学ぶ
Animation Fundamentals
requestAnimationFrame、deltaTime、easingなど、アニメーションの基本を順番に理解したい方向け。
設計を理解する
System Architecture
ループ設計、状態管理、シーン管理、イベント設計など、スケールする構造を学びたい方向け。
実践パターンを見る
UI Motion Patterns
ドラッグ、スワイプ、スクロール連動など、UIで使える動きのパターンを知りたい方向け。
シリーズ一覧
Series overview
記事は単体ではなく、順番に理解できるようシリーズとして整理しています。
アニメーション基礎
Animation Fundamentals
JavaScriptアニメーションの基本を、仕組みから順番に解説しています。
- requestAnimationFrame
- deltaTime
- easing
- フレームレート
- 停止制御
- 実践ループ
- まとめ
システム設計シリーズ
System Architecture Series
複雑なUIでも破綻しない設計を学ぶためのシリーズです。
- ループ設計
- 固定タイムステップ
- 状態管理
- 補間
- Canvas統合
- 入力設計
- シーン管理
- イベント設計
- 統合
UI Motion Patterns
Practical UI interaction patterns
ドラッグ、スワイプ、慣性、スクロール連動など、
実際のUIで使われる動きのパターンを実験ベースで解説しています。
「どう動くか」だけでなく、「なぜそう設計するか」まで理解できるよう構成しています。
最新記事
Latest articles
最近追加された記事や実験です。
このサイトについて
About Idle Interface
Idle Interface は、Web上のインタラクティブUIを対象に、
アニメーション・時間制御・状態管理・入力設計・イベント設計を整理して学ぶためのサイトです。
見た目の動きだけでなく、構造として理解することを目的としています。