uni-app使用CSS实现无限旋转动画

本来想用uni.createAnimation创建一个旋转动画,发现转完一圈后就不动了,没法循环旋转,

后来又用setInterval每隔一个周期就把旋转角度加180度,发现运行一段时间后动画逐渐崩坏,应该是动画的周期和定时器的周期时间没有完全吻合导致的。


		
	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来实现循环旋转动画。


    

你可能感兴趣的:(uni-app,CSS,uni-app,css)