【创作赢红包】Taro React组件使用（7） —— RuiLuckGrid 九宫格抽奖

1. 需求分析

1. 九宫格的布局实现，以及每个奖品的顺序；
2. 奖品图片的切换或者奖品背景颜色的改变；
3. 抽奖过程有加速，匀速，减速三个阶段动画的执行；
4. 开始按钮的监听函数，抽奖开始的执行，异步的停止，最终停止后的更新等。

2. 实现效果

3. 实现思路

1. 九宫格的布局可以采用浮动，定位，flex；
2. 本文采用 flex 布局，实现九宫格布局；
3. 奖品的布局顺序，使用 flex 的 order 的值，来改变每个奖品的位置；
4. 奖品样式或者图片的切换，采用奖品的 index 和改变自增的 value 来对比实现切换；
5. 加速，匀速，减速的动画，可以控制每次动画的时间来控制不同阶段的速度；
6. 监听函数直接定义 onStart, onEnd 实现抽奖开始和结束的监听。

4. 九宫格布局

4.1 初始数据

let prizes = [
    { text: '0', order: 0},
    { text: '1', order: 1},
    { text: '2', order: 2},
    {