uni-app 关于动画的一点坑

5,670 阅读1分钟

最近在用uni-app这个框架开发app,在制作一个背景的动画效果的时候遇到了一点坑,写个文章记录一下。。。

uni-app这个框架里面,首先我直接用原生css3去写animation,结果是除了速度曲线animation-timing-function,这个属性之外都可以用,唯独它写了就没有反应,后面果断放弃原生css3,改用框架内部封装的方法。

但是这个内部方法,也是踩了坑。我做的背景图动画是图片放大到150%,然后缩回100%,

scale: function () {

 this.animation.scale(1.5,1.5).step({duration:2000,timingFunction: "linear"})

this.animation.scale(1,1).step({duration:2000,timingFunction: "linear"})

 this.animationData = this.animation.export() 

},

然后,内部方法之中并没有使动画无线循环播放这个属性!

只能用定时器了看来。。

写了定时器去触发这个函数之后发现,动画只会播放一次,定时器还在走,函数不断的被调用,但是动画就是只放一次,这就挺烦的了。

后面才发现,每次调用这个函数, this.animation后面变化的值不能一样 ,如果一样那就会只触发一次,所以要改成随机数

scale: function () { 

 this.animation.scale(Math.random() * 1.5+1).step({duration:2000,timingFunction: "linear"})

 this.animationData = this.animation.export() 

 },

这样一来就可以用定时器一直播放动画了!

说起来还是跟预先的想法有点出入,本来是想100%-150%来回的,本人刚毕业工作的前端小白,很多地方还要学习进步,各位大佬勿喷。