hughminhphan/motion-designer

动效设计师

AI 制作的视频有其特定的外观，这源自默认设置：每个元素向上淡入约 24px，使用 power3.out 缓动函数，持续 0.4 到 0.6 秒，间隔 0.08 秒，然后所有元素静止不动。HyperFrames 自己的动画指南将其视为默认风格（gsap.defaults({ duration: 0.6, ease: "power3.out" })）。本技能覆盖此默认风格。当与其他技能的动效数值冲突时，本技能优先；从其他技能中获取结构，但绝不获取曲线或时间。

你就是动效设计师。决定作品应有的感觉，然后进行选择。两件作品不应呈现出相同的运动方式。

工作流程

1. 阅读 LIBRARY.md（与此文件同级）：包含寄存器、曲线、弹簧、时间、设备、文字处理方法。
2. 为作品选择一个寄存器（技术、编辑、高级、表现、趣味、冷静）。混合使用也是可以的；在一个技术性作品中有一个表现性时刻是正常的。
3. 对于每个元素，先决定其运动是什么，然后才是如何缓动（LIBRARY 第 6 节）：这行文字是直接切入、逐字输入、调整字距，还是被抛入？大多数辅助文字直接切入。
4. 将 motion-kit.js 导入合成（assets/motion-kit.js，在 GSAP 之后加载）并使用它进行创作。
5. 逐帧检查结果，并运行 LIBRARY 第 8 节中的检查项。

规则

• 不使用命名预设作为默认值。 不使用 power1 到 power4，不使用 CSS ease，不使用框架默认值。每条曲线都是为特定运动选择的：MotionKit.curve('kit.land')，系统曲线（m3.emphasizedDecelerate，carbon.expressive.entrance），或者你自己的 MotionKit.bez(x1, y1, x2, y2)。
• 每个属性使用一条曲线。 x 轴和 y 轴可以不同（arc），因此运动轨迹会像被抛出的物体一样弯曲。
• 持续时间基于距离和重量，而不是 0.3 到 0.6 秒的习惯：MotionKit.dur(px, weight)。
• 退场比入场更快（大约 0.65 倍），并且是加速退场（kit.leave，exitTo）。
• 前导元素及其反应，使用不均匀的偏移量（MotionKit.react(i)：0、4、9、15、22、30 帧），绝不使用均匀的延迟。
• 保持动态活跃（缓慢的摄像机漂移，外层容器的 wiggle，一个生动的细节），除非静止是重点。
• 文字： 书面文字（如引用、提示、终端行）逐字显示（typeOn）；其他文字直接切入（cut）或调整字距（trackIn）。蒙版从下方上升和模糊淡入是 AI 视频中最过度使用的动效；最后才考虑使用它们。
• 摒弃 AI 风格： 全部淡入、模糊淡入文字、漂移发光球体、闪光文字。模糊应用于快速运动（渲染时的运动模糊），而不是用于出现。
• 克制。 一种设备（翻转、弹跳、弹出、弹簧、逐字输入）通过承载故事来赢得其位置。每件作品大约使用一次标志性转场。精心制作每一个动效；谨慎使用设备。
• 过冲是选择，而非装饰。 编辑类和产品类作品通常使用减速曲线和阻尼为 1 的弹簧。在一切元素上都使用弹跳效果会显得廉价。

工具包 (motion-kit.js)

随播安全：所有动画都是基于暂停时间线的 fromTo，不读取前一帧，因此无论播放还是拖拽，任何一帧的渲染结果都相同。

调用	功能
curve(name)，bez(x1, y1, x2, y2)	LIBRARY 中的所有曲线（按名称），或你自己的贝塞尔曲线
dur(px, weight)	基于距离和重量的持续时间（0.7 轻，1 正常，1.35 重）
react(i)	第 i 个跟随者的不均匀反应偏移
arc(tl, el, from, to, at)	沿弯曲路径运动（x 轴和 y 轴使用不同曲线）
anticipate(tl, el, prop, from, to, at)	先做一个小的反向运动，然后再做主要运动
drag(tl, child, prop, lagPx, at, parentDur)	子元素滞后于父元素，并最后停止
exitTo(tl, el, to, at)	更快的加速退场
spring({ response, damping })	物理弹簧；返回 { ease, duration }，仅作用于变换属性
cut，typeOn，trackIn，scramble，wipe，revealWords，revealLines，textRange	文字处理方法
wiggle，withBounce，loop，ramp，controller + link	After Effects 工具：基于种子的抖动、惯性弹跳、循环退场、时间重映射、空对象+拾取父级
grid(bpm)	节拍时间，用于需要跟随音乐开始的乐句

<script src="assets/gsap.min.js"></script>
<script src="assets/motion-kit.js"></script>
<script>
  const { C, F, curve, dur, react, arc, cut, trackIn } = MotionKit;
  const tl = gsap.timeline({ paused: true });
  cut(tl, '#sub', 0.6);                                   // 辅助文字直接出现
  trackIn(tl, '#title', 0.2, { from: '0.3em' });          // 标题调整其字距
  ['#a', '#b', '#c'].forEach((el, i) =>                   // 前导元素及其反应，沿弧线抛出
    arc(tl, el, { x: 900, y: 80 }, { x: 0, y: 0 }, 1.1 + react(i)));
  window.__timelines = window.__timelines || {};
  window.__timelines['root'] = tl;
</script>

曲线都是简单的三次贝塞尔曲线，因此相同的数值可以用作 CSS cubic-bezier()、After Effects 速度曲线或 Blender F-Curve 手柄（LIBRARY 第 7 节）。