Question

我正在使用GSAP的TweenLite构建动画背景。我目前正在Angular组件上实现它。但它始终会引发错误“ TweenLite中包含找不到名称'circ'的错误。如何解决此问题？

我已经尝试过GSAP的其他平台，但是它总是抛出相同的错误。

/app.component.ts

import { Component } from '@angular/core';
import TweenLite from "gsap/TweenLite";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent { 

  ngOnInit() { 

    initAnimation();

    // animation
    function initAnimation() {
        animate();
        for(let i in points) {
            shiftPoint(points[i]);
        }
    }

    function shiftPoint(p) {
        TweenLite.to(p, 1+1*Math.random(), {x:p.originX-50+Math.random()*100,
            y: p.originY-50+Math.random()*100, ease:Circ.easeInOut,
            onComplete: function() {
                shiftPoint(p);
            }});
    }

  }

}

请参见此链接，以获取预期的输出结果。

https://hencework.com/theme/pogody/constellation/index.html（右侧的点和线动画）

Answer 1

我以某种方式弄清楚了。

我在网上进行了研究，发现我错误地导入了gsap。

这是链接：https://greensock.com/forums/topic/13445-using-gsap-with-angular2/

您需要以某种方式将模块指向* .ts组件中的导入区域（不需要使用import）

仍然指出无法找到Circ，但是输出会抛出预期的结果。

很奇怪...

TweenLite的“轻松”功能不适用于Angular 7

1 个答案: