在 Angular2 项目中使用 TweenMax

Posted 2023-03-13

【中文标题】在 Angular2 项目中使用 TweenMax

【英文标题】：Using TweenMax in Angular2 project

【发布时间】：2016-09-05 06:37:47

【问题描述】：

如何在我的 Angular2 项目中设置 TweenMax。我希望能够导入类似于以下内容的 TweenMax，而不是在我的 html 中添加脚本：

import  TweenMax  from 'gsap';

注意：我正在使用 angular-cli。

【参考方案1】：

将 this 外部包添加到 Angular 2 几乎与任何其他包相同。 jquery，firebase，你的名字..

但是你应该知道，此时没有 gsap 模块的类型文件。所以你不能随心所欲地挑选进口。这也意味着 typescript 中没有智能感知 :( 但你仍然可以像这样使用它：

第 1 步： npm 安装它

npm install gsap --save

第 2 步： 通过在typings.d.ts 文件中添加以下行来防止打字稿抱怨找不到分类：

declare var module:  id: string ;

declare let TimelineMax: any; // declare it as any.
 // so no error complains, Typescript compiler is happy now:)

为该模块创建类型文件后，第 4 步变为：

typings install gsap --save. After that make sure you have included: /// <reference path="../typings/path to your gsap typings" />

第 3 步：在您的组件中使用它 - 例如在app.component.ts：

import 'gsap' // this is required for TimelineMax() to work
// decorator stuff here.
export class AppComponent implements OnInit

  ngOnInit()

    let targetObject = document.getElementByTagName('h1');

    let tl = TimelineMax(); // this is free of errors now

    tl.from(targetObject, 1,  x:400 );
    tl.play();
  

第 4 步：在此设置中，无需向 main.ts（引导文件）添加任何内容，尽情享受吧！

【讨论】：

嘿，由于 angular-cli 文件已更改，您可以更新答案吗？例如， step2 和 step3 不再存在。 PS - 我一直在为我的错误寻找解决方案并遇到了这个问题。 github.com/greensock/GreenSock-JS/issues/228

@Saiyaff Farouk 谢谢你告诉我 :) 你能确认一下现在没问题吗？我不再使用角度了。我现在几乎所有事情都使用elm。我对角度有点生疏了:)

你能帮我用 Angular 1 做什么吗？

【参考方案2】：

有一个更简单的方法 只是

npm install --save-dev gsap
npm install --save-dev @types/gsap

在你的 ts 文件中，导入 gsap

import TweenLite from "gsap";

在你的方法或 ngOnInit 上你可以写

let photo = document.getElementById("photo");
TweenLite.to(photo, 2, width:"200px", height:"550px");

如果你有一个带有照片 ID 的 div

【讨论】：

当我这样做时，TweenLite 是未定义的，知道吗？

为我工作。谢谢。

@types/gsap 工作完美，所有方法都得到认可，谢谢！ （角度 5.2.9）

【参考方案3】：

除了为gsap添加类型定义，试试：

在 Angular Zone 外运行 用this 分配一个实例

像这样：

import  NgZone  from '@angular/core';
import TweenMax from "gsap";

myTween: any;

constructor( private ngZone: NgZone )

ngOnInit() 

    this.ngZone.runOutsideAngular(() => 
      
        this.tween = TweenMax;
        this.tween.to( some params ); // do your stuff
      
    );

注意：在 Angular 5.2.4 / Cli：1.6.8 / typescript：2.53 上测试