---

name: makepad-animation description: | 关键：用于Makepad动画系统。触发条件： makepad animation, makepad animator, makepad hover, makepad state, makepad transition, "from: { all: Forward", makepad pressed, makepad 动画, makepad 状态, makepad 过渡, makepad 悬停效果 risk: safe source: community

Makepad动画技能

版本： makepad-widgets (dev分支) | 最后更新： 2026-01-19

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

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

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

何时使用

• 你需要在Makepad中构建或调试动画、过渡、悬停状态或动画器时间线。
• 任务涉及animator、状态变化、缓动、关键帧或视觉交互反馈。
• 你需要Makepad特定的动画模式，而非通用的Rust UI指导。

文档

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

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

高级模式

生产就绪的动画模式，参见_base/目录：

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

重要：文档完整性检查

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

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

关键模式

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 | 根动画容器 | | {state} = | 状态定义（hover、pressed、focus、disabled） | | default: | 初始状态值 | | {value} = | 状态值定义（on、off、自定义） | | from: | 过渡时间线 | | apply: | 要动画化的属性 |

时间线类型（Play枚举）

| 类型 | 描述 | |------|-------------| | Forward { duration: f64 } | 线性正向动画 | | Snap | 即时变化，无过渡 | | Reverse { duration: f64, end: f64 } | 反向动画 | | Loop { duration: f64, end: f64 } | 循环动画 | | BounceLoop | 弹跳循环动画 |