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

news/2024/7/19 14:13:32 标签: python, java, javascript, js, html
htmledit_views">
html" title=js>js_content">

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

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

功能分析

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。八个就写八次。）然后html" title=js>js 中只需要不停的替换class名称就行了。代码如下：

@mixin qianzhuai($animationname,$name){
    #{$animationname}: $name;
    -moz-#{$animationname}: $name;
      -o-#{$animationname}: $name;
     -ms-#{$animationname}: $name;
    -webkit-#{$animationname}: $name;
}
.choosed {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    // animation-name: loader1;
    @include qianzhuai(animation-name,loader1);
    @include qianzhuai(animation-duration,3s);
    @include qianzhuai(animation-timing-function,steps(1,end));
    @include qianzhuai(animation-iteration-count,1);
    @include qianzhuai(animation-fill-mode,forwards);
}
 
@mixin transform($transforms) {
        transform: $transforms;
    -moz-transform: $transforms;
      -o-transform: $transforms;
     -ms-transform: $transforms;
 -webkit-transform: $transforms;
}
@function sqrt ($x) {
    @if $x < 0 {
        @warn "Argument for `sqrt()` must be a positive number.";
        @return null;
    }
    $ret: 1;
    @for $i from 1 through 24 {
        $ret: $ret - ($ret * $ret - $x) / (2 * $ret);
    }
    @return $ret;
}
// translate
@mixin translate ($x, $y) {
    @include transform(translate($x, $y));
}
$positions: (-100%,-100%) (0%,-100%) (100%,-100%) (100%,0%) (100%,100%) (0%,100%) (-100%,100%) (-100%,0%);
// rotate
@mixin calc($positions,$rotatetimes,$stopposition) {
    $arrrlen: length($positions);
    $alllength: length($positions) * $rotatetimes + $stopposition ;
    @for $i from 0 through ($arrrlen *$rotatetimes + $stopposition) {
        $item: nth($positions, ($i % $arrrlen)+1);
        $first: nth($item, 1);
        $second: nth($item,2);
        $index:1;
        @if $i <= $arrrlen {
            $index:20/sqrt($arrrlen)*sqrt(($i));
           
        }@else if $i <= ($alllength - $arrrlen + 5) {
            $index:20 + 25/($alllength - 2*$arrrlen) * ($i - $arrrlen) ;
        }@else{
            $index:45 + 55/(4 * 4)* (($i - ($alllength - $arrrlen + 4 ))*($i - ($alllength - $arrrlen + 4 )))
        }
        #{$index}% {
            @include translate($first, $second);
         }
      }
}
@mixin allrotate($name,$positions,$rotatetimes:4, $stopposition:0) {
    
    @keyframes #{$name}{
        @include calc($positions,$rotatetimes, $stopposition);
    }
    // @-o-keyframes #{$name}{
    //     @include calc($positions,$rotatetimes, $stopposition);
    // }
 
}
 
@include allrotate('rewards0',$positions,4,0);
@include allrotate('rewards1',$positions,4,1);
@include allrotate('rewards2',$positions,4,2);
@include allrotate('rewards3',$positions,4,3);
@include allrotate('rewards4',$positions,4,4);
@include allrotate('rewards5',$positions,4,5);
@include allrotate('rewards6',$positions,4,6);
@include allrotate('rewards7',$positions,4,7);

我们可以看到，基本上是将html" title=js>js部分的代码搬到sass 中，减少html" title=js>js 代码的冗余，并通过css 3d 加速，使用页面效果更加流畅。
总结
优点：因为用css写的，效果看起来比html" title=js>js写起来的顺滑许多。
缺点：兼容代码过去。且不易扩展。如果不是九宫格，是十宫格，十一宫格。修改的地方感觉就多了。（pass）
**

方案三 （终极方案）：

通过上诉的两种方案，发现都不是十分通用。那么如何写出更加通用的代码。便于大家使用呢？
经过多次尝试，发现九宫格有如下特点：

  1. 虽然是旋转效果，但是旋转方式各有不同。因此不应该过多依赖于css(方案二的弊端)。

  2. 九宫格，抽奖是抽八个奖。但是有可能抽九个奖，十个奖项。

  3. 旋转的方向也不同。（方向也应该自定义）




定义合理的数据结构。（采用链表的形式）
 服务端返回的奖品信息列表的一般形式，可能会有其他信息，这里就不列出来了。

 // 服务端返回的奖品信息列表
const prizeList = [
  { id: 1 },
  { id: 2 },
  { id: 3 },
  { id: 4 },
  { id: 5 },
  { id: 6 },
  { id: 7 },
  { id: 8 },
];

将我们的数据变成链表的形式：

var rewaridList = [
  {id:1,next:prizeList[2]},
  {id:2,next:prizeList[3]},
  {id:3,next:prizeList[5]},
  {id:4,next:prizeList[1]},
  {id:5,next:prizeList[8]},
  {id:6,next:prizeList[4]},
  {id:7,next:prizeList[6]},
  {id:8,next:prizeListp[7]}
]；

这样子的形式，我们旋转起来就会十分方便，我们拿到数组中的任意一个，我们就知道他接下来旋转的方向了。
注意：next 对应的值更换的话，就代表其旋转方向的变化。

如何控制旋转速度：requestAnimationFrame；


我们将按照的时间片的方式，给格子分发时间片的多少，来实现视觉上速度的快慢。

接下来贴出源码：

class LuckDraw {
    constructor(DataArr, RotateDir, cycleNumber, minSpeed) {
      this.DataArr = JSON.parse(JSON.stringify(DataArr));

      // 最大速度
      this.maxSpeed = 4;
      // 全速
      this.cycleNumber = cycleNumber || 2;
      this.myReq;
      // 最小速度
      this.defaultSpeed = minSpeed || 15;

      for (var i = 0; i < RotateDir.length; i++) {
        let { index, next } = RotateDir[i];
        if (typeof this.DataArr[index].next !== "undefined") {
          console.error(`RotateDir is error`);
          return;
        }
        this.DataArr[index].next = this.DataArr[next]
      }
    }

    run(id, running, runend) {
      var counter = 0; // 计数器
      var current = 0; // 当前数字值
      var n = 0;
      var currentObj = this.DataArr[0];
      var tem = this.DataArr[0];
      while (true) {
        if (n > this.DataArr.length) {
          console.error(`${id}不存在`);
          return;
        }
        if (tem.id == id) {
          break;
        }
        tem = tem.next;
        n++;
      }
      var allCount = this.cycleNumber * this.DataArr.length + n;
      // 加速区间
      var addSpeed = this.defaultSpeed - this.maxSpeed;
      // 减速区间
      var reduceSpeed = allCount - (this.defaultSpeed - this.maxSpeed);
      this.running = running;
      this.runend = runend;
      var _this = this;
      this.running(currentObj);
      this.myReq = requestAnimationFrame(step);
      function step() {
        // current++;
        // 加速环节
        if (counter < addSpeed) {
          if (current < Math.pow(_this.defaultSpeed - counter, 2)) {
            current = current + _this.defaultSpeed / 2;
          } else {
            current = 0;
            // 往前移动一个；
            counter++;
            currentObj = currentObj.next;
            _this.running(currentObj);
          }
        }
        // 匀速环节
        if (counter >= addSpeed && counter < reduceSpeed) {
          if (current < _this.maxSpeed) {
            current++;
          } else {
            // 计数清零
            current = 0;
            // 往前移动一个；
            counter++;
            currentObj = currentObj.next;
            _this.running(currentObj);
          }
        }
        // 减速环节
        if (counter >= reduceSpeed && counter < allCount) {
          if (Math.sqrt(current) <= (_this.defaultSpeed - (allCount - counter))) {
            current = current + 2;
          } else {
            // 计数清零
            current = 0;
            // 往前移动一个；
            counter++;
            currentObj = currentObj.next;
            _this.running(currentObj);
          }
        }
        // 停止
        if (counter >= allCount) {
          _this.runend(currentObj);
          cancelAnimationFrame(_this.myReq);
          return;
        }
        _this.myReq = requestAnimationFrame(step);
      }
    }
  }

使用方式：

// 服务端返回的奖品信息列表
const prizeList = [
  { id: 1 },
  { id: 2 },
  { id: 3 },
  { id: 4 },
  { id: 5 },
  { id: 6 },
  { id: 7 },
  { id: 8 },
];

// 旋转规则数组 
const rotateDir = [
  { index: 0, next: 1 },
  { index: 1, next: 2 },
  { index: 2, next: 3 },
  { index: 3, next: 4 },
  { index: 4, next: 5 },
  { index: 5, next: 6 },
  { index: 6, next: 7 },
  { index: 7, next: 0 },
]

// 初始化抽奖, 3代表圈数， 8代表速度，也代表时间片的个数
const luckDrawFn = LuckDraw(prizeList, rotateDir, 3, 8);

// 中奖id，请求服务端接口拿到
const id = 7;

luckDrawFn.run(
  id, //中奖id
  params => { // 停留在当前格子的回调函数
    // 拿到当前 active 状态的 id
    this.rewardId = params.id;
  },
  params => { // 最终停止的回调函数
    //最后转盘停止的地方，可以弹出奖励弹框或其他操作
    this.rewardId = params.id;
  })


总结：这样子实现，我们每次更改的只有，prizeList, rotateDir，操作逻辑可以写在两个提供的回调函数中，实现。这样子就可以完美的提供给任何人用了，还可以兼容各种复杂的抽奖情况。

◆ ◆ ◆  ◆ ◆
长按关注小生

你的在看我当成喜欢


http://www.niftyadmin.cn/n/1252160.html

相关文章

VSCode 的这些黑科技 99% 的人都不知道

VSCode 的这些黑科技 99% 的人都不知道

VSCode 已经成为大家常用的编码工具了&#xff0c;但是得益于它的插件生态机制&#xff0c;其实 VSCode 能覆盖的面远比你想象中的大得多&#xff0c;今天笔者就来介绍其中一些相当给力的使用场景。不只是 markdown首先介绍插件 markdown-preview-enhanced&#xff0c;它的核心…
阅读更多...
matlab 函数返回一个值,matlab学习笔记13_1 函数返回值

matlab 函数返回一个值,matlab学习笔记13_1 函数返回值

一起来学matlab-matlab学习笔记13函数13_1 函数返回值觉得有用的话,欢迎一起讨论相互学习~Follow Me函数返回一个值返回值不必使用return语句&#xff0c;而是直接将需要返回的变量或矩阵写在function后面function 返回值/返回矩阵该函数文件名(参数1&#xff0c;参数2&#xf…
阅读更多...
图像直方图提取 matlab,跪求：matlab 直方图特征值求图像间相似度的程序~

图像直方图提取 matlab,跪求：matlab 直方图特征值求图像间相似度的程序~

看看这个吧希望有帮助&#xff01;clear allclose allclc%计算图像的梯度[I,map]imread(C:\Users\Administrator\Pictures\12345.jpg); %读入图像imshow(I,map); %显示原图像Idouble(I) %转换为double类型[Gx,Gy]gradient(I); …
阅读更多...
真正能让效率翻倍的 VSCode 插件

真正能让效率翻倍的 VSCode 插件

VSCode的插件生态太繁荣了,常用的几乎所有需求都可以通过插件去解决,甚至会有非常多的娱乐插件.比如,用VSCode听歌用VSCode刷题当然,以上的插件我都没下载,纯属娱乐.VSCode插件推荐版本管理插件1、GitLens: 虽然VSCode内置了Git版本管理工具,但是依然不够强大,比如不能比较comm…
阅读更多...
matlab subsindex函数,matlab - 没有为类“ struct”的值定义函数“ subsindex” - 堆栈内存溢出...

matlab subsindex函数,matlab - 没有为类“ struct”的值定义函数“ subsindex” - 堆栈内存溢出...

我正在使用matlab来解决经济学中的简单模型。 但是我遇到了一个错误没有为类“ struct”的值定义函数“ subsindex”当我运行最后一行代码时。omegamkt_share(Par,w,Grid);当我在到达最后一行之前在代码中反复调用此函数时&#xff0c;它似乎连接了我&#xff0c;它工作正常。 …
阅读更多...
你可能不知道 JSON.stringify() 的这些妙用

你可能不知道 JSON.stringify() 的这些妙用

1.用来调试对象我们先来看看下面这个代码在控制台中输出什么//Initialize a User object const user { "name" : "蔡生", "age" : 26 } console.log(user); // [object Object]看&#xff01;console.log()没有输出我们想要的结果。它输出了[ob…
阅读更多...
mysql创建服务器对象,使用navicat建立与服务器的远程mysql连接

mysql创建服务器对象,使用navicat建立与服务器的远程mysql连接

这里举例服务器的ip:192.168.16.98;客户端的ip:192.168.61.201具体的机器的ip请对照更改即可附 mysql 重启的命令启动mysql命令&#xff1a;sudo /etc/init.d/mysql start停止mysql命令&#xff1a;sudo /etc/init.d/mysql stop重启mysql命令&#xff1a;sudo /etc/init.d/mysq…
阅读更多...
推荐一位实力超强的平安前端算法大佬：瓶子君

推荐一位实力超强的平安前端算法大佬：瓶子君

今天给大家推荐一位平安大佬&#xff1a;前端瓶子君&#xff0c;一个专注于前端开发的小瓶子&#xff0c;五年大厂开发经验&#xff0c;掘金优秀作者。「前端进阶算法」系列是她4月初发起的活动&#xff0c;从 0 到 1 构建完整的前端数据结构与算法体系。这是一个专注于前端算法…
阅读更多...
最新文章

Copyright @ 2022~2023