2021-3-1711:27最近没事做，通过鼓捣CSS找到了一个比较好的动画库，但是TweenMax用起来有点麻烦，但是效果真的很好。首先，要在angular中使用TweenMax，首先要通过npm安装1.npminstall--save-devgsap2。npminstall--save-dev@types/gsap然后引入import{TweenMax}from"gsap";用在。我遇到的第一个问题是我想通过触发按钮让动画不停的播放，但是动画播放一次之后，不管我怎么点按钮，后来都找到原因了。重复触发时需要改变其位置。OK，比如一开始的X是500，播放完动画后X的位置是500。如果反复触发，仓位还是500，就不行了。所以如果要重复触发，就得修改它的位置this.test=newTweenMax('.box',3,{x:this.direction?0:500,ease:Bounce.easeOut})第二个问题是在页面上，你想在动画期间和之后改变蓝色按钮的状态和文本，事实证明这个操作不能直接用按钮绑定的属性来完成{{describle}}this.test=newTweenMax('.box',3,{x:this.direction?0:500,ease:Bounce.easeOut,onStart:function(){this.describle='moving'this.isMoveing=true},onComplete:function(){this.describle='moving'this.isMoveing=false}})经过一番折腾，发现其实就是this所指向的问题，从上图可以看出，在TweenMax方法中，this指向的是Tween方法本身，而我们需要改变的对象在component，也就是问题定位如下图，那么解决方法比较简单，定义一个函数范围外的元素指向正确的this就可以了let_this=thisthis.test=newTweenMax('.box',3,{x:this.direction?0:500,ease:Bounce.easeOut,onStart:function(){_this.describle='moving'_this.isMoveing=true},onComplete:function(){_this.describle='moving'_this.isMoveing=false}})这是正常的
