如何优雅的实现一个九宫格抽奖

作者：黄鹏

如何优雅的实现一个九宫格抽奖

九宫格抽奖是在移动端常见开发功能点之一，那如何实现一个高度可复用的九宫格逻辑就显的特别重要了。接下来我们来分析下如何实现一个优雅的抽奖功能。

功能分析

image.png

图片1

实现功能：

1. 按照右图箭头的方向进行旋转。

2. 旋转到某一个 格子 可以进行一定的操作。比如到达当前的 格子 进行高亮， 等功能。

3. 旋转的速度由  停 -> 加速 -> 匀速 -> 减速 -> 停。

方案：

分析完了九宫格需要实现的功能，现在介绍一下实现方案。

方案一

基于setTimeout 的旋转方式。通过不断的改变setTimeout 的时间来控制旋转速度的快慢，实现代码如下：

// count 代表旋转的圈数，id, 表示 停止的id， cb 表示动画结束后执行的函数。
function start(count, id, cb) {
   var sortArr = [1, 2, 3, 6, 9, 8, 7, 4]; // 旋转的顺序
   var i = 0;
   // 最大速度 150
   var timeout = 200; // 走一格所花的时间，时间越大，速度越慢。
   var that = this;
   for (var m = 0; m < sortArr.length; m++) {
     if (that.imgdata[sortArr[m] - 1].id == id) {
       break;
     }
   }
   var middle = sortArr.length * count + m + 1;// 计算需要走多少格
   function rotate() {
     // 结束条件
     if (i > sortArr.length * count && that.imgdata[that.current - 1].id == id) {
       clearInterval(that.time);
       that.time = null;
       cb();
       return;
     }
     // 控制加，减速度。
     if (i < middle / count) {
       timeout = timeout - 160 / middle * count;
     }

     if (i > (count - 1) * middle / count) {
       timeout = timeout + 500 / middle * count;
     }
     if (i == middle - 2) {
       timeout = 600;
     }
     if (i == middle - 1) {
       timeout = 1000;
     }
     // 获取当前停留格子的数据，
     that.current = sortArr[i++ % sortArr.length];
     setTimeout(rotate, timeout);
   }
   this.time = setTimeout(rotate, timeout);
 }
}

优点：动画效果是比较好看的。有加速，匀速减速过程。
缺点：和页面相关太密切。不利于复用。（pass）

方案二

基于sass 实现。通过先写出所有小方格的css,（每一个停留区间实现一套css。八个就写八次。）然后js 中只需要不停的替换class名称就行了。代码如下：

@mixin qia