UNIAPP中NVUE页面 动画

UNIAPP中NVUE页面 动画

需要调用原生动画模块

const animation = uni.requireNativePlugin('animation')

这里模拟一个刷新动画

<image ref="refreshIcon" class="refresh" src="/static/icon/refresh.png" @click="getWeeklyOverviewFun()"></image>

rotateAngle: 0, // 记录当前旋转角度
animationTimer: null,
isReshSportIcon: false,
				
async getWeeklyOverviewFun(from) {
	if (this.isReshSportIcon) return
	this.isReshSportIcon = true;
	this.startRotateAnimation()
	try {
		const res = await 获取服务端信息
	} catch (error) {
		console.error("失败:", error);
	} finally {
		this.stopRotateAnimation();
		this.isReshSportIcon = false;
	}
}
startRotateAnimation() {
	const rotateStep = () => {
			if (!this.isReshSportIcon) return
			this.rotateAngle += 360

			// 执行原生旋转动画
			animation.transition(this.$refs.refreshIcon, {
				styles: {
							transform: `rotate(${this.rotateAngle}deg)`,
							transformOrigin: 'center center'
				},
				duration: 1000, // 旋转一圈的时间（毫秒）
				timingFunction: 'linear' // 匀速旋转
			}, () => {
				// 动画完成后递归调用，实现无限循环
				rotateStep()
			})
	}
	rotateStep()
},
stopRotateAnimation() {
	this.isReshSportIcon = false;
	// 计算当前角度到0度的最短路径
	const currentAngle = this.rotateAngle % 360
	const targetAngle = this.rotateAngle + (360 - currentAngle)

	// 平滑转到0度后停止
	animation.transition(this.$refs.refreshIcon, {
			styles: {
				transform: `rotate(${targetAngle}deg)`,
				transformOrigin: 'center center'
			},
			duration: 300, // 归位动画时间
			timingFunction: 'ease-out'
	}, () => {
			this.rotateAngle = 0
	})
}