[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-2327e650-3958-4635-84f8-f361a7ac0255":3,"$fZFMuMRX6831cNuAnuCjTcuOye4jXn0jzivppmjyhK90":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"2327e650-3958-4635-84f8-f361a7ac0255","makepad-animation","|","cat_design_graphic","mod_design","sickn33,design","---\nname: makepad-animation\ndescription: |\n  CRITICAL: Use for Makepad animation system. Triggers on:\n  makepad animation, makepad animator, makepad hover, makepad state,\n  makepad transition, \"from: { all: Forward\", makepad pressed,\n  makepad 动画, makepad 状态, makepad 过渡, makepad 悬停效果\nrisk: safe\nsource: community\n---\n\n# Makepad Animation Skill\n\n> **Version:** makepad-widgets (dev branch) | **Last Updated:** 2026-01-19\n>\n> Check for updates: https:\u002F\u002Fcrates.io\u002Fcrates\u002Fmakepad-widgets\n\nYou are an expert at Makepad animations. Help users by:\n- **Writing code**: Generate animation code following the patterns below\n- **Answering questions**: Explain states, transitions, timelines\n\n## When to Use\n- You need to build or debug animations, transitions, hover states, or animator timelines in Makepad.\n- The task involves `animator`, state changes, easing, keyframes, or visual interaction feedback.\n- You want Makepad-specific animation patterns instead of generic Rust UI guidance.\n\n## Documentation\n\nRefer to the local files for detailed documentation:\n- `.\u002Freferences\u002Fanimation-system.md` - Complete animation reference\n\n## Advanced Patterns\n\nFor production-ready animation patterns, see the `_base\u002F` directory:\n\n| Pattern | Description |\n|---------|-------------|\n| 06-animator-basics | Animator fundamentals |\n| 07-easing-functions | Easing and timing |\n| 08-keyframe-animation | Complex keyframes |\n\n## IMPORTANT: Documentation Completeness Check\n\n**Before answering questions, Claude MUST:**\n\n1. Read the relevant reference file(s) listed above\n2. If file read fails or file is empty:\n   - Inform user: \"本地文档不完整，建议运行 `\u002Fsync-crate-skills makepad --force` 更新文档\"\n   - Still answer based on SKILL.md patterns + built-in knowledge\n3. If reference file exists, incorporate its content into the answer\n\n## Key Patterns\n\n### 1. Basic Hover Animation\n\n```rust\n\u003CButton> {\n    text: \"Hover Me\"\n\n    animator: {\n        hover = {\n            default: off\n\n            off = {\n                from: { all: Forward { duration: 0.15 } }\n                apply: {\n                    draw_bg: { color: #333333 }\n                }\n            }\n\n            on = {\n                from: { all: Forward { duration: 0.15 } }\n                apply: {\n                    draw_bg: { color: #555555 }\n                }\n            }\n        }\n    }\n}\n```\n\n### 2. Multi-State Animation\n\n```rust\n\u003CView> {\n    animator: {\n        hover = {\n            default: off\n            off = {\n                from: { all: Forward { duration: 0.2 } }\n                apply: { draw_bg: { color: #222222 } }\n            }\n            on = {\n                from: { all: Forward { duration: 0.2 } }\n                apply: { draw_bg: { color: #444444 } }\n            }\n        }\n\n        pressed = {\n            default: off\n            off = {\n                from: { all: Forward { duration: 0.1 } }\n                apply: { draw_bg: { scale: 1.0 } }\n            }\n            on = {\n                from: { all: Forward { duration: 0.1 } }\n                apply: { draw_bg: { scale: 0.95 } }\n            }\n        }\n    }\n}\n```\n\n### 3. Focus State Animation\n\n```rust\n\u003CTextInput> {\n    animator: {\n        focus = {\n            default: off\n\n            off = {\n                from: { all: Forward { duration: 0.2 } }\n                apply: {\n                    draw_bg: {\n                        border_color: #444444\n                        border_size: 1.0\n                    }\n                }\n            }\n\n            on = {\n                from: { all: Forward { duration: 0.2 } }\n                apply: {\n                    draw_bg: {\n                        border_color: #0066CC\n                        border_size: 2.0\n                    }\n                }\n            }\n        }\n    }\n}\n```\n\n### 4. Disabled State\n\n```rust\n\u003CButton> {\n    animator: {\n        disabled = {\n            default: off\n\n            off = {\n                from: { all: Snap }\n                apply: {\n                    draw_bg: { color: #0066CC }\n                    draw_text: { color: #FFFFFF }\n                }\n            }\n\n            on = {\n                from: { all: Snap }\n                apply: {\n                    draw_bg: { color: #333333 }\n                    draw_text: { color: #666666 }\n                }\n            }\n        }\n    }\n}\n```\n\n## Animator Structure\n\n| Property | Description |\n|----------|-------------|\n| `animator` | Root animation container |\n| `{state} =` | State definition (hover, pressed, focus, disabled) |\n| `default:` | Initial state value |\n| `{value} =` | State value definition (on, off, custom) |\n| `from:` | Transition timeline |\n| `apply:` | Properties to animate |\n\n## Timeline Types (Play Enum)\n\n| Type | Description |\n|------|-------------|\n| `Forward { duration: f64 }` | Linear forward animation |\n| `Snap` | Instant change, no transition |\n| `Reverse { duration: f64, end: f64 }` | Reverse animation |\n| `Loop { duration: f64, end: f64 }` | Looping animation |\n| `BounceLoop { duration: f64, end: f64 }` | Bounce loop animation |\n\n## Easing Functions (Ease Enum)\n\n```rust\n\u002F\u002F Basic\nLinear\n\n\u002F\u002F Quadratic\nInQuad, OutQuad, InOutQuad\n\n\u002F\u002F Cubic\nInCubic, OutCubic, InOutCubic\n\n\u002F\u002F Quartic\nInQuart, OutQuart, InOutQuart\n\n\u002F\u002F Quintic\nInQuint, OutQuint, InOutQuint\n\n\u002F\u002F Sinusoidal\nInSine, OutSine, InOutSine\n\n\u002F\u002F Exponential\nInExp, OutExp, InOutExp\n\n\u002F\u002F Circular\nInCirc, OutCirc, InOutCirc\n\n\u002F\u002F Elastic\nInElastic, OutElastic, InOutElastic\n\n\u002F\u002F Back\nInBack, OutBack, InOutBack\n\n\u002F\u002F Bounce\nInBounce, OutBounce, InOutBounce\n\n\u002F\u002F Custom\nExpDecay { d1: f64, d2: f64 }\nBezier { cp0: f64, cp1: f64, cp2: f64, cp3: f64 }\nPow { begin: f64, end: f64 }\n```\n\n### Using Easing\n\n```rust\nfrom: {\n    all: Ease { duration: 0.3, ease: InOutQuad }\n}\n```\n\n## Common States\n\n| State | Values | Trigger |\n|-------|--------|---------|\n| `hover` | on, off | Mouse enter\u002Fleave |\n| `pressed` \u002F `down` | on, off | Mouse press\u002Frelease |\n| `focus` | on, off | Focus gain\u002Flose |\n| `disabled` | on, off | Widget enabled\u002Fdisabled |\n| `selected` | on, off | Selection change |\n\n## Animatable Properties\n\nMost `draw_*` shader uniforms can be animated:\n- Colors: `color`, `border_color`, `shadow_color`\n- Sizes: `border_size`, `border_radius`, `shadow_radius`\n- Transforms: `scale`, `rotation`, `offset`\n- Opacity: `opacity`\n\n## When Writing Code\n\n1. Always set `default:` for initial state\n2. Use `Forward` for smooth transitions\n3. Use `Snap` for instant state changes (like disabled)\n4. Keep durations short (0.1-0.3s) for responsive feel\n5. Animate shader uniforms in `draw_bg`, `draw_text`, etc.\n\n## Rust API (AnimatorImpl Trait)\n\n```rust\npub trait AnimatorImpl {\n    \u002F\u002F Animate to state\n    fn animator_play(&mut self, cx: &mut Cx, state: &[LiveId; 2]);\n\n    \u002F\u002F Cut to state (no animation)\n    fn animator_cut(&mut self, cx: &mut Cx, state: &[LiveId; 2]);\n\n    \u002F\u002F Check current state\n    fn animator_in_state(&self, cx: &Cx, state: &[LiveId; 2]) -> bool;\n}\n\n\u002F\u002F Usage example\nfn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {\n    match event.hits(cx, self.area()) {\n        Hit::FingerHoverIn(_) => {\n            self.animator_play(cx, id!(hover.on));\n        }\n        Hit::FingerHoverOut(_) => {\n            self.animator_play(cx, id!(hover.off));\n        }\n        Hit::FingerDown(_) => {\n            self.animator_play(cx, id!(pressed.on));\n        }\n        Hit::FingerUp(_) => {\n            self.animator_play(cx, id!(pressed.off));\n        }\n        _ => {}\n    }\n}\n```\n\n## When Answering Questions\n\n1. States are independent - multiple can be active simultaneously\n2. Animation applies properties when state reaches that value\n3. `from` defines HOW to animate, `apply` defines WHAT to animate\n4. Makepad tweens between old and new values automatically\n5. Use `id!(state.value)` macro to reference animation states in Rust\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,157,2029,"2026-05-16 13:27:32",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"设计创意","design","mdi-palette-outline","UI 设计、生成艺术、品牌视觉等创意 Skill",3,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"视觉创意","graphic","mdi-brush","海报、Logo、插画等视觉创作",2,48,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"0405a946-aa3c-46cb-9c0f-8d2cf5afe38e","1.0.0","makepad-animation.zip",2968,"uploads\u002Fskills\u002F2327e650-3958-4635-84f8-f361a7ac0255\u002Fmakepad-animation.zip","ca434ce4141d8d8d0bdca342cdf0fd56e8c443fa39c9f9850dc6e46657aa9c0c","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":8205}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]