uni-app：点击图片进行图片旋转（可自定义旋转次数）

效果

代码 

<template>
	<view>
		<view class="top_line">
			<view class="top_img">
				<image src="../../../static/bg/index.png" mode=""></image>
			</view>
			<view class="top_button">
				<image @tap="refresh" class="rotate-me" :class="{'rotated': isRotating}" :src="refresh_icon"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				refresh_icon: getApp().globalData.icon + 'index/refresh.png', //图片
				isRotating: false, //旋转状态
			}
		},
		methods: {
			refresh() {
				this.isRotating = true;
				setTimeout(() => {
					this.isRotating = false;
				}, 2000); // 设置旋转时间，这里为2秒
			},
		},
		onLoad() {

		}
	}
</script>

<style lang="scss">
	//顶部样式
	.top_line {
		//顶部背景图
		.top_img {
			image {
				width: 100%;
				height: 300rpx;
			}
		}
		//顶部刷新按钮
		.top_button {
			position: absolute;
			top: 2%;
			right: 10%;
			
			.rotate-me {
				width: 50rpx;
				height: 50rpx;
				//元素变化过渡效果(transition：指定需要过渡的属性,1s过渡持续的时间;ease：指定过渡效果的缓动函数)
				transition: transform 1s ease;
			}

			.rotated {
				animation-name: rotate;//指定动画名称rotate，使用@keyframes rotate 
				animation-duration: 1s;//指定动画的持续时间
				animation-timing-function: ease;//ease 函数，表示动画开始缓慢，然后加速，最后减速到结束，使得旋转动画看起来更加平滑。
				animation-iteration-count: 2;//指定动画的重复次数

			}

			@keyframes rotate {
				0% {//初始状态
					transform: rotate(0deg);
				}

				100% {//完成时状态
					transform: rotate(360deg);
				}
			}
		}
	}
</style>

文章来源地址https://uudwc.com/A/3wjxR