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:素材免费下载哦