动效原理

十二原则中六条在 UI 动效里高频使用。挤压与拉伸用于表达质量感，按钮按下微缩、加载圆圈形变，幅度要小，界面元素不是果冻。预备动作在界面里是反向的暗示，元素出场前先小幅反向，如下拉刷新的阻尼回弹，暗示即将发生的事。缓入缓出是最普适的一条，自然界没有匀速突变，界面运动的加速减速曲线（ease）让动效脱离机械感，除数据加载条外慎用线性。弧线运动让位移带自然曲线，弹窗从触发点沿弧线飞入比直线更有空间感。次级动作让主变化伴随细节，列表项进场时主内容位移动、图标微转，层次立刻丰富。跟随与重叠动作处理元素组的时间差，卡片列表逐项延迟十毫秒进场（stagger），比整列同时动优雅得多。其余如时间节奏、演出布局同样是时长与构图的理论依据。面试要求现场把某条原则对应到自己作品的某个动效。

时长的经验区间：微交互反馈一百到二百毫秒，给点击即时回应；小型元素过渡如按钮展开成面板二百到三百毫秒；页面级转场三百到四百五十毫秒；大型复杂场景或首次教学动画可到五百毫秒以上。低于一百毫秒人眼感知不到过程只剩闪烁，超过五百毫秒的常规操作会让人等得烦躁。缓动选择的基本法则是元素的进出方向决定性格：元素入场（从屏外进入或放大出现）用减速曲线 ease-out，起步快结尾缓，用户视线第一时间接住结果；元素离场用加速曲线 ease-in，缓慢起步快速离开，不抢注意力；需要真实质量感的位移用标准的 ease-in-out；弹性质感用带回弹的曲线但过冲幅度控制在百分之十以内。 Material 与 HIG 都给出具体曲线值，默认遵守平台规范，特殊动效再自定义。另一个关键是与帧率配合，动效在六十帧每秒下每帧约十六毫秒，时长设成帧的整数倍更顺滑。

动效的价值分类是判断该不该动、怎么动的决策框架。第一类解释性动效，说明因果关系与空间结构，最典型的是共享元素转场，点击卡片后卡片展开成详情页，用户明白详情来自哪里；抽屉展开时内容推出而非凭空覆盖，交代层级关系；这类动效优先级最高，是认知可用性的一部分。第二类引导性动效，把注意力带到需要的地方，表单报错字段晃动、新功能提示的呼吸动画、下拉刷新的阻尼反馈，服务于任务完成。第三类个性表达动效，品牌人格的载体，加载动画的品牌形象、空状态的插画动效、按钮的独特微动，让产品有温度可记忆，但要克制在不阻碍效率的位置。判断标准是每个动效至少服务一个目的，纯装饰动效先问能不能删。三个目的也对应资源分配：解释类必须做对，引导类按需做，个性类锦上添花。面试中用这个框架评价自己或名品的动效，立刻显出方法论。

共享元素转场指同一元素（图片、标题、卡片）在两个页面状态之间连续变形过渡，前页的缩略图放大变成后页的头图，前页标题滑动到后页的标题位。它解决的是空间连续性问题：传统页面切换是整页覆盖，用户瞬间失去位置感，需要重新定位我在哪、内容从哪来；共享元素建立了视觉锚点，新旧界面通过同一物体的运动衔接，用户自然理解前因后果，认知负担骤降。典型应用：列表到详情、头像到个人主页、标签切换的内容过渡、图片浏览器。设计要点有四个：一是元素在新旧位置的对应关系必须明确，位置与尺寸连续可追踪；二是时长三百到四百毫秒配减速曲线；三是过渡中其他元素淡出淡入让主角突出，避免全屏都在动；四是文字这类内容变化的元素用容器变形，文字本体做交叉淡变防止拉伸模糊；五是降级方案，低性能设备或跨端场景退化为简单淡变。这是转场设计面试的标准知识点，最好能举 Material 与 iOS 系统级的例子。

动效交付的完整规格包括六要素：触发条件（用户动作、状态变化、定时）、作用元素与起止状态（属性从什么值到什么值）、时长毫秒数、缓动曲线（标准曲线名或贝塞尔数值）、时序编排（多元素的先后与延迟，常见 stagger 十毫秒到三十毫秒）、循环与终止行为（次数、可否中断）。载体形式按复杂度递进：简单参数直接写在交互文档或 Figma 的原型备注；中等复杂度用动效规格表加录屏；精确还原用 Lottie 方案，AE 制作用 Bodymovin 插件导出 JSON，前端直接播放，矢量缩放无损；网页动效可直接给 CSS 或 GSAP 代码片段；物理感复杂的用原型工具 ProtoPie 或 Principle 交付可操作原型。协作要点：动效必须与开发确认性能预算，低端机帧率达标才算成功；动效文件入库与组件一样管理；验收时用慢放录屏逐帧对比。只给一张 GIF 让开发猜参数是交付不专业的标志。