AE GSAP 动画翻译 是做什么的?
在执行 skills/AEMotion/SKILL.md 之后使用此技能,用于适合 GreenSock/GSAP 动画语法的 After Effects 工作。GSAP 本身无法在 AE 中运行。需将其概念转换为 AE 原生的关键帧、表达式、控制空对象、文本动画器、时间重映射、蒙版、摄像机和脚本。
本地安装的官方源技能(如果您的 Codex 技能存放位置不同,请调整根路径):
$CODEX_HOME/skills/gsap-core/SKILL.md$CODEX_HOME/skills/gsap-timeline/SKILL.md$CODEX_HOME/skills/gsap-scrolltrigger/SKILL.md$CODEX_HOME/skills/gsap-plugins/SKILL.md$CODEX_HOME/skills/gsap-utils/SKILL.md$CODEX_HOME/skills/gsap-performance/SKILL.md
当需要精确语义时,仅阅读相关的官方 GSAP 技能。确保 AE 脚本与 AEMotion 要求的 ES3 规范兼容。
核心翻译
| GSAP 概念 | AE 转换 |
|---|---|
gsap.to(target, vars) | 保持当前值作为起始值;在 start + duration 处设置结束关键帧。 |
gsap.from(target, vars) | 从 vars 设置明确的起始关键帧;动画到当前/最终设计值。避免因不覆盖后续已稳定的状态而产生不必要的“immediateRender”。 |
gsap.fromTo(target, from, to) | 明确设置起始和结束关键帧。最适合可靠的脚本化 AE 构建。 |
gsap.set(target, vars) | 在当前时间设置值,或创建一个保持关键帧(如果后续动画依赖于它)。 |
duration、delay | 将秒转换为合成时间;对于 30fps,1 帧 = 1/30。 |
ease | 在关键帧上应用时间缓动或使用表达式曲线。匹配感受,而非精确的浏览器数学计算。 |
stagger | 按帧偏移图层/关键帧的开始时间;对于文本,优先使用文本动画器选择器或分解文本图层。 |
repeat / yoyo | 使用循环表达式、时间重映射或重复的关键帧循环。如果表达式变得不稳定,则进行烘焙。 |
autoAlpha | 不透明度关键帧;仅在可见范围外的硬切处禁用/启用图层。 |
相对值 +=、-= | 读取当前 AE 属性并在写入新关键帧前加上增量。 |
| 基于函数的值 | 在 JSX 或表达式选择器中使用基于索引的计算。 |
gsap.defaults() | JSX 中的共享配置对象,或带有持续时间/缓动/分布滑块的控制器空对象。 |
matchMedia() / 减少动效 | 创建备选缩放/滑块预设,例如“动效量”;对于减少动效,使用更短的距离、更低的旋转或仅使用不透明度。 |
时间线语法
在创建 AE 关键帧之前,编写一个紧凑的时间线规格:
标签 intro @ 0.00
S06_Card_Demo.fromTo 位置 [x0,y0,z0] -> [x1,y1,z1] 持续时间 .55 缓动 power3.out @ intro
S06_Card02.to 缩放 70 -> 100 持续时间 .35 缓动 back.out @ <+.08
cards.stagger 方向 += [0,18,-8] 持续时间 .6 缓动 power2.inOut 每个 .04 从 center
然后将其转换为 AE 表格:
| 字段 | 含义 |
|---|---|
| 图层 | 精确的 AE 图层名称或模式。 |
| 属性 | AE 属性路径:位置、缩放、方向、不透明度、蒙版路径、时间重映射等。 |
| 起始/结束 | 使用 AE 单位的明确值。 |
| 开始时间/持续时间 | 秒或帧。 |
| 缓动 | 映射到 AE 时间缓动的 GSAP 样式名称。 |
| 偏移 | 绝对时间、标签、上一段开始 <、上一段结束 > 或交错偏移。 |
| 控制器 | 应驱动这些值的可选空对象/滑块。 |
优先使用时间线标签而非分散的延迟计算。对于复杂部分,为每个序列创建一个控制器空对象,例如 CTRL_S06_CARDS,并带有诸如“动效量”、“交错帧数”、“深度分布”和“进度”之类的滑块。
缓动映射
使用这些作为起点,并通过捕获进行视觉调整:
| GSAP 缓动 | AE 感受 |
|---|---|
none | 线性插值。用于擦除/进度驱动的动效。 |
power1.out | 温和的缓出;影响较低。 |
power2.out | 标准 UI 缓出。 |
power3.out | 快速开始,强烈稳定;适合卡片和标题。 |
power3.inOut | 对称平滑移动;适合摄像机或组移动。 |
expo.out | 非常快速到达然后缓慢稳定;谨慎使用。 |
back.out(1.7) | 在结束点之外添加一个超调关键帧,然后稳定。 |
elastic.out() | 使用表达式弹簧或 3-5 个衰减的超调关键帧。 |
bounce.out | 使用步进式冲击关键帧;不要用一个简易缓动来伪造。 |
当精确时间至关重要时,在峰值速度和着陆时刻附近采样帧。AE 的关键帧插值在数值上不会与 GSAP 完全相同;交付目标是匹配运动感知。
AE 中的 ScrollTrigger 概念
AE 没有 DOM 滚动。将 ScrollTrigger 翻译为进度驱动:
| ScrollTrigger 概念 | AE 模式 |
|---|---|
trigger/start/end | 时间线标签范围或工作区范围。 |
scrub: true | 滑块/空对象“进度 0..100”、时间重映射或映射时间到进度的表达式。使用线性缓动。 |
数值 scrub 延迟 | 进度值上的低通/弹簧表达式,或延迟的重复关键帧。 |
pin | 在动画子对象时保持摄像机或父级空对象静止。如果子对象需要独立运动,请勿动画固定的父级。 |
snap | 保持/吸附关键帧或 Math.round(progress / step) * step 表达式。 |
markers | 临时指南图层、标签或文本叠加;在最终交付前移除。 |
containerAnimation | 由一个主控空对象或摄像机路径控制的水平/3D 轮播;嵌套元素引用相同的进度。 |
对于 AE 的“类滚动”卷轴,使用 CTRL_PROGRESS 驱动主时间线,并将进度映射到卡片、摄像机 Z 轴、不透明度和模糊。保持驱动进度的动效为线性;仅在改善外观时才在嵌套的视觉响应上放置缓动。
插件模式等效
| GSAP 插件 | AE 等效 |
|---|---|
| Flip | 记录第一个和最后一个图层变换;通过反向偏移或父级空对象进行动画。用于布局重新排序和卡片交换。 |
| Draggable / Observer | AE 渲染不可交互;使用控制器滑块或记录的关键帧表示手势。 |
| Inertia | 使用基于速度的表达式、弹簧表达式或衰减的超调关键帧。 |
| SplitText | 使用 AE 文本动画器、表达式选择器或将文本分解为每词/每字符图层。 |
| ScrambleText | 源文本保持关键帧、字符映射表达式或文本动画器不透明度/字符偏移。 |
| DrawSVG | 形状图层修剪路径。 |
| MorphSVG | 蒙版/路径关键帧或形状路径插值;确保顶点数量和顺序匹配。 |
| MotionPath | AE 蒙版路径 + 图层路径父子关系,或沿贝塞尔曲线采样的位置关键帧。 |
| CustomEase / CustomWiggle / CustomBounce | AE 图表编辑器曲线、时间缓动值或自定义表达式函数。 |
| GSDevTools | 临时控制器空对象、指南图层、帧捕获和审计 JSX 报告。 |
实用函数等效
在 JSX/表达式中将 GSAP 实用程序用作数学词汇:
function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
function mapRange(in0, in1, out0, out1, v) {
var p = (v - in0) / (in1 - in0);
return out0 + (out1 - out0) * p;
}
function lerp(a, b, p) { return a + (b - a) * p; }
function snap(step, v) { return Math.round(v / step) * step; }
常见的 AE 用途:
normalize/mapRange:将时间、音频振幅或滑块进度映射到位置/缩放/不透明度。random:在 JSX 中生成确定性的每图层偏移;除非抖动是有意的,否则避免表达式中的非确定性随机性。snap:步进式打字机、跳帧动效、网格/卡片吸附。distribute:卡片扇形展开、文本交错、中心向外揭示。
AE 性能规则
- 优先使用变换、不透明度、时间重映射和摄像机/空对象移动,而非繁重的逐帧效果。
- 避免大量图层同时带有昂贵效果进行动画;在外观确定后进行预合成或烘焙。
- 使用表达式进行控制和迭代;当表达式变慢或变脆弱时,烘焙为关键帧。
- 运动模糊可改善感知质量,但可能隐藏布局错误;诊断问题时在开启和关闭两种情况下进行验证。
- 对于重复的卡片,使用父级空对象和共享控制器,而不是独立地为每个属性设置关键帧。
- 在视觉允许的情况下保持蒙版和网格变形简单。更改蒙版后捕获精确帧。
AE 构建工作流
- 如果用户提到 GSAP 概念,请阅读
AEMotion和相关的官方 GSAP 技能。 - 在编辑之前检查 AE 合成/图层。不要推断图层名称。
- 起草一个带有标签、持续时间、缓动、交错和目标图层的 GSAP 风格时间线规格。
- 转换为 AE 实施表格。
- 编写 ES3 安全的 JSX 助手,用于关键帧/缓动/控制器。
- 每个脚本应用一个逻辑序列。
- 在开始、峰值速度、着陆和最终保持点周围捕获精确帧。
- 根据视觉证据调整数值,然后保存。
禁止事项
- 不要将 GSAP 浏览器代码粘贴到 AE 中。
- 不要在 ExtendScript 中使用现代 JavaScript 语法。
- 不要在多个无关的装备中同时动画同一个 AE 属性而不审计重叠。
- 不要依赖基于
delay的分散时间控制来处理复杂部分;使用标签/控制器时间。 - 除非用户要求,否则不要在最终渲染中保留临时指南/标记图层可见。