• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

angular使用TweenMax动画库的问题和解决方法

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

最近闲来无事,捣鼓捣鼓CSS

发现了一个比较好动画库,就是TweenMax

用起来略微有点麻烦,但是效果确实可以。

首先在angular中使用TweenMax就得先通过npm 安装

1.  npm install --save-dev gsap
2.  npm install --save-dev @types/gsap

然后再引入

import {TweenMax} from "gsap";

就可以在页面中使用了。

遇到的第一个问题就是,想要动画通过按钮触发来不停的播放
但是动画播完一遍以后,怎点按钮都不会触发

后面找到了原因,需要在反复触发的时候,改变其位置才行,比如说一开始的X为500,动画播完后X的位置就是500了,再反复触发,位置还是500所以不会有作用,所以想要反复触发,就得修改其位置

this.test = new TweenMax('.box',3,{
   x:this.direction?0:500,
   ease:Bounce.easeOut
  })

第二个问题就是,在页面上,想要在动画过程中和结束以后改变蓝色按钮的状态和文字,结果发现直接用绑定在按钮上的属性不能够完成这个操作

<button [disabled]="isMoveing" style="margin-top: 10px;" nz-button nzType="primary" (click)="repeat()">
  {{describle}}
</button>

this.test = new TweenMax('.box',3,{
   x:this.direction?0:500,
   ease:Bounce.easeOut,
   onStart:function(){
    this.describle = '运动中'
    this.isMoveing = true
   },
   onComplete:function(){
    this.describle = '动'
    this.isMoveing = false
   }
  })

通过一番折腾发觉,其实是this指向的问题

上图可以看到,在TweenMax方法中,this指向的是Tween这个方法本身,而我们需要改变的对象,是处在组件中的,也就是下图所示

定位到了问题所在处,那解决起来就比较简单了,在函数作用域之外的地方定义一个元素指向正确的this就行

let _this = this
this.test = new TweenMax('.box',3,{
   x:this.direction?0:500,
   ease:Bounce.easeOut,
   onStart:function(){
    _this.describle = '运动中'
    _this.isMoveing = true
   },
   onComplete:function(){
    _this.describle = '动'
    _this.isMoveing = false
   }
  })

这样就正常了。

总结

到此这篇关于angular使用TweenMax动画库的文章就介绍到这了,更多相关angular使用TweenMax内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript 安装使用及基本数据类型发布时间:2022-02-05
下一篇:
js实现封装jQuery的简单方法与链式操作详解发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap