
关于
Makepad 动画系统参考,用于 Rust 原生 UI 框架中的动画配置和实现。
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必须:
- 阅读上面列出的相关参考文件
- 如果文件读取失败或文件为空:
- 通知用户:"本地文档不完整,建议运行
/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 | 根动画容器 |
| {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 | 弹跳循环动画 |