GSAP - GSAP方法：gsap.context()

一、gsap.context()提供了两个关键好处：

• 收集在提供的函数中创建的所有GSAP动画和ScrollTriggers，以便您可以轻松地一次性将它们全部revert() or kill()。不需要跟踪一堆变量、数组等。这在React模块或任何你需要通过将元素恢复到原始状态来“清理”的地方特别有用。
• [可选]将所有选择器文本设置为特定的元素或Ref.这可以帮助简化你的代码，避免在React/Angular中创建大量的Ref。在提供的函数中，任何与gsap相关的选择器文本将只应用于Element/Ref的后代。

假设你有一大块GSAP代码，它正在创建一堆不同的动画，你需要能够将它们全部还原()…

let ctx = gsap.context(() => {
 gsap.to(...);
 gsap.from(...);
 gsap.timeline().to(...).to(...);
 ...
});
// 然后
ctx.revert(); // BOOM! 在该函数中创建的每个GSAP动画都将恢复!

二、选择器文本作用域：

你可以选择传入一个Element或React Ref或Angular ElementRef，然后所提供函数中的所有选择器文本都将被限定在特定的Element/Ref上，这可以极大地简化你的代码。不再为你想要动画的每个元素创建Ref !

let ctx = gsap.context(() => {
  gsap.to(".box", {...}) // <- 正常的选择器文本，自动作用域到myRefOrElement
  gsap.from(".circle", {...}); 
}, myRefOrElement); // <- scope!!!

作用域可以是选择器文本本身，如".myClass"。或者一个元素，React Ref或Angular的ElementRef。

三、添加到上下文：

也许你需要设置事件处理程序(比如鼠标点击)来创建新的动画，这些动画也应该被收集到上下文中，但显然这些事件将在上下文的函数已经执行之后发生。没问题!你可以将自己的方法添加到Context对象中，这样当它们运行时，它们会自动将任何生成的GSAP动画/ScrollTriggers添加到Context中:

let ctx = gsap.context((self) => {
  //使用任意字符串作为名称;它会被添加到Context对象中，所以在这种情况下你可以调用ctx.onClick()
  self.add("onClick", (e) => {
    gsap.to(...); // <-- 被添加到上下文!
  });
}, myRefOrElement);

// 现在Context有了一个onClick()方法，我们可以使用该方法，该函数中的任何动画都会被添加到Context中
myButton.addEventListener("click", (e) => ctx.onClick(e));

或者你可以像这样直接向Context中添加内容(作为第一个参数):

// 先创建好上下文
let ctx = gsap.context(() => {...});

// 之后再添加到上下文
ctx.add(() => {
  gsap.to(...); // 现在所有这些都被添加到Context中。
  gsap.from(...); 
});

四、清理函数：

您可以选择返回一个“清理函数”，如果/当上下文恢复时应该调用该函数。这可以包含你自己的自定义清理代码:

let ctx = gsap.context(() => {
  ...
  return () => {
    //我的自定义清理代码。在触发ctx.revert()时调用。
  };
});

你也可以在任何.add()函数中返回一个清理函数;当Context的revert()被调用时，它们都将被调用。

五、忽略特定的animations/ScrollTriggers

在非常不常见的情况下，你可能想要在函数内部创建某些GSAP动画和/或ScrollTriggers，这些动画应该从上下文中排除(当上下文被恢复/杀死时不被恢复/杀死)，在这种情况下，你可以像这样使用ignore():

let ctx = gsap.context((self) => {
  gsap.to(...); // <- 将得到恢复当ctx.revert()被调用的时候
  self.ignore(() => {
    gsap.to(...); // <- 当ctx.revert()被调用时将不会被恢复。忽略，没有记录在上下文中。
  });
});

六、小秘诀：

• 当在Context上调用revert()时，它对于它包含的动画/ScrollTriggers是永久的。它们将被还原并杀死，Context将自己清除，使它们符合垃圾收集的条件。但是在此之后仍然可以添加更多的动画，并且可以在相同的Context上再次调用revert()来revert/kill这些动画。
• Context并不是用来控制动画的。这就是时间线的作用。Context只是用于还原/删除和[可选地]定义选择器文本的作用域。
  Context对象本身被传递给函数，所以你可以很容易地引用它，像：gsap.context((self) => { ... self.add(...); });
  gsap.context()在3.11.0版本中添加

七、React Demo

gsap.context()可以解决React 18“在严格模式下双重调用useEffect()”的问题，该问题通常会从()逻辑中中断-只需在useEffect()清理函数中调用revert():
React Demo