用途
该技能聚焦动画十二原则中的“跟随动作与重叠动作”,用于让多部件物体、角色肢体、布料、头发等运动呈现真实的拖拽、惯性与回稳行为。其核心前提是:没有任何东西会同时停止。角色停下时头发仍在动,汽车刹车时乘客前倾。跟随动作与重叠动作刻画系统不同部分以不同速率响应力的方式,是让动画具有物理真实感的关键。
核心理论
包含两个相关概念:
- 跟随动作:主体停止后,附属部分因惯性继续运动,随后回稳。描述运动的终止行为。
- 重叠动作:不同部分在整个运动过程中以不同速率移动,而不仅是在停止时。头发并非在头部开始移动时才开始动,而是先拖后、再追上。描述持续的时间偏移。
拖拽层级
离运动根部越远的部分拖拽越明显:
- 根部(髋部、躯干):最先移动,最先停止
- 一级延伸(四肢、头部):轻微延迟
- 二级延伸(手、面部特征):更多延迟
- 三级元素(手指、头发、布料):最大拖拽
每一层级跟随上一层级,形成级联的运动波。
影响拖拽的物理属性
- 质量:更重的元素跟随动作更多
- 柔韧性:更软的材料重叠动作更明显
- 空气阻力:扁平/宽大的表面拖拽更多
- 连接点:松散的连接产生更大偏移
与其他原则的交互
- 时间定义跟随动作的持续时间:快速停止=长跟随;缓慢停止=细微回稳。
- 弧线支配跟随动作的路径:附属部分沿曲线轨迹摆动,而非直线。
- 次要动作常表现为跟随动作:在不分散注意力的前提下丰富画面的辅助运动。
- 挤压/拉伸出现在回稳阶段:跟随动作终止时物体会轻微压缩。
领域应用
UI/动效设计:
- 列表滚动:手指松开后的惯性延续
- 卡片堆叠:带偏移时间的依次回稳
- 模态关闭:背景元素在前景之后回稳
- 下拉刷新:弹性过冲与回弹
- 通知徽章:数量变化时的弹跳与回稳
角色动画:
- 头发与布料模拟:持续的重叠动作
- 尾巴运动:以显著延迟跟随身体路径
- 面部特征:脸颊、下颌跟随头部旋转
- 行走循环:手臂摆动与腿部时间错开
- 跳跃落地:身体压缩,随后附属部分追上
标志与字体:
- 文字揭示:字母以错开的回稳到达
- 标志构建:元素依次落位,各自带跟随动作
- 动态字体:短语以内部时间偏移移动
基于物理的UI:
- 拖放:物体在释放点后短暂继续移动
- 弹性边界:内容跟随手指,随后弹回
- 弹簧动画:自然的过冲与回稳
常见错误
- 所有东西同时停止:产生机械、呆板的感觉
- 过度跟随动作:元素显得脱节、飘浮
- 没有层级:所有部分以相同延迟移动
- 线性回稳:跟随动作应缓出,而非突然停止
错开公式
为获得可信的重叠动作,按层级每级偏移2-4帧(24fps下)。根部在第1帧移动,一级在第2-3帧,二级在第4-6帧,三级在第6-10帧。
回稳曲线
跟随动作绝不应直接跳回静止。使用带轻微过冲的缓出曲线:
- 快速初始移动越过静止位置
- 较慢地返回静止位置
- 可能向反方向出现微小过冲
- 最终缓入静止
实现启发式
识别所有可独立移动的元素。根据质量、柔韧性和距根部的距离为每个元素分配拖拽值。按拖拽比例应用时间偏移。在终止阶段加入回稳振荡。当运动感觉僵硬时,通常意味着需要更多重叠动作。