Idle Interface

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 で全体を統合します。

  1. #01
    requestAnimationFrameの使い方 基本の呼び方／ループの最小構成
  2. #02
    deltaTimeとは？ フレーム依存を外す第一歩
  3. #03
    easing / cubic-bezier 減速・加速を設計として扱う
  4. #04
    フレームレートとパフォーマンス 60fpsの仕組みと最適化の入口
  5. #05
    cancelAnimationFrame設計 停止／多重起動バグを設計で防ぐ
  6. #06
    減速ルーレット（実践） “動き”を題材に設計を固める
  7. #07
    JavaScriptアニメーション設計の基本構造まとめ シリーズ総まとめ（ピラーページ）
Start here: #07

What you’ll get

“動かす方法”より先に、“壊れない構造”を作るための基本要素を集めています。

  • Core
    Loop / time / easing / stop
  • Goal
    再利用できる最小アーキテクチャ
  • Next
    Fixed Time Step 〜 Systemへ接続
Next series →

System Architecture Series

9 articles · scalable system design

Read in order

ループ設計から始まり、State・Scene・Eventへと拡張していきます。 #16 は実践統合のまとめです。

  1. #08
    ループ設計 update / render を分ける基礎
  2. #09
    Fixed Time Step 時間制御を安定させる
  3. #10
    状態管理統合 状態を切り替えても壊れない
  4. #11
    Interpolation カクつきを消す描画補間
  5. #12
    Canvas統合 render内で描画を束ねる
  6. #13
    Input設計 入力をシステムとして扱う
  7. #14
    Scene管理進化 責務の増加に耐える構造
  8. #15
    Event設計 依存を減らす通知設計
  9. #16
    実践構築（統合） 全要素をまとめるピラーページ
Start here: #16 See latest ↓

UI Motion Patterns

Latest Articles

すべての記事一覧へ →