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

本来想用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>