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

evelynlab

目标

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

clipboard.png

实现

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

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

而点击抽奖到选定抽中或未中可以前端控制,也可以后端控制,这里我们考虑是后端控制的情况,也就是点击抽奖需要请求数据,在返回数据中获取抽奖结果。

而事实上抽奖组件功能比较独立,所以组件的输出,可以根据实际需要,自定义向外传递输出。

布局

首先我们遇到的就是布局的问题,一个3*3的九宫格,中间的按钮是启动按钮,其他的奖池方块是自然布局呢?还是按照跑马灯顺序布局?自然布局是指:
image.png

这种布局可以直接使用flexbox 绘制,当然,需要特殊处理下中间按钮。

跑马灯布局是指:
image.png

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

从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发现数据变化,从而拿到新的数据。

没有代码。嗯。一千个人应该有一千种实现方法,希望学习更为简洁的思路。欢迎拍砖。

阅读 9.6k

evelynlab
keep thinking, keep writing

do something interesting

559 声望
30 粉丝
0 条评论

do something interesting

559 声望
30 粉丝
文章目录
宣传栏