makepad-2.0-animation

Makepad 2.0 アニメーションスキル

バージョン: makepad-widgets（dev ブランチ） | 最終更新日: 2026-03-03

概要

Animator システムは、時間の経過に伴って instance() シェーダー変数を駆動し、ホバー効果、トランジション、ループアニメーションを実現します。同時に実行される、独立したアニメーショントラック「グループ」を使用します。

ドキュメント

詳細なドキュメントについては、ローカルファイルを参照してください。

• ./references/animator-reference.md - Animator API、再生タイプ、イージング関数、使用例の完全な解説

重要：ドキュメントの完全性チェック

質問に回答する前に、Claude は必ず以下を実行してください。

1. 上記に記載されている、関連するリファレンスファイルを読みます
2. ファイルの読み込みに失敗した場合、またはファイルが空の場合：
   • ユーザーに「リファレンスドキュメントが不完全です。SKILL.md のパターンに基づいて回答します。」と伝えます
   • それでも、SKILL.md のパターンと組み込み知識に基づいて回答します
3. リファレンスファイルが存在する場合は、その内容を回答に反映します

---

重要：ウィジェットの Animator サポート

すべてのウィジェットが animator をサポートしているわけではありません！ サポートされていないウィジェットに animator: Animator{...} を追加しても、警告なしに無視されます。エラーもアニメーションも発生せず、何も起こりません。

Animator をサポートするウィジェット

View、SolidView、RoundedView、ScrollXView、ScrollYView、ScrollXYView、Button、ButtonFlat、ButtonFlatter、CheckBox、Toggle、RadioButton、LinkLabel、TextInput

Animator をサポートしないウィジェット

Label、H1～H4、P、TextBox、Image、Icon、Markdown、Html、Slider、DropDown、Splitter、Hr、Filler

Label をアニメーションさせるには： Animator を持つ View で囲みます。

View{
    width: Fit height: Fit
    animator: Animator{
        hover: {
            default: @off
            off: AnimatorState{ from: {all: Forward {duration: 0.15}} apply: {draw_bg: {hover: 0.0}} }
            on: AnimatorState{ from: {all: Forward {duration: 0.15}} apply: {draw_bg: {hover: 1.0}} }
        }
    }
    label := Label{text: "Animated via parent"}
}

---

Animator の構造

animator: Animator{
    <group_name>: {
        default: @<state_name>
        <state_name>: AnimatorState{
            from: { ... }
            ease: <EaseFunction>
            redraw: true
            apply: { ... }
        }
        <state_name>: AnimatorState{ ... }
    }
    <group_name>: { ... }
}

---

グループ

各グループは独立したアニメーショントラックです。一般的なグループは次のとおりです。

グループ	用途	一般的な状態
hover	マウスのホバー／ホバー解除	off、on
focus	キーボードフォーカス	off、on
active	切り替え／チェック状態	off、on
disabled	無効状態	off、on
time	継続的なループ	off、on

複数のグループは互いに干渉せず、同時にアニメーションします。

---

from ブロック

トランジションのタイミングを制御します。キーには、遷移元の状態、またはすべての状態に適用される all を指定します。

// From any state, animate over 0.2 seconds
from: {all: Forward {duration: 0.2}}

// Instant from any state
from: {all: Snap}

// Different timing depending on origin
from: {
    all: Forward {duration: 0.1}
    down: Forward {duration: 0.01}
}

---

再生タイプ

タイプ	説明	例
Forward {duration: 0.2}	順方向に一度だけ再生	ホバー時のトランジション
Snap	アニメーションなしで瞬時に切り替え	デフォルト状態の初期化
Loop {duration: 1.0}	ループアニメーション	読み込みスピナー
ReverseLoop {duration: 1.0}	往復ループ	脈動効果
BounceLoop {duration: 1.0}	前後にバウンド	バウンドアニメーション

---

イージング関数

関数	説明
Linear	一定速度
InQuad / OutQuad / InOutQuad	二次イージング
InCubic / OutCubic / InOutCubic	三次イージング
InQuart / OutQuart / InOutQuart	四次イージング
InQuint / OutQuint / InOutQuint	五次イージング
InSine / OutSine / InOutSine	サインイージング
InExp / OutExp / InOutExp	指数イージング
InCirc / OutCirc / InOutCirc	円形イージング
InElastic / OutElastic / InOutElastic	弾性スプリング
InBack / OutBack / InOutBack	オーバーシュート
InBounce / OutBounce / InOutBounce	バウンス

使用方法：AnimatorState に ease: OutCubic を指定します（省略可能。デフォルトは Linear です）。

---

apply ブロック

アニメーションの遷移先となる値です。構造はウィジェットのシェーダープロパティに対応しています。

// Animate single properties
apply: {
    draw_bg: {hover: 1.0}
}

// Animate multiple properties
apply: {
    draw_bg: {hover: 1.0 color: #f00}
    draw_text: {color: #fff}
}

重要： アニメーションできるのは instance() シェーダー変数のみです。uniform() 変数はアニメーションできません。

---

ホバーするボタンの完全な例

use mod.prelude.widgets.*

let HoverCard = RoundedView{
    width: Fill height: Fit
    padding: 16
    new_batch: true
    cursor: Hand
    draw_bg +: {
        instance hover: 0.0
        color: mix(#2a2a3d, #3a3a5d, self.hover)
        border_radius: 8.0
    }
    animator: Animator{
        hover: {
            default: @off
            off: AnimatorState{
                from: {all: Forward {duration: 0.15}}
                apply: {draw_bg: {hover: 0.0}}
            }
            on: AnimatorState{
                from: {all: Forward {duration: 0.15}}
                apply: {draw_bg: {hover: 1.0}}
            }
        }
    }
    title := Label{text: "Hover me" draw_text.color: #fff}
}

重要なポイント：

• 背景を持つホバー可能なアイテムには、new_batch: true が必須です
• cursor: Hand はホバー時にポインターカーソルを表示します
• instance hover: 0.0 はアニメーション可能な変数を宣言します
• mix(color1, color2, self.hover) は色を補間します

---

タイムラインアニメーション（キーフレーム）

複数ステップのアニメーションには timeline() を使用します。

animator: Animator{
    time: {
        default: @off
        on: AnimatorState{
            from: {all: Loop {duration: 2.0}}
            apply: {
                draw_bg: {
                    rotation: timeline(){
                        snap(0.0)
                        snap(6.28)
                    }
                }
            }
        }
    }
}

---

ローディングスピナーのパターン

let Spinner = View{
    width: 40 height: 40
    draw_bg +: {
        instance rotation: 0.0
        pixel: fn() {
            let sdf = Sdf2d.viewport(self.pos * self.rect_size)
            let cx = self.rect_size.x * 0.5
            let cy = self.rect_size.y * 0.5
            let r = min(cx, cy) * 0.8
            sdf.arc(cx, cy, r, self.rotation, self.rotation + 4.5, 3.0)
            sdf.stroke(#4488ff, 2.5)
            return sdf.result
        }
    }
    animator: Animator{
        time: {
            default: @on
            on: AnimatorState{
                from: {all: Loop {duration: 1.0}}
                apply: {
                    draw_bg: {
                        rotation: timeline(){
                            snap(0.0)
                            snap(6.28318)
                        }
                    }
                }
            }
        }
    }
}

---

Animator と Vector Tween の違い

Makepad には別々のアニメーションシステムが 2 つあります。

特徴	Animator（このスキル）	Tween（makepad-2.0-vector を参照）
対象	ウィジェットシェーダーの instance 変数	SVG シェイプのプロパティ（fill、cx、opacity...）
構文	animator: Animator{...} ブロック	プロパティ値：opacity:Tween{...}
トリガー	状態遷移（ホバー、フォーカス）	レンダリング時に自動実行
ループ	from 内の Loop {duration: 1.0}	loop_:true（ブール値。文字列ではありません！）
用途	UI 操作（ホバー、クリック）	SVG／ベクターグラフィックのアニメーション

Animator の用途： ボタンのホバー効果、切り替え状態、ローディングスピナー（シェーダーベース） Vector Tween の用途： SVG パスのアニメーション、脈動するインジケーター、移動するドット、色の遷移

Tween の詳細は makepad-2.0-vector スキルを参照してください。

---

ベストプラクティス

1. ホバーアニメーションのある背景を持つ View には、必ず new_batch: true を追加します
2. アニメーションさせたいものには instance 変数を使用します
3. グループ名は意味に沿った用途（ホバー、フォーカス、アクティブ）に合わせます
4. 状態遷移には Forward を、状態の即時変更には Snap を使用します
5. 初期状態が非アクティブな状態には default: @off を設定します
6. Label はアニメーションできません。テキストにアニメーションが必要な場合は View で囲みます
7. ホバーの再生時間は短く（0.1～0.3s）、時間ベースのアニメーションは長め（0.5～2.0s）にします