v3.11.0 版本新增
gsap.context()
快速入门
最简用法
let ctx = gsap.context(() => {
gsap.to(...);
gsap.from(...);
gsap.timeline().to(...).to(...);
...
});
// then later...
ctx.revert(); // BOOM! Every GSAP animation created in that function gets reverted!
如果你正在使用 React，我们提供了一个 Hook 来抽象掉gsap.context()并自动为你处理动画的清理工作！
A gsap.context()提供两个关键优势：
- 收集所有 GSAP 动画和 ScrollTrigger在提供的函数内部创建的内容，以便你可以轻松地
revert()或者kill()所有一次性全部销毁它们。不需要跟踪大量的变量、数组等。这在 React 模块中特别有用，或任何你需要通过将元素恢复到原始状态来进行“清理”的地方。 - [可选]将所有选择器文本限定在一个特定的 Element 或 Ref 内部。这可以大幅简化你的代码，并避免需要创建大量Ref在 React/Angular 中。提供函数内的任何与 GSAP 相关的选择器文本仅适用于该 Element/Ref 的后代元素。
假设你有一段大量的GSAP 代码它创建了许多不同的动画，你需要能够revert()销毁所有这些动画...
let ctx = gsap.context(() => {
gsap.to(...);
gsap.from(...);
gsap.timeline().to(...).to(...);
...
});
// then later...
ctx.revert(); // BOOM! Every GSAP animation created in that function gets reverted!
限制选择器文本的作用域
你可以选择性地传入一个 Element 或者React Ref或者Angular ElementRef然后所有提供函数中的选择器文本将会被限制在特定的 Element/Ref 内部，这可以大大简化你的代码。再也不用为每个你想动画的元素创建 Ref 了！
let ctx = gsap.context(() => {
gsap.to(".box", {...}) // <- normal selector text, automatically scoped to myRefOrElement
gsap.from(".circle", {...});
}, myRefOrElement); // <- scope!!!
这个scope可以是类似 ".myClass" 的选择器字符串，或者是 Element、React Ref 或 Angular ElementRef。
添加到 Context 中
或许你需要设置一些事件处理程序（如鼠标点击），它们会在之后创建新的应该也被收集到 Context 中的动画，但显然那些事件会在 Context 的函数执行之后才发生。没问题！你可以添加 自定义的方法到一个 Context 对象中，这样当它们运行时会自动将产生的任何 GSAP 动画/ScrollTrigger 加入到 Context 中：
let ctx = gsap.context((self) => {
// use any arbitrary string as a name; it'll be added to the Context object, so in this case you can call ctx.onClick() later...
self.add("onClick", (e) => {
gsap.to(...); // <-- gets added to the Context!
});
}, myRefOrElement);
// now the Context has an onClick() method we can tap into and any animations in that function will get added to the Context
myButton.addEventListener("click", (e) => ctx.onClick(e));
或者你可以直接添加内容到 Context立即（函数作为第一个参数）：
// create context
let ctx = gsap.context(() => {...});
// then later, add to it:
ctx.add(() => {
gsap.to(...); // now all these get added to the Context.
gsap.from(...);
});
清理函数
你可以选择返回一个“清理函数”，如果/当 context 被还原时应调用它。其中可以包含你自己的自定义清理代码：
let ctx = gsap.context(() => {
...
return () => {
// my custom cleanup code. Called when ctx.revert() is triggered.
};
});
你也可以在任意.add()函数中返回清理函数；这些函数都会在 Context 的revert()被调用时执行。
忽略某些动画/ScrollTrigger
在极少数情况下，你可能希望在函数内创建某些 GSAP 动画和/或 ScrollTrigger，这些动画应被排除在 Context 之外（当 Context 被还原/销毁时不会被还原/销毁），在这种情况下，你可以使用ignore()像这样：
let ctx = gsap.context((self) => {
gsap.to(...); // <- will get reverted when ctx.revert() is called
self.ignore(() => {
gsap.to(...); // <- will NOT get reverted when ctx.revert() is called. Ignored, not recorded in the Context.
});
});
提示与注意事项
- 当
revert()当 revert()permanent它们会被还原并销毁，并且 Context 会自动清空自身，使对象有资格被垃圾回收机制回收。但是此后仍可以继续添加更多动画，并再次对同一个 Context 调用 revert()再次来还原/销毁这些新添加的动画。 - Context 并不是用来控制动画的方式。那是时间轴（Timeline）Timeline 的职责。Context 仅仅是用来还原/销毁动画以及[可选]地为选择器文本定义作用域。
- Context 对象本身会被传递给函数，因此你可以很方便地引用它，比如
gsap.context((self) => { ... self.add(...); }); gsap.context()此功能是在版本3.11.0
