商业型网站,已有网站备案,网站设计客户对接流程,专业公司网站 南通本来想用uni.createAnimation创建一个旋转动画#xff0c;发现转完一圈后就不动了#xff0c;没法循环旋转#xff0c;
后来又用setInterval每隔一个周期就把旋转角度加180度#xff0c;发现运行一段时间后动画逐渐崩坏#xff0c;应该是动画的周期和定时器的周期时间没有…本来想用uni.createAnimation创建一个旋转动画发现转完一圈后就不动了没法循环旋转
后来又用setInterval每隔一个周期就把旋转角度加180度发现运行一段时间后动画逐渐崩坏应该是动画的周期和定时器的周期时间没有完全吻合导致的。
image :animationanimationData classmusic_img_flag src../../static/images/musicflag.png/image var animation uni.createAnimation({duration: 2000,timingFunction: linear});this.stopAnimation()this.timer setInterval(() {this.timeNum 180;animation.rotate(this.timeNum).step();console.log(timeCheck:, this.timeNum)this.animationData animation.export();}, 2000);
最后采用了下面的这种方式直接用CSS来实现循环旋转动画。
view classmusic_img_flagimage src../../static/images/musicflag.png/image
/view
style langscss scoped.music_img_flag {position: absolute;top: 202rpx;width: 88rpx;height: 88rpx;image {width: 100%;height: 100%;animation: animal 2s infinite linear;-webkit-animation: animal 2s infinite linear;-webkit-transform-origin: center center;-ms-transform-origin: center center;transform-origin: center center;}keyframes animal {0% {transform: rotate(0deg);-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);}100% {transform: rotate(360deg);-ms-transform: rotate(360deg);-webkit-transform: rotate(360deg);}}}
/style
