入场与退场动画配方motion-design-skill常见模式与参数详解【免费下载链接】motion-design-skillUniversal motion design principles for AI agents — timing, easing, choreography, and Disney animation principles adapted for UI项目地址: https://gitcode.com/gh_mirrors/mo/motion-design-skillmotion-design-skill是一个面向 AI 代理的通用动效设计技能库教你在写任何一行动画代码之前先像动画导演一样做出正确的设计决策。它把迪士尼动画原则、时间轴timing、缓动曲线easing与编排choreography方法论系统性地移植到 UI 场景兼容 CSS、Framer Motion、GSAP、Lottie、Spring 等任何动画系统。本文聚焦最实用的部分——入场与退场动画配方把项目里的常见模式、推荐参数一次性讲清楚 先懂两条黄金法则在套用任何配方前motion-design-skill 要求所有动画先满足三大支柱情绪意图、视觉叙事、运动工艺详见 director/core-philosophy.md。对入场/退场而言最关键的两条方向性规则是场景缓动方向直觉解释入场Entranceease-out减速快速启动、轻柔着陆退场Exitease-in加速轻柔起步、快速离场屏幕内移动ease-in-out两端都平滑循环氛围动效sine 型 ease-in-out首尾无缝衔接第二条规则是时长不对称入场 基准时长100%退场 入场的 65%~75%。因为用户更关心出现的东西入场理应比退场多停留 30%~50% 的时间。四种入场模式配方完整配方收录在 patterns/entrance-exit.md这里给出核心参数1️⃣ 直接入场Slide In位置 透明度偏移 20-40px从opacity 0滑入到最终位置200-350msease-out。动效人格偏移量缓动曲线过冲Playful俏皮30-50pxease-out-back10-15%Premium高端15-25px(0.4, 0, 0.2, 1)0%Corporate商务20-30px(0.2, 0, 0, 1)0-3%Energetic活力40-80pxease-out-expo15-25% 方向自带语义从下方 到达从右侧 前进从左侧 回退从上方 下拉/权威。2️⃣ 涌现入场Scale In缩放 透明度从 85-95% 放大到 100%250-400ms。最适合模态框、对话框、通知、气泡提示。活力型可以从 50-70% 起步并配 15-30% 过冲高端型则从 95-98% 起步、零过冲。3️⃣ 揭幕入场Clip/Maskclip-path 或 mask 透明度300-500msease-out。方向选择从上到下戏剧感、从左到右阅读顺序、从中心向外聚焦、从边缘向内收拢。4️⃣ 组装入场Multi-Part多个部件从不同位置抵达stagger 间隔 50-100ms总时长 300-600ms。适合图标组装、Logo 构建、数据可视化拼装。四种退场模式配方退场遵循入场时长的 65-75%总原则典型时长150-250msease-in配方参数适用场景 直接退场Slide Out偏移 20-40px 透明150-250ms常规离场️ 溶解退场Dissolve透明度可叠加缩至 98%温和退场、交叉淡入淡出 收缩退场Collapse缩放至 85-95% 透明删除、关闭模态框 转移退场Transfer朝目标位移 缩小ease-in-out250-400ms加入购物车、移入文件夹入场-退场连续性让视线接力好的页面切换视线应该自然地从退场元素流转到入场元素。motion-design-skill 给出四条连续性规则退场点尽量靠近入场点退场与入场之间保留100-150ms 的时间重叠配对的入场/退场使用同一缓动家族眼睛应能不跳跃地跟随元素移动即拿即用的四个经典示例以下示例直接摘自 patterns/entrance-exit.md#L64-L82 通知滑入Notification Slide-In从右侧滑入 透明度250msease-out过冲 3-5%商务或 10-15%俏皮图标延迟 50ms 后淡入100ms Toast 关闭Toast Dismiss朝边缘滑出 透明180msease-in其余 toast 上移补位200msease-in-out 下拉菜单打开Dropdown Open容器 Y 轴从 0 缩放到 100%200msease-out菜单项以 30ms 间隔错峰淡入容器完成后 50ms 开始 页面切换Page Transition当前页向左滑出 淡出300msease-in新页从右侧进入 淡入400msease-out延迟 100ms共享元素变形过渡400msease-in-out参数速查表时长、曲线与错峰按元素类型选时长元素类型推荐时长Tooltip / 微反馈80-120ms按钮 / 开关120-180ms图标切换150-250ms卡片入场/退场200-350ms模态框 / 对话框300-400ms页面过渡400-600ms戏剧性揭幕600-1200ms距离会缩放时长以 100px 为基准200px ≈ 1.3 倍400px ≈ 1.6 倍全屏 1.8-2.0 倍完整表见 reference/timing-easing-tables.md。业界标准缓动曲线曲线名称Cubic Bezier用途MD3 Standard(0.2, 0, 0, 1)默认屏幕内运动MD3 Emphasized(0.05, 0.7, 0.1, 1)入场、吸引注意MD3 Accelerate(0.3, 0, 1, 1)退场、关闭Apple HIG(0.25, 0.1, 0.25, 1)iOS 标准Gentle float(0.4, 0, 0.2, 1)氛围、背景动效Bounce settle(0.175, 0.885, 0.32, 1.275)俏皮过冲多元素错峰Stagger预算模式间隔总预算适用微级联20-40ms200ms列表项、网格单元标准50-100ms400ms卡片、面板、导航戏剧性100-200ms600ms英雄区块波浪30-60ms500ms数据可视化⚠️红线总 stagger 必须小于 500ms——超过就是拖沓而非编排。更完整的错峰配方列表、网格卡片、仪表盘时间线见 patterns/multi-element.md。进阶把迪士尼原则揉进配方项目用 director/disney-principles.md 把迪士尼 12 原则逐一改写成了 UI 参数。入场/退场最常踩中的几条预备Anticipation主动作前加一个 10-20% 幅度的反向小动作时长 100-200ms。比如卡片入屏前先向反方向偏 5-10px画面立刻活了跟随与拖尾Follow Through子元素比父元素延迟 50-150ms 停止卡片落位后阴影再晚 50ms 跟上弧线Arcs路径中点加 10-20px 垂直偏移机械感 UI 可保留直线次要动作Secondary Action幅度为主动作的 30-50%延迟 50-100ms且用不同缓动夸张Exaggeration俏皮型 15-25%、活力型 20-30%、商务型 0-5%、高端型 0%——高端品牌绝不过冲避坑清单这些错误最伤质感摘自 reference/troubleshooting.md 与 SKILL.md 的质量红线问题病因修复看起来呆板机械linear 缓动、无弧线加缓动曲线 弧线路径感觉太慢时长与元素类型不匹配对照时长表入场用 ease-out廉价、单薄缺次要层 氛围层加阴影运动 背景微动过于喧闹同时运动的元素太多应用 1/3 规则降低幅度千篇一律到处用同一条缓动选定一种动效人格并贯彻四条绝不破的红线空间运动绝不使用 linear重要状态变化绝不只用透明度运动距离绝不超 1/3 屏而无中间关键帧务必具备主动作 次要 氛围三层运动。总结motion-design-skill 的入场/退场方法论可以浓缩为一句话入场减速、退场加速退场是入场的 65-75%用缓动家族而非单一曲线表达品牌性格。项目完整结构速览主入口SKILL.md — 8 步检查清单 时长/缓动速查表配方库patterns/entrance-exit.md、patterns/state-feedback.md、patterns/ambient-continuous.md、patterns/multi-element.md方法论director/ — 迪士尼原则、情绪映射、编排与叙事参考表reference/ — 时长缓动表、属性选择、质量清单、排错指南把这些表存进你的工具箱下次设计任何 UI 动画时先查表再写代码你的动效质感会立刻上一个台阶 ✨【免费下载链接】motion-design-skillUniversal motion design principles for AI agents — timing, easing, choreography, and Disney animation principles adapted for UI项目地址: https://gitcode.com/gh_mirrors/mo/motion-design-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考