uniapp的动画运用（三）自定义帧动画《掷骰子》

2022-03-19 本文已影响0人周星星的学习笔记

我们都知道，动画其实是由一帧一帧图片组成，快递地播放一组图片就形成了动画，下面演示一下如何简单地自定义一个动画，如图示例。

掷骰子

一、素材准备

（1）6张点数图以及4张骰子旋转过程中的图

素材

二、代码实现

<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: [
        this.$cnf.resDomains.image + '/1/20102/2022/0223/6215d51592c61i9u.png',
        this.$cnf.resDomains.image + '/1/20102/2022/0223/6215d515782134if.png',
        this.$cnf.resDomains.image + '/1/20102/2022/0223/6215d51549c1fc8n.png',
        this.$cnf.resDomains.image + '/1/20102/2022/0223/6215d515b47db11a.png'
      ],
      //骰子每一个点的对应的图片
      diceImages: {
        //1点的图片
        1:
          this.$cnf.resDomains.image +
          '/1/20102/2022/0223/6215d51475ea3h0m.png',
        //2点的图片
        2:
          this.$cnf.resDomains.image +
          '/1/20102/2022/0223/6215d5147abedog7.png',
        //3点的图片
        3:
          this.$cnf.resDomains.image +
          '/1/20102/2022/0223/6215d51476185wl8.png',
        //4点的图片
        4:
          this.$cnf.resDomains.image +
          '/1/20102/2022/0223/6215d51478aa2dd3.png',
        //5点的图片
        5:
          this.$cnf.resDomains.image +
          '/1/20102/2022/0223/6215d5147a935fu2.png',
        //6点的图片
        6:
          this.$cnf.resDomains.image + '/1/20102/2022/0223/6215d514764cfg82.png'
      },
      //当前掷筛子掷到的点数（默认1点）
      currentPoint: 1,
      //定时器
      timer: null,
    }
  },
  beforeDestroy() {
    //组件销毁之前清除定时器
    clearInterval(this.timer)
  },
  methods: {
    //掷骰子
    async throwDice() {
      //如果当前骰子正在滚动则不能掷骰子
      if (this.isDicing) {
        return
      }
      //从1~6随机一个数
      this.currentPoint = Math.floor(Math.random() * 6 + 1)
      //开启骰子动画
      await this.startAnimation()
      //动画完毕之后可以通知父组件当前掷到的点数
      this.$emit('ok', this.currentPoint)
    },
    //开启动画效果
    async startAnimation() {
      return new Promise((resolve) => {
        //设置筛子开始运动
        this.isDicing = true
        //记录动画次数
        let num = 0
        //每隔200毫秒来回切换一张“动”图形成掷骰子的动画
        this.timer = setInterval(() => {
          let index = this.aniIndex
          index++
          if (index >= this.diceAnimationImages.length) {
            index = 0
          }
          this.aniIndex = index
          num++
          //差不多执行1.6秒钟的时候可以停止了
          if (num > 8) {
            //关闭定时器
            clearInterval(this.timer)
            //设置骰子停止
            this.isDicing = false
            //返回结果
            resolve(true)
          }
        }, 200)
      })
    },
  }
}
</script>

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