关于 follow-through-overlapping
这是一份关于动画与动态设计中跟随动作和重叠动作的指南，说明层级、物理属性与时间偏移如何影响角色、界面和文字的运动。
主要功能
- 01跟随动作与重叠动作概念
- 02运动部件的拖曳层级
- 03影响拖曳的物理因素
- 04时间偏移与缓动曲线
- 05动画和 UI 中的应用
适用场景
- 01为角色附属部位添加自然运动
- 02设计惯性滚动和弹簧式 UI
- 03错开标志或文字动画
- 04排查僵硬或同步停止的动作
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/follow-through-overlapping确认已加载。
详细介绍
跟随动作与重叠动作精通
动量原则
没有任何东西会同时停止。角色停下时，头发仍会继续移动。汽车刹车时，乘客会向前倾。跟随动作和重叠动作体现了系统中不同部分对力的响应速率各不相同这一现象——正是这一原则，让动画具有真实的物理感。
核心理论：两个相关概念
跟随动作（Follow Through）：主体停止时，附属部分因惯性继续移动，然后逐渐稳定。这描述的是动作的结束方式。
重叠动作（Overlapping Action）：在整个动作过程中，不同部分以不同速率移动，而不只是在停止时。头部开始移动时，头发不会立即跟着动——它会拖在后面，然后再跟上。这是持续存在的时序偏移。
拖曳层级
离运动根部越远的部分，拖曳越明显：
- 根部（臀部、躯干）：最先移动，也最先停止
- 主要延伸部分（四肢、头部）：略有延迟
- 次要延伸部分（手、面部特征）：延迟更明显
- 三级元素（手指、头发、布料）：拖曳最大
每个层级都跟随前一个层级，形成层层传递的运动波。
影响拖曳的物理属性
- 质量：较重的元素跟随动作更明显
- 柔韧性：较柔软的材质会呈现更明显的重叠动作
- 空气阻力：扁平或宽阔的表面会产生更明显的拖曳
- 连接点：连接越松，偏移越大
与其他原则的相互作用
时间安排决定跟随动作的持续时间：急停时跟随动作时间较长；缓慢停止时，稳定过程较轻微。
弧线决定跟随动作的路径：附属部分沿弯曲轨迹摆动，而非直线运动。
次要动作通常就是跟随动作：这种辅助运动能丰富画面，又不会喧宾夺主。
稳定过程中会出现挤压与拉伸：跟随动作结束时，物体会轻微压缩。
领域应用
UI／动态设计
- 列表滚动：手指松开后仍因惯性继续滚动
- 卡片堆叠：卡片按顺序、以错开的时序逐一稳定
- 模态框关闭：前景消失后，背景元素再逐渐稳定
- 下拉刷新：弹性越界后回弹
- 通知徽标：数量变化时弹跳并稳定
角色动画
- 头发与布料模拟：持续呈现重叠动作
- 尾巴运动：沿身体的运动轨迹跟随，并有明显延迟
- 面部特征：脸颊、下颌随头部转动而移动
- 行走循环：手臂摆动与腿部动作的时序错开
- 跳跃落地：身体压缩，然后附属部分才跟上
标志与排版
- 单词显现：字母依次出现，并错开稳定
- 标志组合：各元素依次落位，并各自呈现跟随动作
- 动态排版：短语内部各部分以错开的时序移动
基于物理效果的 UI
- 拖放：物体越过释放点后仍会短暂继续移动
- 弹性边界：内容跟随手指移动，然后弹回
- 弹簧动画：自然地越界并逐渐稳定
常见错误
- 所有元素同时停止：会产生机械、僵硬的感觉
- 跟随动作过度：元素显得脱节、漂浮
- 缺少层级：所有部分都以相同的延迟移动
- 直线式稳定：跟随动作应逐渐缓和，而不是突然停止
错帧公式
要实现可信的重叠动作，按层级为次要元素错开 2–4 帧（以 24 fps 计）。根部在第 1 帧移动，主要延伸部分在第 2–3 帧移动，次要延伸部分在第 4–6 帧移动，三级元素在第 6–10 帧移动。
稳定曲线
跟随动作不应突然静止。使用带轻微越界的缓出曲线：
- 快速越过静止位置
- 更缓慢地返回静止位置
- 可能向相反方向产生微小的二次越界
- 最后缓缓静止
实现启发
找出所有可能独立移动的元素。根据质量、柔韧性和与根部的距离，为每个元素分配拖曳值。根据拖曳值设置相应的时序偏移。在动作结束时加入稳定振荡。如果动作显得僵硬，你可能需要加入更多重叠动作。