本文主要介绍了angular使用TweenMax的相关问题及解决方法。通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。下面让我们跟随边肖一起学习。
最近没事干，就是瞎摆弄CSS。
我发现了一个不错的动画库，TweenMax。
用起来有点麻烦，但是效果真的还可以。
首先，要在angular中使用TweenMax，你得通过npm安装。
1.npm安装-保存-开发gsap
2.npm安装-保存-开发@类型/gsap
然后介绍。
从“gsap”导入{ tween max }；
您可以在页面中使用它。
遇到的第一个问题是你想通过按钮触发让动画连续播放。
但动画再次播放后，不会触发任何按钮。
找到原因后，需要在反复触发时改变它的位置。比如一开始X是500，动画播出后X的位置是500。反复触发后，仓位还是500，就不行了。所以如果要反复触发，就要修改它的位置。
this.test=new TweenMax('。方框'，3，{
徐：这个。方向？0:500,
放松：弹跳.放松
})
第二个问题是，在页面上，我想在动画期间和之后改变蓝色按钮的状态和文本，结果发现使用绑定到按钮的属性无法直接完成。
button[disabled]=' is moving ' style=' margin-top:10px；'nz-button nzType='primary '(点击)='repeat()'
{ {可描述}}
/按钮
this.test=new TweenMax('。方框'，3，{
徐：这个。方向？0:500,
ease:Bounce.easeOut
onStart:function(){
This.describle=' in motion '
this.isMoveing=true
},
onComplete:function(){
This.describle=' move '
this.isMoveing=false
}
})
经过一番折腾，发现其实就是这个指出的问题。
从上图可以看出，在TweenMax方法中，这指向了TweenMax方法本身，我们需要改变的对象在组件中，如下图所示。
问题一旦定位，解决起来就比较容易了。只需在函数范围之外定义一个元素来指向正确的this。
让这个=这个
this.test=new TweenMax('。方框'，3，{
徐：这个。方向？0:500,
ease:Bounce.easeOut
onStart:function(){
_ this.describe='动态'
_this.isMoveing=true
},
onComplete:function(){
_ this.describe=' move '
_this.isMoveing=false
}
})
这很正常。
总结
关于angular使用TweenMax动画库的这篇文章到此为止。有关angular使用TweenMax的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。