1. 需求分析
- 九宫格的布局实现,以及每个奖品的顺序;
- 奖品图片的切换或者奖品背景颜色的改变;
- 抽奖过程有加速,匀速,减速三个阶段动画的执行;
- 开始按钮的监听函数,抽奖开始的执行,异步的停止,最终停止后的更新等。
2. 实现效果
3. 实现思路
- 九宫格的布局可以采用浮动,定位,flex;
- 本文采用 flex 布局,实现九宫格布局;
- 奖品的布局顺序,使用 flex 的 order 的值,来改变每个奖品的位置;
- 奖品样式或者图片的切换,采用奖品的 index 和改变自增的 value 来对比实现切换;
- 加速,匀速,减速的动画,可以控制每次动画的时间来控制不同阶段的速度;
- 监听函数直接定义 onStart, onEnd 实现抽奖开始和结束的监听。