uni-app は CSS を使用して無限回転アニメーションを実装します

当初は uni.createAnimation を使用して回転アニメーションを作成したかったのですが、1 回転後に動きが停止し、ループで回転できないことがわかりました。

その後、setInterval を使用して 1 サイクルごとに回転角度を 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>