LottieFiles 开源动效设计知识库，为 Agent 注入专业判断力

[动画设计 Skills] LottieFiles: Motion Design Skill @LottieFiles 团队开源的一套结构化动效设计领域知识，Agent 处理 UI 动画、状态过渡、...

[动画设计 Skills] LottieFiles: Motion Design Skill @LottieFiles 团队开源的一套结构化动效设计领域知识，Agent 处理 UI 动画、状态过渡、加载反馈等任务时，Skills 自动激活，为模型注入专业动效设计的判断力。 github.com/LottieFiles/mo… 核心理念：理念优先，实现无关 Skills 的设计让 Agent 在写代码之前先回答 “像动效导演一样思考” 的问题：观众应该感受到什么？哪个元素是主角？运动路径是弧线还是直线？具体的实现（CSS、GSAP、Framer Motion、Lottie、Spring）只是最后的翻译步骤。 内容架构：渐进式加载的四层设计 SKILL.md 主指令（<500行，常驻上下文） director/ 设计哲学（按需深读） patterns/ 可复用配方（入场退场、状态反馈、氛围、编排） reference/ 查询表（时长、缓动、质量清单、排错） 思想内核：三条主线与三条硬规则 三条主线回答了动效设计的三个递进问题： 1. 情感意图——观众应感受什么（信任、愉悦、紧迫、平静……情绪直接决定时长与缓动）； 2. 视觉叙事——即使是 200ms 的提示淡入，也隐含“设置→行动→收尾”三段结构（约 20-30% / 30-40% / 30-40% 的时间分配）； 3. 动效工艺——弧线、次级运动、错峰，让运动“可信”。 工艺层面又分三个动效层次：主要动作（100% 幅度）、次要动作（30-50%，延迟 50-100ms 且用不同缓动）、氛围层（10-20%，持续而不抢注意力）。缺了后两层，动画就会显得“扁平廉价”——这是对“为什么我的动画看起来没有灵魂”最直接的答案。 三条硬规则体现了专业的克制： · 空间移动绝不用 linear 缓动（只有旋转加载器和进度条例外）； · 重要状态变化绝不只改透明度，必须叠加位移或缩放； · 1/3 规则——移动不超过屏幕三分之一而不加关键帧，同时运动的元素不超过总数的三分之一。 最大的亮点：把手艺“参数化” 把近百年的动画手艺（迪士尼 12 原则、Material Design、Apple HIG 的隐性知识）从定性描述变成定量参数： · 时长表：提示 80-120ms，按钮 120-180ms，模态框 300-400ms，页面过渡 400-600ms；入场比退场长 30-50%（进慢出快）。 · 缓动方向律：入场 ease-out（减速到达），退场 ease-in（加速离开），屏内 ease-in-out，并直接给出 Material 3、Apple HIG 的贝塞尔数值。 · 四种动效人格（Playful / Premium / Corporate / Energetic），各自绑定时长区间、曲线和过冲百分比——项目选一种，全站保持一致。品牌动效识别被简化为三个常量：一条签名曲线、三档时长、一个统一入场模式。 · 迪士尼原则的条件化取舍：挤压拉伸在高端品牌中舍弃（形变破坏精致感），预备动作在 <150ms 的微反馈中舍弃，夸张按品牌调性从 30% 削到 0%，错误抖动特意不加过冲——错误应该果断，不应俏皮。这种“什么情况下不用什么”的知识，往往比正面规则更稀缺。 💬 2 🔄 1 ❤️ 1 👀 348 📊 3 ⚡