如何使用 Angular 的 GSAP 且不影响性能

Question

我需要将GSAP（绿袜子动画）与角度应用程序一起使用，而不是影响应用程序性能或改变生命周期。另一方面，我仍然需要它在组件初始化或滚动触发时启动。那么，我该怎么做呢？我应该使用像角度区域这样的东西还是有更有效的东西？

我希望像在简单的 HTML CSS Jquery 页面中一样使用它并访问所有组件。

Answer 1

这可能很棘手，但我找到了一个解决方案，所以我可以看到 Srolltrigger 在幕后使用 requestanimationframe，因此您需要在构造函数中注册它，如下所示：

constructor(private ngZone: NgZone) {
    this.ngZone.runOutsideAngular(() => {
      gsap.registerPlugin(ScrollTrigger);
    });
  }
  

如果您的动画生成对 requestanimationframe 的连续调用，请使用此：

constructor(private ngZone: NgZone) {}
ngAfterViewInit() {
  this.ngZone.runOutsideAngular(() => {
      your gsap animation here....
    });
    }

所有这些都适用于像 swiper、lenis 这样的库......最重要的是使用 Angular devtools profiler 进行调试