LottieFiles opens motion design skills for UI animation
For developers working on UI design, this provides a structured framework to inject professional motion design judgment into AI models, helping create more effective and polished user interfaces.
LottieFiles has released a structured set of motion design knowledge for AI agents. The Skills help models make professional judgments on UI animations, state transitions, and loading feedback. The framework includes a main directive, design philosophy, reusable patterns, and a reference guide. It defines three main lines and three hard rules for creating effective animations, focusing on emotional intent, visual narrative, and motion craft. The system also provides quantitative parameters for timing and easing curves.
[动画设计 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 ⚡
