用途:该技能是 GSAP 动画参考,主要服务于 HyperFrames 的 HTML 转视频合成,帮助在合成中编写可控的动画时间线。
主要能力:涵盖核心补间方法 gsap.to()、gsap.from()、gsap.fromTo()、gsap.set();常用参数如 duration、delay、ease、stagger、overwrite、repeat、yoyo、回调与 immediateRender;变换与 CSS 别名(x、y、scale、rotation、autoAlpha、CSS 变量、svgOrigin、方向旋转、clearProps、相对值);函数式取值;内置缓动(power1–power4、back、bounce、circ、elastic、expo、sine 及其 in/out/inOut);gsap.defaults();补间控制(pause、play、reverse、kill、progress、time);gsap.matchMedia() 响应式与无障碍;时间线创建、位置参数(绝对值、"+=0.5"、"<"、">"、"<0.2")、标签、嵌套、播放控制;性能建议(优先 transform 与 opacity、will-change、gsap.quickTo()、用 stagger 替代多个补间、清理)。
HyperFrames 约定:通过 gsap 运行时适配器控制 GSAP。需同步创建暂停时间线,并以与合成根 data-composition-id 完全一致的键注册到 window.__timelines,由 HyperFrames 进行 seek。渲染关键动画不要调用 tl.play();不要在异步代码、定时器或事件处理器中构建时间线;循环必须有限,HyperFrames 渲染有限时长视频,repeat 不可用 -1,应按可见时长计算重复次数。
使用方式:引入 GSAP 脚本后创建 gsap.timeline({ paused: true }),用 tl.from()/tl.to() 添加补间并指定位置参数,最后赋值 window.__timelines["main"] = tl。
适用场景:HyperFrames 合成中的入场、强调、序列编排等动画。
限制:资料未提供安装命令、收费与价格信息;效果与平台支持范围暂未提供。