GSAP - GSAP属性：gsap.effects

一、gsap.effects

1.类型 : Object

一旦一个效果被注册，你可以直接使用gsap.effects来访问这个效果，类似下面：

//假设一个名为“explode”的效果已经注册
gsap.effects.explode(".box", {
  direction: "up", //可以引用作者决定的任何属性——在本例中是“方向”。
  duration: 3
});

或者，假如你注册效果的时候设置extendTimeline:true，你甚至可以直接在时间线上调用它，以便将效果的结果插入到时间线上(见下文)。效果使任何人都可以轻松地在函数中编写自定义动画代码（方法中接收targets对象和config对象）然后把它和一个特定的名字关联起来，这样就可以在任何时候通过这个名字调用这个效果。例如，下面的例子展示了如何自定义一个fade效果：

// 注册效果：
gsap.registerEffect({
    name: "fade",
    effect: (targets, config) => {
        return gsap.to(targets, {duration: config.duration, opacity: 0});
    },
    defaults: {duration: 2}, //默认值应用于传递给effect方法的“config”对象的参数
    extendTimeline: true, //现在你可以直接在任何GSAP时间轴上调用效果，让结果立即插入到你定义的位置(默认是在最后的位置)
});

// 可以这样使用：
gsap.effects.fade(".box");

// 或者在时间轴上使用：
let tl = gsap.timeline();
tl.fade(".box", {duration: 3})
  .fade(".box2", {duration: 1}, "+=2")
  .to(".box3", {x:100});

GSAP 3 Effects Simple Demo

示意图，请点击上面链接查看效果

2.GSAP提供了4个关键特性：
（1）它将“targets”解析为一个数组。如果selector text被传入，它就变成了传递给effect函数的元素数组。
（2）它每次都将默认值应用到配置对象。不需要自己添加一堆if语句或应用默认值。
（3）如果你设置extendTimeline: true，效果的名称将作为一个方法添加到GSAP的时间轴原型中，这意味着你可以将该效果的实例直接插入到任何时间轴中，比如:

//如果设置 extendTimeline: true
var tl = gsap.timeline();
tl.yourEffect(".class", {configProp:"value"}, "+=position");

//如果没有设置 extendTimeline: true, 你必须调用添加方法把效果添加到时间线上:
tl.add( gsap.effects.yourEffect(".class", {configProp:"value"}), "+=position");

因此，如果你在序列中大量使用效果，它可以节省大量输入。重要:任何使用extendTimeline:true的效果必须返回一个gsap兼容的动画，可以插入到时间轴(补间或时间轴实例)

（4）它提供了一种集中的方式来注册/访问这些“效果”。

你可以把它想象成jQuery插件，只不过是用于基于gsap的动画效果。
效果也很容易在不同的项目和人员之间共享。要查看已经创建的效果，请查看CodePen集合。

下面是一个生成多个预先制作的渐隐效果的示例，以便以后可以重用:

渐隐效果

示意图，请点击上面链接查看效果