九宫格抽奖

九宫格抽奖

hello~ 大家好~

时光荏苒，岁月如梭，又到了....

啪，一个巴掌扇醒自己，都要9102年了，还用这么老套的开头语

还是不是新时代的人了，还能不能与时俱进了？

不好意思，我们程序员，只和代码打交道，不接触外面的世界。

好啦，现实就是，我们的时间都在写bug上，不写代码上了。

废话不说了，岁末年初，程序员总会碰到几个需求是关于抽奖的

那么这一波雪中送炭就必要了！

业务逻辑

1.  数据准备：

因为抽奖按钮要占用一个位置，所以我们准备八个奖品就好啦~

每条数据里面要有一个背景图片和一个奖品图片哦~

为啥一定要有背景图片呢？可不光光是为了好看哦，是因为一会转动起来要改变背景图片，突出显示。

2. 数据渲染:

将我们的数据渲染进去，并加上样式，使其呈现为九宫格的形式。

3. 动画效果:

先看一张图

黑色的是我们加载数据进去时的顺序，但是转动的时候不能按照这样的顺序转动，要按照红色的顺序。所以我们要定义一个数组来存放转动的顺序，arr=[0,1,2,5,8,7,6,3]

之后还需要定义两个定时器，为啥要两个呢？

因为在开始转动的时候需要快速转动，后面慢下来，直到停止。

当prizeIndex(当前位置)和stopIndex(停止位置)是一样的，就停下来。

这里面会涉及到几个特殊处理，有没有想到是哪里?

对，就是在转动开始和结尾位置，他们的前后不能是简单的加减index。这个看上面的图就可以感受到了~   

到此刻整个的业务逻辑就完结了，是不是很简单？

代码实现

使用vue框架：

https://github.com/myselfTime/turnTable9Vue.git

使用react框架：

https://github.com/myselfTime/turmTable9_react.git

是不是很简单？

好嗨哦，感觉人生已经到达了巅峰。

我们还将推出其他抽奖形式，是不是很期待，那么赶紧来关注我们吧，避免错过精彩文章~

微信搜索nashihoudewo_Ly 关注