uni-app utilise CSS pour implémenter une animation à rotation infinie

À l'origine, je voulais utiliser uni.createAnimation pour créer une animation de rotation, mais j'ai constaté qu'elle arrêtait de bouger après une rotation et ne pouvait pas tourner en boucle.

Plus tard, j'ai utilisé setInterval pour augmenter l'angle de rotation de 180 degrés tous les deux cycles. J'ai constaté que l'animation s'effondrait progressivement après un certain temps d'exécution. Cela devrait être dû au fait que le cycle d'animation et le temps de cycle de la minuterie ne correspondent pas complètement.

<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);

Enfin, la méthode suivante a été adoptée, utilisant directement CSS pour implémenter l'animation de rotation de boucle.

<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>