uni.createAnimation创建一个旋转动画，只能执行一次

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

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

<image :animation="animationData" class="music_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 class="music_img_flag">
    <image src="../../static/images/musicflag.png"></image>
</view>
<style lang="scss" 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>