要完成一个这样的抽奖功能

构思

  1. 奖励物品是通过接口获取的(img)
  2. 奖励结果是通过接口获取的(id)
  3. 抽奖的动画需要由慢到快再到慢
  4. 抽奖转动时间不能太短
  5. 抽奖结束需要回调
  6. 业务代码和功能代码要分离

先完成一个 UI

使用 flex 来布局,easy,当 curGameIdx 等于当前奖品 index 时高亮

html

    <div class="game-box">
<template
v-for="(val, idx) of boundList">
<div v-if="idx == 4" class="game-item game-begin"
:key="idx"
@click="beginGame">
开始游戏
</div>
<div v-else :key="idx"
class="game-item"
:class="{
active: idx === curGameIdx
}">
{{val}}
</div>
</template>
</div>

css

    .game-box {
display: flex;
flex-wrap: wrap;
text-align: center;
.game-item {
width: 1.25rem;
height: 0.3rem;
background: yellow;
border: 1px solid transparent;
transition: all 0.2s;
&.game-begin {
background: transparent;
}
&.active {
border: 1px solid black;
}
}
}

效果图

开始做动画效果

新建一个 Gameclass,有有个 run 方法和 finish 方法

开始运行

动画的速度是变化的,使用 requestAnimationFramesetInterval 有点不妥,所以:可以使用 setTimeout + speed 参数 来控制动画的速度。

class Game {
constructor(idx) {
this.idx = idx;
this.speed = 400;
} addIdx(){
} speedControl() {
} finish() {
} run(cb) {
this.speedControl();
setTimeout(() => {
this.addIdx();
!this.isFinish && this.run(cb);
}, this.speed);
}
}

结束运行

收到结束运行的通知时,需要先做减速动画,然后再停止在对应的 num,然后调用回调函数,所以先暂存结束回调和结束点,并将动画设置为减速。

    finish(num, finishCb) {
this.oil = false;
this.endIdx = num;
this.finishCb = finishCb;
}

速度的控制

  1. 默认速度为加速(this.oil = true)通过是否达到预期速度来停止加速,当减速时同理。
  2. 为达到缓动结束效果,所以结束时间通过:到达最小速度 且 到达结束位置。
    speedUp() {
this.speed -= 60;
} speedDown() {
this.speed += 200;
} speedControl() {
if (this.speed > this.Max_Speed) {
if (this.oil) {
this.speedUp();
}
}
if (!this.oil) {
if (this.speed < this.Min_Speed) {
this.speedDown();
} else if (this.endIdx === this.idx) {
this.isFinish = true;
typeof this.finishCb === 'function' && this.finishCb();
}
}
}

index 矫正

此时,上面 UI 是通过 v-for + flex 展示的,而动画的执行是转圈,所以需要矫正 index

更改上面 addIdx 方法,矫正 index,并将 ++index 取余

    constructor(idx) {
this.idx = idx;
this.speed = 400;
this.order = null;
this.Order_List = [0,1,2,5,8,7,6,3];
this.Game_Box_Num = 8;
} addIdx() {
this.idx = (++this.idx % this.Game_Box_Num);
this.order = this.Order_List[this.idx];
}

活动代码与业务代码互动

将需要交互的函数传递给 Game 的实例即可

  // vue 代码
methods: {
updateGameIdx(order) {
this.curGameIdx = order;
},
gameFinish() {
this.playing = false;
console.log(this.curGameIdx, 'curGameIdx')
},
beginGame() {
if (this.playing) return;
this.playing = true;
this.curGameIdx = 0;
const game = new Game(this.curGameIdx);
game.run(this.updateGameIdx);
// 通过请求终止
setTimeout(() => {
game.finish(2, this.gameFinish)
}, 3000);
}
}

最后附上完整 Game 代码:

class Game {
constructor(idx) {
this.idx = idx;
this.speed = 400;
this.oil = true;
this.isFinish = false;
this.endIdx = null;
this.finishCb = function() {}
// 常量
this.Max_Speed = 100;
this.Min_Speed = 500;
this.Order_List = [0,1,2,5,8,7,6,3];
this.Game_Box_Num = 8;
} speedUp() {
this.speed -= 60;
} speedDown() {
this.speed += 200;
} speedControl() {
if (this.speed > this.Max_Speed) {
if (this.oil) {
this.speedUp();
}
}
if (!this.oil) {
if (this.speed < this.Min_Speed) {
this.speedDown();
} else if (this.endIdx === this.idx) {
this.isFinish = true;
typeof this.finishCb === 'function' && this.finishCb();
}
}
} finish(num, finishCb) {
this.oil = false;
this.endIdx = num;
this.finishCb = finishCb;
} addIdx() {
this.idx = (++this.idx % this.Game_Box_Num);
} run(cb) {
this.speedControl();
typeof cb === 'function' && cb(this.Order_List[this.idx]);
setTimeout(() => {
this.addIdx();
!this.isFinish && this.run(cb);
}, this.speed);
}
} export default Game;

大致效果

主要功能已经实现,想漂亮点再改改 CSS 就好了,动画时间也需要再调试。(避嫌,具体结果不能提供 - -。)

最后

译者写了一个 React + Hooks 的 UI 库,方便大家学习和使用,

React + Hooks 项目实战

欢迎关注公众号「前端进阶课」认真学前端,一起进阶。

手摸手。完成一个H5 抽奖功能的更多相关文章

  1. 【转】手摸手,带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)

    前言 做这个 vueAdmin-template 的主要原因是: vue-element-admin 这个项目的初衷是一个vue的管理后台集成方案,把平时用到的一些组件或者经验分享给大家,同时它也在不 ...

  2. 浅谈Java中的Condition条件队列,手摸手带你实现一个阻塞队列!

    条件队列是什么?可能很多人和我一样答不出来,不过今天终于搞清楚了! 什么是条件队列 条件队列:当某个线程调用了wait方法,或者通过Condition对象调用了await相关方法,线程就会进入阻塞状态 ...

  3. 【手摸手,带你搭建前后端分离商城系统】01 搭建基本代码框架、生成一个基本API

    [手摸手,带你搭建前后端分离商城系统]01 搭建基本代码框架.生成一个基本API 通过本教程的学习,将带你从零搭建一个商城系统. 当然,这个商城涵盖了很多流行的知识点和技术核心 我可以学习到什么? S ...

  4. 手摸手教你微信小程序开发之自定义组件

    前言 相信大家在开发小程序时会遇到某个功能多次使用的情况,比如弹出框.这个时候大家首先想到的是组件化开发,就是把弹出框封装成一个组件,然后哪里使用哪里就调用,对,看来大家都是有思路的人,但是要怎样实现 ...

  5. 【转】手摸手,带你用vue撸后台 系列二(登录权限篇)

    前言 拖更有点严重,过了半个月才写了第二篇教程.无奈自己是一个业务猿,每天被我司的产品虐的死去活来,之前又病了一下休息了几天,大家见谅. 进入正题,做后台项目区别于做其它的项目,权限验证与安全性是非常 ...

  6. 【转】手摸手,带你用vue撸后台 系列三(实战篇)

    前言 在前面两篇文章中已经把基础工作环境构建完成,也已经把后台核心的登录和权限完成了,现在手摸手,一起进入实操. Element 去年十月份开始用vue做管理后台的时候毫不犹豫的就选择了Elemen, ...

  7. 原创 | 手摸手带您学会 Elasticsearch 单机、集群、插件安装(图文教程)

    欢迎关注笔者的公众号: 小哈学Java, 每日推送 Java 领域干货文章,关注即免费无套路附送 100G 海量学习.面试资源哟!! 个人网站: https://www.exception.site/ ...

  8. 手摸手教你让Laravel开发Api更得心应手

    https://www.guaosi.com/2019/02/26/laravel-api-initialization-preparation/ 1. 起因 随着前后端完全分离,PHP也基本告别了v ...

  9. 手摸手教你如何在 Python 编码中做到小细节大优化

    手摸手教你如何在 Python 编码中做到小细节大优化 在列表里计数 """ 在列表里计数,使用 Python 原生函数计数要快很多,所以尽量使用原生函数来计算. &qu ...

随机推荐

  1. 给博客添加rss订阅

    如果是自己搭建博客,有一个问题是如何写一篇新的文章就可以告诉读者,你写了一篇新的?一个简单方法是使用 rss ,RSS订阅是站点用来和其他站点之间共享内容的一种简易方式,即Really Simple ...

  2. oracle函数 round(x[,y])

    [功能]返回四舍五入后的值 [参数]x,y,数字型表达式,如果y不为整数则截取y整数部分,如果y>0则四舍五入为y位小数,如果y小于0则四舍五入到小数点向左第y位. [返回]数字 [示例] se ...

  3. 2018-2-13-win10-uwp-ContentDialog-点确定不关闭

    title author date CreateTime categories win10 uwp ContentDialog 点确定不关闭 lindexi 2018-2-13 17:23:3 +08 ...

  4. 深入java面向对象一:==和equals详解

    本文从多篇博客笔记融合而来,系转载,非原创,参考: 1.  http://www.cnblogs.com/e241138/archive/2012/09/16/2687981.html 2.  htt ...

  5. java GUI(图形用户界面)

    GUI Graphical User Interface(图形用户接口). 用图形的方式,来显示计算机操作的界面,这样更方便更直观. CLI Command line User Interface ( ...

  6. P1005 等边字符三角形

    题目描述 给定一个字符串,用它构造一个底边长5个字符,高3个字符的等腰字符三角形. 三角形的形状见样例输出. 输入格式 无. 输出格式 输出样例输出中所描述的等腰字符三角形. 样例输入 无. 样例输出 ...

  7. int64 DWORD 与cstring 互转

    //int64 与cstring 互转 int64_t val = 1111111111111111111; CString str; str.Format(("%I64d"), ...

  8. RocketMQ(消息重发、重复消费、事务、消息模式)

    分布式开放消息系统(RocketMQ)的原理与实践 RocketMQ基础:https://github.com/apache/rocketmq/tree/rocketmq-all-4.5.1/docs ...

  9. 【HTML/CSS】BFC

    块格式化上下文(Block formatting contexts) BFC是什么? 是Web页面中盒模型布局的CSS渲染模式.它的定位体系属于常规文档流. 至少满足条件之一: float 的值不为  ...

  10. Spark in action Spark 以及SparkR的安装配置说明

    Spark以及SparkR的安装(standalone模式) From :ssdutsu @ Inspur Company  suzhiyuan2006@gmail.com 操作系统 CentOS 7 ...