Skip to main contentmakepad-animation
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 悬停效果
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/foolhardy45/portfolio --skill makepad-animationコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
| 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 | unknown |
| 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
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
- 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 { duration: f64, end: f64 } | Bounce loop animation |
Easing Functions (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 }
Using Easing
from: {
all: Ease { duration: 0.3, ease: InOutQuad }
}
Common States
| State | Values | Trigger |
|---|
hover | on, off | Mouse enter/leave |
pressed / down | on, off | Mouse press/release |
focus | on, off | Focus gain/lose |
disabled | on, off | Widget enabled/disabled |
selected | on, off | Selection change |
Animatable Properties
Most draw_* shader uniforms can be animated:
- Colors:
color, border_color, shadow_color
- Sizes:
border_size, border_radius, shadow_radius
- Transforms:
scale, rotation, offset
- Opacity:
opacity
When Writing Code
- Always set
default: for initial state
- Use
Forward for smooth transitions
- Use
Snap for instant state changes (like disabled)
- Keep durations short (0.1-0.3s) for responsive feel
- Animate shader uniforms in
draw_bg, draw_text, etc.
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));
}
_ => {}
}
}
When Answering Questions
- States are independent - multiple can be active simultaneously
- Animation applies properties when state reaches that value
from defines HOW to animate, apply defines WHAT to animate- Makepad tweens between old and new values automatically
- Use
id!(state.value) macro to reference animation states in Rust
