制作多部件运动动画需要表现惯性拖拽和停止后缓冲时…

适用于多部件对象、角色附肢、布料、头发等需要真实拖拽、动量和稳定回落表现的运动设计。

适用场景

解决思路

1. 应用动量原则：让对象不要同时全部停止；主运动停止后，让附属部件因惯性继续移动并最终稳定。
2. 应用跟随动作：当主体停止时，让附属部件继续运动并回稳，把它作为运动的终止行为来处理。
3. 应用重叠动作：让不同部件在整个运动过程中以不同速率运动；不要让头发在头部启动时同步启动，而要让其滞后拖拽并随后追上，形成持续的时间偏移。
4. 建立拖拽层级：离运动根越远的部件，拖拽越强。
5. 根节点（臀部、躯干）先移动、先停止。
6. 一级延伸（四肢、头部）设置轻微延迟。
7. 二级延伸（手、面部特征）设置更多延迟。
8. 三级元素（手指、头发、布料）设置最大拖拽。
9. 让每一级跟随上一级运动，形成级联的运动波。
10. 按质量调整拖拽：更重的元素设置更多跟随动作。
11. 按柔性调整拖拽：更软的材料设置更多重叠动作。
12. 按空气阻力调整拖拽：扁平或宽大的表面设置更多拖拽。
13. 按连接点调整拖拽：连接越松，设置越大的偏移。
14. 用 timing 定义跟随持续时间：快速停止时使用较长跟随；缓慢停止时使用细微稳定。
15. 用弧线约束跟随路径：让附属部件沿曲线轨迹摆动，不要沿直线运动。
16. 把次要动作作为跟随动作使用：添加支撑性运动来丰富画面，但不要分散注意力。
17. 在稳定阶段加入 squash/stretch：当跟随动作终止时，让对象略微压缩。
18. UI/动效设计：列表滚动加入手指释放后的惯性延续。
19. UI/动效设计：卡片堆叠用带偏移的时序依次稳定。
20. UI/动效设计：模态关闭时，让背景元素在前景元素之后稳定。
21. UI/动效设计：下拉刷新使用弹性过冲和返回。
22. UI/动效设计：通知徽章在数量变化时弹跳并稳定。
23. 角色动画：头发和布料持续应用重叠动作。
24. 角色动画：尾巴沿身体路径运动并带有显著延迟。
25. 角色动画：脸颊、下颌肉等面部特征跟随头部旋转。
26. 角色动画：走路循环中让手臂摆动与腿部时序错开。
27. 角色动画：跳跃落地时身体先压缩，然后让附属部件追上。
28. Logo 和排版：词语显现时让字母以错开时序到达并稳定。
29. Logo 和排版：Logo 构建时让元素依次落地，每个元素都带跟随动作。
30. Logo 和排版：动态字体让短语运动时带有内部时序偏移。
31. 基于物理的 UI：拖放时让对象在释放点后短暂继续移动。
32. 基于物理的 UI：弹性边界让内容跟随手指，然后回弹。
33. 基于物理的 UI：弹簧动画使用自然过冲和稳定。
34. 避免所有部件同时停止：否则会产生机器人般、机械的感觉。
35. 避免过度跟随：否则元素会显得脱节、漂浮。
36. 避免没有层级：不要让所有部件使用相同延迟。
37. 避免线性稳定：跟随动作应缓出，不要突然停止。
38. 使用错峰公式：在 24fps 下，按层级让次要元素每级偏移 2-4 帧。
39. 使用错峰公式：根节点在第 1 帧运动。
40. 使用错峰公式：一级元素在第 2-3 帧运动。
41. 使用错峰公式：二级元素在第 4-6 帧运动。
42. 使用错峰公式：三级元素在第 6-10 帧运动。
43. 应用稳定曲线：跟随动作绝不瞬间回到静止。
44. 应用稳定曲线：使用带轻微过冲的 ease-out 曲线。
45. 应用稳定曲线：先快速越过静止位。
46. 应用稳定曲线：再较慢返回静止位。
47. 应用稳定曲线：可向反方向出现微小过冲。
48. 应用稳定曲线：最终缓入静止。
49. 实现启发式：找出所有可以独立运动的元素。
50. 实现启发式：根据质量、柔性和距根距离，为每个元素分配 drag 值。
51. 实现启发式：按 drag 比例应用时序偏移。
52. 实现启发式：在终止处加入稳定振荡。
53. 实现启发式：当运动感觉僵硬时，增加重叠动作。

适用边界 · 注意事项

• 需要刚性、机械、完全同步的运动风格时，不要使用跟随与重叠动作，或应显著减弱。
• 所有部件被硬绑定为一体、不应独立运动时，不要分配不同 drag 值或时序偏移。
• 需要瞬间冻结或急停以表达冲击、卡顿或刻意非自然效果时，慎用缓出和过冲稳定。