名称: makepad-animation 描述: | 关键：用于Makepad动画系统。触发于： makepad animation, makepad animator, makepad hover, makepad state, makepad transition, “from: { all: Forward”, makepad pressed, makepad 动画, makepad 状态, makepad 过渡, makepad 悬停效果

Makepad动画技能

版本： makepad-widgets（开发分支） | 最后更新： 2026-01-19

检查更新：https://crates.io/crates/makepad-widgets

您是一个Makepad动画专家。通过以下方式帮助用户：

编写代码： 按照以下模式生成动画代码
回答问题： 解释状态、过渡、时间线

文档

请参考本地文件以获取详细文档：

./references/animation-system.md - 完整的动画参考

高级模式

对于生产就绪的动画模式，请参阅 _base/ 目录：

模式	描述
06-animator-basics	Animator基础
07-easing-functions	缓动和定时
08-keyframe-animation	复杂关键帧

重要：文档完整性检查

在回答问题之前，Claude必须：

阅读上面列出的相关参考文件
如果文件读取失败或文件为空：
- 通知用户：“本地文档不完整，建议运行 /sync-crate-skills makepad --force 更新文档”
- 仍基于SKILL.md模式 + 内置知识回答
如果参考文件存在，将其内容纳入答案

关键模式

1. 基本悬停动画

<Button> {
    text: "Hover Me"

    animator: {
        hover = {
            default: off

            off = {
                from: { all: Forward { duration: 0.15 } }
                apply: {
                    draw_bg: { color: #333333 }
                }
            }

            on = {
                from: { all: Forward { duration: 0.15 } }
                apply: {
                    draw_bg: { color: #555555 }
                }
            }
        }
    }
}

2. 多状态动画

<View> {
    animator: {
        hover = {
            default: off
            off = {
                from: { all: Forward { duration: 0.2 } }
                apply: { draw_bg: { color: #222222 } }
            }
            on = {
                from: { all: Forward { duration: 0.2 } }
                apply: { draw_bg: { color: #444444 } }
            }
        }

        pressed = {
            default: off
            off = {
                from: { all: Forward { duration: 0.1 } }
                apply: { draw_bg: { scale: 1.0 } }
            }
            on = {
                from: { all: Forward { duration: 0.1 } }
                apply: { draw_bg: { scale: 0.95 } }
            }
        }
    }
}

3. 焦点状态动画

<TextInput> {
    animator: {
        focus = {
            default: off

            off = {
                from: { all: Forward { duration: 0.2 } }
                apply: {
                    draw_bg: {
                        border_color: #444444
                        border_size: 1.0
                    }
                }
            }

            on = {
                from: { all: Forward { duration: 0.2 } }
                apply: {
                    draw_bg: {
                        border_color: #0066CC
                        border_size: 2.0
                    }
                }
            }
        }
    }
}

4. 禁用状态

<Button> {
    animator: {
        disabled = {
            default: off

            off = {
                from: { all: Snap }
                apply: {
                    draw_bg: { color: #0066CC }
                    draw_text: { color: #FFFFFF }
                }
            }

            on = {
                from: { all: Snap }
                apply: {
                    draw_bg: { color: #333333 }
                    draw_text: { color: #666666 }
                }
            }
        }
    }
}

Animator结构

属性	描述
`animator`	根动画容器
`{state} =`	状态定义（hover, pressed, focus, disabled）
`default:`	初始状态值
`{value} =`	状态值定义（on, off, custom）
`from:`	过渡时间线
`apply:`	要动画化的属性

时间线类型（Play Enum）

类型	描述
`Forward { duration: f64 }`	线性向前动画
`Snap`	即时更改，无过渡
`Reverse { duration: f64, end: f64 }`	反向动画
`Loop { duration: f64, end: f64 }`	循环动画
`BounceLoop { duration: f64, end: f64 }`	弹跳循环动画

缓动函数（Ease Enum）

// 基本
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

// 自定义
ExpDecay { d1: f64, d2: f64 }
Bezier { cp0: f64, cp1: f64, cp2: f64, cp3: f64 }
Pow { begin: f64, end: f64 }

使用缓动

from: {
    all: Ease { duration: 0.3, ease: InOutQuad }
}

常见状态

状态	值	触发
`hover`	on, off	鼠标进入/离开
`pressed` / `down`	on, off	鼠标按下/释放
`focus`	on, off	焦点获取/丢失
`disabled`	on, off	部件启用/禁用
`selected`	on, off	选择更改

可动画化属性

大多数 draw_* 着色器uniforms可以动画化：

颜色：color, border_color, shadow_color
尺寸：border_size, border_radius, shadow_radius
变换：scale, rotation, offset
透明度：opacity

编写代码时

始终设置 default: 用于初始状态
使用 Forward 进行平滑过渡
使用 Snap 进行即时状态更改（如禁用）
保持持续时间短（0.1-0.3秒）以获得响应式感觉
在 draw_bg, draw_text 等中动画化着色器uniforms

Rust API（AnimatorImpl Trait）

pub trait AnimatorImpl {
    // 动画到状态
    fn animator_play(&mut self, cx: &mut Cx, state: &[LiveId; 2]);

    // 切换到状态（无动画）
    fn animator_cut(&mut self, cx: &mut Cx, state: &[LiveId; 2]);

    // 检查当前状态
    fn animator_in_state(&self, cx: &Cx, state: &[LiveId; 2]) -> bool;
}

// 使用示例
fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
    match event.hits(cx, self.area()) {
        Hit::FingerHoverIn(_) => {
            self.animator_play(cx, id!(hover.on));
        }
        Hit::FingerHoverOut(_) => {
            self.animator_play(cx, id!(hover.off));
        }
        Hit::FingerDown(_) => {
            self.animator_play(cx, id!(pressed.on));
        }
        Hit::FingerUp(_) => {
            self.animator_play(cx, id!(pressed.off));
        }
        _ => {}
    }
}

回答问题时

状态是独立的 - 多个可以同时激活
当状态达到该值时，动画应用属性
from 定义如何动画，apply 定义要动画的内容
Makepad自动在旧值和新值之间补间
在Rust中使用 id!(state.value) 宏引用动画状态