html 小程序九宫格抽奖,九宫格抽奖跑马灯效果实现--微信小程序

目标

但愿实现一个九宫格跑马灯效果的抽奖功能，但但愿不止局限于固定的样式或效果。考虑作成一个n*n的可自定义某些参数的组件。可自定义某些参数例如：能指定动画效果的，能局部自定义样式的，等等。css

实现

网上有不少样例，实现语言各式各样，react, vue, jquery, 纯js...等等，遗憾的是都是上图上代码，代码里都是各类嵌套的if else, 和不明意义的数字常量。今天想说说实现的思路。前端

既然定义为组件，就要有个接口，有输入输出。一个3*3的九宫格，咱们把九宫格中去除中间的启动按钮以外的方块定义为奖池，抽奖就是从奖池方块列表中选定一个产生，选不中则未中。这里，奖池列表做为组件的输入。vue

而点击抽奖到选定抽中或未中能够前端控制，也能够后端控制，这里咱们考虑是后端控制的状况，也就是点击抽奖须要请求数据，在返回数据中获取抽奖结果。react

而事实上抽奖组件功能比较独立，因此组件的输出，能够根据实际须要，自定义向外传递输出。jquery

布局

首先咱们遇到的就是布局的问题，一个3*3的九宫格，中间的按钮是启动按钮，其余的奖池方块是天然布局呢？仍是按照跑马灯顺序布局？天然布局是指：

算法

这种布局能够直接使用flexbox 绘制，固然，须要特殊处理下中间按钮。redux

跑马灯布局是指：

小程序

这种布局可使用绝对定位，把元素的索引和他们的位置摆正对齐，放好。后端

从css实现上，没有什么差距，可是选择一种布局，直接决定后面的跑马灯的算法。函数

跑马灯

跑马灯效果的实现是给每一个方块加遮罩，而后利用定时器控制遮罩的出现顺序。若是选择了上面第一种的天然布局，那么在移动遮罩时，遮罩必定不是顺序+1的移动，而是它的移动顺序的索引和方块的索引之间有一个映射的关系，也就是遮罩要按照0，1，2，4，7，6，5，3的顺序去循环移动。model层要始终维护这份映射关系。

若是选择了上面第二种跑马灯布局，那么遮罩只须要按照顺序+1移动就能够了。可是一旦使用这种布局，就倾向于跑马灯是按照顺时针来动画的，若是动画改变，布局须要从新修改。固然不修改也能够，可是会比较麻烦。

减速

跑马灯效果一般是先通过一段匀速运动，而后再通过一段减速运动，最后停在指定的方块上。匀速运动比较好实现，定时器的速度是常量便可，对于减速运动来讲，有不少实现方法。减速过程是线性仍是非线性，咱们能够不一样的实现。若是是简单一点，能够计算步数，匀速将速度减下来，效果好一点咱们能够借助贝塞尔函数。

关于贝塞尔函数的数学原理等，能够自行百度。咱们主要是利用了三阶贝塞尔函数的实现，自定义曲线的曲率，而后和减速运动结合起来。

固然，既然用到了数学的函数曲线，咱们能够任意定义速度曲线，js Math方法去生成一个函数曲线(例如Math.pow())，从而获得减速过程的速度。

组件和外部通讯

这里说一下抽奖组件怎么和外部通讯的问题。若是是react实现的话，经过props 回调，或者结合 redux 等都能较为方便的实现通讯。若是是vue实现的话，能够经过广播，通知外部。

在小程序中，能够经过结合triggerEvent + setData + properties observer 实现。小程序自定义组件内部经过triggerEvent触发外部，外部setData修改数据，而自定义组件内部properties observer发现数据变化，从而拿到新的数据。

没有代码。嗯。一千我的应该有一千种实现方法，但愿学习更为简洁的思路。欢迎拍砖。