最近在用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%来回的,本人刚毕业工作的前端小白,很多地方还要学习进步,各位大佬勿喷。