SuperAPI AI 工具集

follow-through-overlapping

设计与创作

查看项目

更新于 10-15 14:11

技能介绍

用途

该技能聚焦动画十二原则中的“跟随动作与重叠动作”,用于让多部件物体、角色肢体、布料、头发等运动呈现真实的拖拽、惯性与回稳行为。其核心前提是:没有任何东西会同时停止。角色停下时头发仍在动,汽车刹车时乘客前倾。跟随动作与重叠动作刻画系统不同部分以不同速率响应力的方式,是让动画具有物理真实感的关键。

核心理论

包含两个相关概念:

  • 跟随动作:主体停止后,附属部分因惯性继续运动,随后回稳。描述运动的终止行为。
  • 重叠动作:不同部分在整个运动过程中以不同速率移动,而不仅是在停止时。头发并非在头部开始移动时才开始动,而是先拖后、再追上。描述持续的时间偏移。

拖拽层级

离运动根部越远的部分拖拽越明显:

  • 根部(髋部、躯干):最先移动,最先停止
  • 一级延伸(四肢、头部):轻微延迟
  • 二级延伸(手、面部特征):更多延迟
  • 三级元素(手指、头发、布料):最大拖拽

每一层级跟随上一层级,形成级联的运动波。

影响拖拽的物理属性

  • 质量:更重的元素跟随动作更多
  • 柔韧性:更软的材料重叠动作更明显
  • 空气阻力:扁平/宽大的表面拖拽更多
  • 连接点:松散的连接产生更大偏移

与其他原则的交互

  • 时间定义跟随动作的持续时间:快速停止=长跟随;缓慢停止=细微回稳。
  • 弧线支配跟随动作的路径:附属部分沿曲线轨迹摆动,而非直线。
  • 次要动作常表现为跟随动作:在不分散注意力的前提下丰富画面的辅助运动。
  • 挤压/拉伸出现在回稳阶段:跟随动作终止时物体会轻微压缩。

领域应用

UI/动效设计:

  • 列表滚动:手指松开后的惯性延续
  • 卡片堆叠:带偏移时间的依次回稳
  • 模态关闭:背景元素在前景之后回稳
  • 下拉刷新:弹性过冲与回弹
  • 通知徽章:数量变化时的弹跳与回稳

角色动画:

  • 头发与布料模拟:持续的重叠动作
  • 尾巴运动:以显著延迟跟随身体路径
  • 面部特征:脸颊、下颌跟随头部旋转
  • 行走循环:手臂摆动与腿部时间错开
  • 跳跃落地:身体压缩,随后附属部分追上

标志与字体:

  • 文字揭示:字母以错开的回稳到达
  • 标志构建:元素依次落位,各自带跟随动作
  • 动态字体:短语以内部时间偏移移动

基于物理的UI:

  • 拖放:物体在释放点后短暂继续移动
  • 弹性边界:内容跟随手指,随后弹回
  • 弹簧动画:自然的过冲与回稳

常见错误

  • 所有东西同时停止:产生机械、呆板的感觉
  • 过度跟随动作:元素显得脱节、飘浮
  • 没有层级:所有部分以相同延迟移动
  • 线性回稳:跟随动作应缓出,而非突然停止

错开公式

为获得可信的重叠动作,按层级每级偏移2-4帧(24fps下)。根部在第1帧移动,一级在第2-3帧,二级在第4-6帧,三级在第6-10帧。

回稳曲线

跟随动作绝不应直接跳回静止。使用带轻微过冲的缓出曲线:

  • 快速初始移动越过静止位置
  • 较慢地返回静止位置
  • 可能向反方向出现微小过冲
  • 最终缓入静止

实现启发式

识别所有可独立移动的元素。根据质量、柔韧性和距根部的距离为每个元素分配拖拽值。按拖拽比例应用时间偏移。在终止阶段加入回稳振荡。当运动感觉僵硬时,通常意味着需要更多重叠动作。