uniApp 中实现一个骰子动效

代码如下

复制代码
<template>
	<!-- 骰子组件 -->
	<view class="dice-wrap" @tap="throwDice">
		<!-- 筛子运动时候的展示的图片 -->
		<image v-if="isDicing" :src="diceAnimationImages[aniIndex]" class="dice-icon"></image>
		<!-- 筛子静止时候的显示的对应点数的图片 -->
		<image v-else :src="diceImages[currentPoint]" class="dice-icon"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//是否正在掷筛子
				isDicing: false,
				//当前显示的动画图片索引
				aniIndex: 0,
				//掷筛子动画所用到的图片(4张骰子旋转过程中的图)
				diceAnimationImages: [
					'https://www.upupo.cn/img/骰子素材/动1.png',
					'https://www.upupo.cn/img/骰子素材/动2.png',
					'https://www.upupo.cn/img/骰子素材/动3.png',
					'https://www.upupo.cn/img/骰子素材/动4.png'
				],
				//骰子每一个点的对应的图片
				diceImages: {
					//1点的图片
					1: 'https://www.upupo.cn/img/骰子素材/1点.png',
					//2点的图片
					2: 'https://www.upupo.cn/img/骰子素材/2点.png',
					//3点的图片
					3: 'https://www.upupo.cn/img/骰子素材/3点.png',
					//4点的图片
					4: 'https://www.upupo.cn/img/骰子素材/4点.png',
					//5点的图片
					5: 'https://www.upupo.cn/img/骰子素材/5点.png',
					//6点的图片
					6: 'https://www.upupo.cn/img/骰子素材/6点.png'
				},
				//当前掷筛子掷到的点数(默认1点)
				currentPoint: 1,
				//定时器
				timer: null,
			}
		},
		beforeDestroy() {
			//组件销毁之前清除定时器
			clearInterval(this.timer);
		},
		methods: {
			async getDicePoint() {
				let point = 1;
				//从1~6随机一个数
				point = Math.floor(Math.random() * 6 + 1);
				return point;
			},
			//掷骰子
			async throwDice() {
				//如果当前骰子正在滚动则不能掷骰子
				if (this.isDicing) {
					return
				}
				//从接口获取点数
				this.currentPoint = await this.getDicePoint();
				//开启骰子动画
				await this.startAnimation();
				//动画完毕之后可以通知父组件当前掷到的点数
				this.$emit('throwEnd', this.currentPoint);
			},
			//开启动画效果
			async startAnimation() {
				return new Promise((resolve) => {
					//设置筛子开始运动
					this.isDicing = true;
					//记录动画次数
					let num = 0;
					//每隔100毫秒来回切换一张"动"图形成掷骰子的动画
					this.timer = setInterval(() => {
						let index = this.aniIndex;
						index++;
						if (index >= this.diceAnimationImages.length) {
							index = 0;
						}
						this.aniIndex = index;
						num++;
						//差不多执行1.2秒钟的时候可以停止了
						if (num > 12) {
							//关闭定时器
							clearInterval(this.timer);
							//设置骰子停止
							this.isDicing = false;
							//返回结果
							resolve(true);
						}
					}, 100);
				})
			},
		}
	}
</script>

<style lang="scss">
	.dice-wrap {
		width: 172rpx;
		height: 172rpx;

		.dice-icon {
			width: 172rpx;
			height: 172rpx;
		}
	}
</style>

素材地址:https://download.csdn.net/download/yueye_wu/88621174

ps:素材免费下载哦

相关推荐
2501_915106327 分钟前
iOS 可分发是已经上架了吗?深入解析应用分发状态、ipa 文件上传、TestFlight 测试与 App Store 审核流程
android·ios·小程序·https·uni-app·iphone·webview
2501_916007479 小时前
HTTPS 抓包乱码怎么办?原因剖析、排查步骤与实战工具对策(HTTPS 抓包乱码、gzipbrotli、TLS 解密、iOS 抓包)
android·ios·小程序·https·uni-app·iphone·webview
Q_Q5110082859 小时前
python+django/flask+uniapp基于微信小程序的瑜伽体验课预约系统
spring boot·python·django·flask·uni-app·node.js·php
性野喜悲9 小时前
uniapp+<script setup lang=“ts“>解析后端返回的图片流并将二维码展示在页面中
uni-app
卷Java10 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
笨笨狗吞噬者13 小时前
【uniapp】小程序端实现分包异步化
前端·微信小程序·uni-app
2501_9160088914 小时前
HTTPS 双向认证抓包实战,原理、难点、工具与可操作的排查流程
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9151063214 小时前
HTTPS 能抓包吗?实战答案与逐步可行方案(HTTPS 抓包原理、证书Pinning双向认证应对、工具对比)
网络协议·http·ios·小程序·https·uni-app·iphone
游戏开发爱好者814 小时前
App HTTPS 抓包实战,原理、常见问题与可行工具路线(开发 测试 安全 角度)
网络协议·安全·ios·小程序·https·uni-app·iphone
2501_9151063214 小时前
App HTTPS 抓包实战指南,原理、常见阻碍、逐步排查与工具组合
网络协议·http·ios·小程序·https·uni-app·iphone