Communitygithub.com

AE GSAP 动画翻译

将 GreenSock/GSAP 动画思维转换为 Adobe After Effects 的关键帧、控制空对象、文本动画器、表达式和 ExtendScript。当用户提出类似 GSAP 的专业动画需求时使用。

AE GSAP 动画翻译 是什么?

该技能专门用于在 Adobe After Effects 中实现 GreenSock (GSAP) 动画逻辑的翻译和落地。由于 GSAP 无法直接在 AE 中运行,此技能通过一系列清晰的翻译规则,将 GSAP 的核心概念(如 to/from/fromTo、时间线、缓动、交错、ScrollTrigger 和各种插件)映射到 AE 原生功能上,包括关键帧、表达式、控制空对象、文本动画器、蒙版和摄像机。 它支持所有主流的 AI 代理平台(如 Claude Code、Cursor、Codex),并假设本地已安装 GSAP 相关技能文档以供参考。该技能强调将 GSAP 的动画思维编写为紧凑的时间线规格,然后翻译成 AE 实施表格,最后生成 ES3 兼容的 ExtendScript 代码。对于 ScrollTrigger,它创造性地使用进度滑块和时间重映射来模拟滚动驱动效果。该技能还提供了详细的缓动映射表,帮助用户找到 GSAP 缓动在 AE 中的最接近视觉感受,并包含专门的性能优化规则,以确保 AE 项目运行流畅。

兼容平台✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/itswenxin/motion-agent/tree/HEAD/agent-skills/ae-gsap-motion

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

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 / ObserverAE 渲染不可交互;使用控制器滑块或记录的关键帧表示手势。
Inertia使用基于速度的表达式、弹簧表达式或衰减的超调关键帧。
SplitText使用 AE 文本动画器、表达式选择器或将文本分解为每词/每字符图层。
ScrambleText源文本保持关键帧、字符映射表达式或文本动画器不透明度/字符偏移。
DrawSVG形状图层修剪路径。
MorphSVG蒙版/路径关键帧或形状路径插值;确保顶点数量和顺序匹配。
MotionPathAE 蒙版路径 + 图层路径父子关系,或沿贝塞尔曲线采样的位置关键帧。
CustomEase / CustomWiggle / CustomBounceAE 图表编辑器曲线、时间缓动值或自定义表达式函数。
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 构建工作流

  1. 如果用户提到 GSAP 概念,请阅读 AEMotion 和相关的官方 GSAP 技能。
  2. 在编辑之前检查 AE 合成/图层。不要推断图层名称。
  3. 起草一个带有标签、持续时间、缓动、交错和目标图层的 GSAP 风格时间线规格。
  4. 转换为 AE 实施表格。
  5. 编写 ES3 安全的 JSX 助手,用于关键帧/缓动/控制器。
  6. 每个脚本应用一个逻辑序列。
  7. 在开始、峰值速度、着陆和最终保持点周围捕获精确帧。
  8. 根据视觉证据调整数值,然后保存。

禁止事项

  • 不要将 GSAP 浏览器代码粘贴到 AE 中。
  • 不要在 ExtendScript 中使用现代 JavaScript 语法。
  • 不要在多个无关的装备中同时动画同一个 AE 属性而不审计重叠。
  • 不要依赖基于 delay 的分散时间控制来处理复杂部分;使用标签/控制器时间。
  • 除非用户要求,否则不要在最终渲染中保留临时指南/标记图层可见。

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

相关技能