基于react hook的砸金蛋动画

产品的任务罢了

---

前言

9个蛋，其中一个蛋晃动，同时晃动的蛋壳上出现红包，锤子移动过去落下，蛋晃动几下；如此反复，直到被用户点击打断，用户点击金蛋，金蛋晃动并破裂，弹中奖弹窗或未中奖图标，活动页面如下

---

一、html结构

结构设计很简单，先整一个正方形的大盒子，然后在里面放一个宽100%高100%的小盒子和一个绝对定位的锤子，再在小盒子里面放九个宽为33.33%高为33.33%的金蛋图片，小盒子为弹性盒子flex，两端对齐 justify-content: space-between; 并且自动换行,flex-wrap: wrap;

<div className={style['big-box']} style={
  { background: `url("${EggBg}") no-repeat`, backgroundSize: '100%' }} >
  <img src={Hammer} ref={hammerRef} className={style['hammer']} />
  <div className={style['eggs-box']}>
    <div className={style['egg']}>
      <img className={
     style['jd']} src={Egg}/>
      <img src={EggBottom} className={style['egg-bottom']} />
    </div>
  </div>
</div>

样式啥的就不整上来了，差不多就那意思，不想用弹性盒子考虑兼容问题也可以直接让每一张金蛋图宽33.33%高33.33%，放九个在里面自己就变成九宫格了，用弹性盒子只是觉得这样子比较高级而已（笑）。

---

二、动画实现

设置一个数组为[0,0,0,0,0,0,0,0,0]，通过这个数组渲染九个金蛋，然后没过一秒将其中一项变为1，其余重置为0，变为1的那一项所渲染的金蛋晃动。

const [eggsArr, setEggsArr] = useState<number[]>([0, 0, 0, 0, 0, 0, 0,