设计UI动效与过渡时，用迪士尼12原则和电影/漫画叙事手法让…

在设计过渡、微交互、引导流程、滚动动画或任何UI动效时，用动画原则和叙事技巧让界面显得生动、有意图、有情感共鸣。

适用场景

解决思路

1. 挤压与拉伸：按下时按钮轻微缩小再弹回，传达物理感与响应性，例如 button:active { transform: scale(0.96); } 配合 button { transition: transform 80ms ease-out; }，仅用于主要CTA和令人满意的确认反馈。
2. 预备动作：在主动作前加一个小幅准备动作，例如菜单项在打开前轻微位移，或过渡开始前先出现加载指示器，让用户对即将发生的事有预期。
3. 舞台调度：一次清晰地呈现一个想法，入场动画应把注意力引向新内容而非与已有内容竞争，例如模态框打开时页面其余部分变暗。
4. 逐帧 vs 姿势到姿势：采用姿势到姿势——定义明确的起始和结束状态，让系统插值，用 transition 或弹簧物理库处理中间过程。
5. 跟随与重叠动作：元素不要同时停止，列表项错开入场（每项比前一项晚40–60ms）比同时出现更自然，例如 .item:nth-child(1) { animation-delay: 0ms; } .item:nth-child(2) { animation-delay: 50ms; } .item:nth-child(3) { animation-delay: 100ms; }。
6. 缓入缓出：不要用线性过渡，入场元素用 ease-out（快起慢停，自然到达），离场元素用 ease-in（慢起快停，有意图地退出），屏幕内位置移动用 ease-in-out，响应触摸/拖拽的交互元素用弹簧物理。
7. 弧线：自然运动沿弧线而非直线，tooltip 和 popover 应从其原点缩放（而非均匀淡入），注意 transform-origin。
8. 次要动作：用辅助动作强化主动作，例如按钮按下时内部图标轻微位移，表单提交后对勾自行绘制，这些细节奖励注意力但不强求。
9. 时间：时长即含义，快=响应、有活力，慢=有分量、重要；微交互（按钮按下、悬停）用80–120ms，组件过渡（下拉打开、tooltip）用150–250ms，页面级过渡和模态入场用250–400ms，主视觉动画和引导序列用400–600ms，超过600ms几乎总是太长。
10. 夸张：小幅刻意夸大让动作更令人满意，例如成功对勾略微过冲再稳定，或通知徽标弹出时略大于最终尺寸，夸张幅度为10–15%，不要戏剧化。
11. 扎实设计：尊重界面的深度与层次，元素运动方式应与其感知层级一致，底部弹层从下方滑入（因为它位于内容之下），tooltip 出现在触发器附近而非屏幕另一侧。
12. 吸引力：整体动效应契合品牌，活泼的消费类应用可用更有弹性的动效，金融工具用精确可控的过渡，吸引力不是装饰，而是通过时间表达的品牌个性。
13. 揭示与入场：进入视口的内容在到达时更有冲击力，用滚动触发的入场动画（如区块随滚动淡入上移），关键是内容从有意义的方向进入（从下方，因为用户从下方滚动而来），例如 @keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }。
14. 视差：背景元素比前景元素移动更慢以营造深度，例如主视觉背景图以50%滚动速度移动而内容以100%移动，要克制使用，过强的视差会导致晕动症。
15. 硬切 vs 溶解：硬切（瞬间状态变化）快速、果断、高效，用于页面导航、关闭模态框；溶解/交叉淡入渐进、深思、连贯，用于两个相关状态之间，如标签切换、图片画廊过渡。
16. 场景设定：区块的第一帧在细节出现前先设定场景，主视觉用强图像和大字号，随后支持性细节在短暂延迟后出现，这是电影式开场，用户视线先被引向主体再开始阅读。
17. 分镜序列：漫画通过一系列静态画面暗示其间运动，UI中步骤指示器、引导轮播和进度流程用同样逻辑，每个“画面”是序列中的一刻，用户视线在其间移动。
18. 速度线与能量：强调线、径向渐变和方向性模糊无需实际动画即可暗示运动与能量，带轻微方向性渐变的按钮暗示它指向某处，带拖尾透明度的加载指示器暗示方向。
19. 字体作为语调：漫画中字的大小、粗细和风格传达情绪，UI中超大展示字体承载能量，小而柔和的说明文字后退，这是作为情感寄存器的微排版，不只是层级。
20. 间隙：漫画中读者想象填补画面之间的空间，UI中过渡就是间隙——状态之间发生的事，平滑过渡让用户大脑构建连贯心智模型，突兀跳跃迫使用户重新定位。
21. 始终尊重 prefers-reduced-motion，有前庭障碍或运动敏感的用户必须能在无动画情况下使用产品，例如 @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }。
22. 动效应服务用户而非娱乐用户，每个动画都要回答：这是否帮助用户理解发生了什么、某物从何而来、或下一步看哪里？
23. 几乎所有动效时长都在400ms以内，如果动画更长，就是在拖慢用户。
24. 绝不动画化布局属性（width、height、padding、top、left），它们会触发重排；只动画化 transform 和 opacity，它们在GPU上运行。
25. 每个区域一次只做一个动效，同时竞争的动画会造成视觉噪音，要分阶段呈现。
26. 用审查清单自检：prefers-reduced-motion 是否禁用或减少所有动画？所有过渡是否使用 ease-out（入场）、ease-in（离场）或 ease-in-out（重定位）？是否避免线性缓动？组件级过渡时长是否在400ms以内？是否只动画化 transform 和 opacity（而非布局属性）？入场动画是否从有意义的方向进入（滚动揭示从底部，缩放从原点）？动效是否匹配品牌语调（活泼用弹性，企业用精确）？列表项是否用错开入场而非同时出现？

适用边界 · 注意事项

• 不要用线性缓动做UI动效，它读起来机械且未完成。
• 不要动画化布局属性（width、height、padding、top、left），会造成重排。
• 不要在同一区域同时运行多个竞争动画，会造成视觉噪音。
• 不要使用超过600ms的动效，用户会感觉在等待。
• 不要使用过强的视差，会导致晕动症。