qhXWS8fSsN.gif

實現思路：

通過控制css動畫的時間，來控制小錘子角度的變化，以及金蛋的消失，因此這里沒有用到canvas等過多的js邏輯。

因為結果是確定的，所以在確定結果的情況下，無論砸哪個蛋都是返回這個結果，因此只需要確定用戶每次點擊金蛋的坐標，實現對應坐標位置金蛋敲擊動畫的變換，就能實現。

<template>
  <div>
    <div class="chouJiang one">
      <div class="egg" @click="clickOne(index)" v-for="(i,index) in chouJiang.num" :key="index">
        <!-- 錘子圖片 -->
        <img
          class="chuizi"
          :class="{'qiao':chouJiang.qiao && chouJiang.egg == index}"
          src="@/assets/img/chuizi.png"
          alt
        />
        <!-- 雞蛋圖片 -->
        <img
          class="eg"
          :class="{'qiao':chouJiang.qiao && chouJiang.egg == index}"
          src="@/assets/img/egg.png"
          alt
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chouJiang: {
        num: 3, //默認蛋數量
        egg: null, //敲擊的哪個雞蛋
        qiao: false, //是否敲擊
        result: '謝謝參與', //默認結果
        time: 1000 //多少秒后彈出結果 ms
      }
    }
  },
  methods: {
    //敲擊雞蛋的方法
    clickOne(index) {
      //敲擊過一次就不能再敲擊
      if (!this.chouJiang.qiao) {
        this.chouJiang.egg = index
        this.chouJiang.qiao = true
        setTimeout(() => {
          alert(this.chouJiang.result)
        }, this.chouJiang.time)
      } else {
        alert('您已經敲過了哦～')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.chouJiang {
  margin: 50px 0;
}
/* 砸金蛋 */
.chouJiang.one {
  display: flex;
  justify-content: center;
  transform: scale(0.7);
  .egg {
    height: 150px;
    cursor: pointer;
    // overflow: hidden;
    margin: 0 20px;
    // border: 1px solid #ccc;
    position: relative;
    &:hover .chuizi {
      opacity: 1;
    }
    img {
      user-select: none;
      pointer-events: none;
    }
    .eg {
      height: 100%;
      transform: scale(1.3);
      &.qiao {
        animation: clickOne_eg 0.5s steps(1) 0.4s both 1;
      }
    }
    .chuizi {
      transform-origin: 100% 100%;
      opacity: 0;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 9;
      &.qiao {
        animation: clickOne_chuizi 0.7s ease-in both 1;
      }
    }
  }
  /* 敲雞蛋后的錘子動畫 */
  @keyframes clickOne_chuizi {
    50% {
      transform: rotate(30deg);
    }
    99% {
      opacity: 1;
      transform: rotate(0);
    }
    100% {
      opacity: 0;
      transform: rotate(0);
    }
  }
  /* 敲雞蛋后的雞蛋動畫 */
  @keyframes clickOne_eg {
    100% {
      opacity: 0;
    }
  }
}
</style>