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

		.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 in服务器托管网finite 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);
				}
			}
		}

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 小型中文版聊天机器人一、简单介绍与参考鸣谢二、数据集介绍三、数据预处理四、词表制作以及转化（word2seq.py文件）五、数据集加载（dataset.py）六、GPT模型搭建（gpt_model.py）七、训练模型（train.py）八、

入门小菜鸟，希望像做笔记记录自己学的东西，也希望能帮助到同样入门的人，更希望大佬们帮忙纠错啦~侵权立删。 目录 一、简单介绍与参考鸣谢 二、数据集介绍 三、数据预处理 1、重复标点符号表达 2、英文标点符号变为中文标点符号 3、繁体字转为简体字 4、限定长度 …