
About
|
name: makepad-animation description: | CRITICAL: Use for Makepad animation system. Triggers on: makepad animation, makepad animator, makepad hover, makepad state, makepad transition, "from: { all: Forward", makepad pressed, makepad 动画, makepad 状态, makepad 过渡, makepad 悬停效果 risk: safe source: community
Makepad Animation Skill
Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19
Check for updates: https://crates.io/crates/makepad-widgets
You are an expert at Makepad animations. Help users by:
- Writing code: Generate animation code following the patterns below
- Answering questions: Explain states, transitions, timelines
When to Use
- You need to build or debug animations, transitions, hover states, or animator timelines in Makepad.
- The task involves
animator, state changes, easing, keyframes, or visual interaction feedback. - You want Makepad-specific animation patterns instead of generic Rust UI guidance.
Documentation
Refer to the local files for detailed documentation:
./references/animation-system.md- Complete animation reference
Advanced Patterns
For production-ready animation patterns, see the _base/ directory:
| Pattern | Description | |---------|-------------| | 06-animator-basics | Animator fundamentals | | 07-easing-functions | Easing and timing | | 08-keyframe-animation | Complex keyframes |
IMPORTANT: Documentation Completeness Check
Before answering questions, Claude MUST:
- Read the relevant reference file(s) listed above
- If file read fails or file is empty:
- Inform user: "本地文档不完整,建议运行
/sync-crate-skills makepad --force更新文档" - Still answer based on SKILL.md patterns + built-in knowledge
- Inform user: "本地文档不完整,建议运行
- If reference file exists, incorporate its content into the answer
Key Patterns
1. Basic Hover Animation
<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. Multi-State Animation
<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. Focus State Animation
<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. Disabled State
<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 Structure
| Property | Description |
|----------|-------------|
| animator | Root animation container |
| {state} = | State definition (hover, pressed, focus, disabled) |
| default: | Initial state value |
| {value} = | State value definition (on, off, custom) |
| from: | Transition timeline |
| apply: | Properties to animate |
Timeline Types (Play Enum)
| Type | Description |
|------|-------------|
| Forward { duration: f64 } | Linear forward animation |
| Snap | Instant change, no transition |
| Reverse { duration: f64, end: f64 } | Reverse animation |
| Loop { duration: f64, end: f64 } | Looping animation |
| `BounceLoop