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 悬停效果
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:
animator, state changes, easing, keyframes, or visual interaction feedback.Refer to the local files for detailed documentation:
./references/animation-system.md - Complete animation referenceFor 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 |
Before answering questions, Claude MUST:
/sync-crate-skills makepad --force 更新文档"<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 }
}
}
}
}
}
<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 } }
}
}
}
}
<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
}
}
}
}
}
}
<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 }
}
}
}
}
}
| 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 |
| 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 { duration: f64, end: f64 } | Bounce loop animation |
// Basic
Linear
// Quadratic
InQuad, OutQuad, InOutQuad
// Cubic
InCubic, OutCubic, InOutCubic
// Quartic
InQuart, OutQuart, InOutQuart
// Quintic
InQuint, OutQuint, InOutQuint
// Sinusoidal
InSine, OutSine, InOutSine
// Exponential
InExp, OutExp, InOutExp
// Circular
InCirc, OutCirc, InOutCirc
// Elastic
InElastic, OutElastic, InOutElastic
// Back
InBack, OutBack, InOutBack
// Bounce
InBounce, OutBounce, InOutBounce
// Custom
ExpDecay { d1: f64, d2: f64 }
Bezier { cp0: f64, cp1: f64, cp2: f64, cp3: f64 }
Pow { begin: f64, end: f64 }