gsap.effects
类型：对象
一旦某个效果已经被注册，你可以直接在gsap.effects对象中的单个属性进行补间动画：
//assumes that an effect named "explode" has already been registered
gsap.effects.explode(".box", {
direction: "up", //can reference any properties that the author decides - in this case "direction"
duration: 3,
});
或者，如果你在注册效果时设置了extendTimeline: true，你甚至可以直接在时间轴上调用它，以便将该效果的结果插入到该时间轴中（见下文）。效果使得任何人都可以轻松地将自定义动画代码封装在一个函数中（该函数接受targets和一个config对象），然后将其与特定的name关联，这样就可以随时使用新的目标和配置调用它。例如，我们可能希望可以实现元素淡出效果（虽然这个例子非常简单，但此处的目的是展示它是如何工作的）：
// register the effect with GSAP:
gsap.registerEffect({
name: "fade",
effect: (targets, config) => {
return gsap.to(targets, { duration: config.duration, opacity: 0 });
},
defaults: { duration: 2 }, //defaults get applied to any "config" object passed to the effect
extendTimeline: true, //now you can call the effect directly on any GSAP timeline to have the result immediately inserted in the position you define (default is sequenced at the end)
});
// now we can use it like this:
gsap.effects.fade(".box");
// or directly on timelines:
let tl = gsap.timeline();
tl.fade(".box", { duration: 3 })
.fade(".box2", { duration: 1 }, "+=2")
.to(".box3", { x: 100 });
加载中...
GSAP 在这里提供了 4 个关键功能：
- 它会将 "targets" 解析为数组。因此如果传递了选择器文本，则会被转换为传给效果函数的元素数组。
- 每次都会应用 config 对象的默认值。无需添加大量 if 语句或自行应用默认值。
- 它提供了一种集中注册/访问这些“效果”的方式。
- 如果你设置了
extendTimeline: true，效果的名称将被作为方法添加到 GSAP 的 Timeline 原型中，这意味着你可像下面这样直接将该效果的一个实例插入任何时间轴中：
//with extendTimeline: true
var tl = gsap.timeline();
tl.yourEffect(".class", { configProp: "value" }, "+=position");
//without extendTimeline: true, you'd have to do this to add an instance to the timeline:
tl.add(
gsap.effects.yourEffect(".class", { configProp: "value" }),
"+=position"
);
因此，如果你在序列中频繁使用某个效果，它可以帮你节省大量的输入工作。
警告
重要提示：任何带有extendTimeline:true 的效果都必须返回一个可以插入时间轴的 GSAP 兼容动画（Tween 或 Timeline 实例）
注册效果
有关如何注册效果的快速概览，请查看 Snorkl.tv 的创意编程俱乐部视频 —— 这是学习 GSAP 基础知识的最佳方式之一。
效果也可以在不同项目和人之间轻松共享。要查看已创建的效果，请查看CodePen 集合.
下面是一个生成多个预设淡出效果的示例，以便之后重复使用：
