手摸手。完成一个H5 抽奖功能
要完成一个这样的抽奖功能
构思
- 奖励物品是通过接口获取的(img)
- 奖励结果是通过接口获取的(id)
- 抽奖的动画需要由慢到快再到慢
- 抽奖转动时间不能太短
- 抽奖结束需要回调
- 业务代码和功能代码要分离
先完成一个 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;
}
}
}
效果图
开始做动画效果
新建一个 Game
的 class
,有有个 run
方法和 finish
方法
开始运行
动画的速度是变化的,使用 requestAnimationFrame
和 setInterval
有点不妥,所以:可以使用 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;
}
速度的控制
- 默认速度为加速(
this.oil = true
)通过是否达到预期速度来停止加速,当减速时同理。 - 为达到缓动结束效果,所以结束时间通过:到达最小速度 且 到达结束位置。
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 库,方便大家学习和使用,
欢迎关注公众号「前端进阶课」认真学前端,一起进阶。
手摸手。完成一个H5 抽奖功能的更多相关文章
- 【转】手摸手,带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)
前言 做这个 vueAdmin-template 的主要原因是: vue-element-admin 这个项目的初衷是一个vue的管理后台集成方案,把平时用到的一些组件或者经验分享给大家,同时它也在不 ...
- 浅谈Java中的Condition条件队列,手摸手带你实现一个阻塞队列!
条件队列是什么?可能很多人和我一样答不出来,不过今天终于搞清楚了! 什么是条件队列 条件队列:当某个线程调用了wait方法,或者通过Condition对象调用了await相关方法,线程就会进入阻塞状态 ...
- 【手摸手,带你搭建前后端分离商城系统】01 搭建基本代码框架、生成一个基本API
[手摸手,带你搭建前后端分离商城系统]01 搭建基本代码框架.生成一个基本API 通过本教程的学习,将带你从零搭建一个商城系统. 当然,这个商城涵盖了很多流行的知识点和技术核心 我可以学习到什么? S ...
- 手摸手教你微信小程序开发之自定义组件
前言 相信大家在开发小程序时会遇到某个功能多次使用的情况,比如弹出框.这个时候大家首先想到的是组件化开发,就是把弹出框封装成一个组件,然后哪里使用哪里就调用,对,看来大家都是有思路的人,但是要怎样实现 ...
- 【转】手摸手,带你用vue撸后台 系列二(登录权限篇)
前言 拖更有点严重,过了半个月才写了第二篇教程.无奈自己是一个业务猿,每天被我司的产品虐的死去活来,之前又病了一下休息了几天,大家见谅. 进入正题,做后台项目区别于做其它的项目,权限验证与安全性是非常 ...
- 【转】手摸手,带你用vue撸后台 系列三(实战篇)
前言 在前面两篇文章中已经把基础工作环境构建完成,也已经把后台核心的登录和权限完成了,现在手摸手,一起进入实操. Element 去年十月份开始用vue做管理后台的时候毫不犹豫的就选择了Elemen, ...
- 原创 | 手摸手带您学会 Elasticsearch 单机、集群、插件安装(图文教程)
欢迎关注笔者的公众号: 小哈学Java, 每日推送 Java 领域干货文章,关注即免费无套路附送 100G 海量学习.面试资源哟!! 个人网站: https://www.exception.site/ ...
- 手摸手教你让Laravel开发Api更得心应手
https://www.guaosi.com/2019/02/26/laravel-api-initialization-preparation/ 1. 起因 随着前后端完全分离,PHP也基本告别了v ...
- 手摸手教你如何在 Python 编码中做到小细节大优化
手摸手教你如何在 Python 编码中做到小细节大优化 在列表里计数 """ 在列表里计数,使用 Python 原生函数计数要快很多,所以尽量使用原生函数来计算. &qu ...
随机推荐
- 详解如何在Laravel中增加自定义全局函数
http://www.php.cn/php-weizijiaocheng-383928.html 如何在Laravel中增加自定义全局函数?在我们的应用里经常会有一些全局都可能会用的函数,我们应该怎么 ...
- sqlserver 序号重新计算
DBCC CHECKIDENT('leshua_TradeData',NORESEED) DBCC CHECKIDENT('表名',NORESEED)
- poj 1716 Integer Intervals(差分约束)
1716 -- Integer Intervals 跟之前个人赛的一道二分加差分约束差不多,也是求满足条件的最小值. 题意是,给出若干区间,需要找出最少的元素个数,使得每个区间至少包含两个这里的元素. ...
- oracle CBO下使用更具选择性的索引
基于成本的优化器(CBO, Cost-Based Optimizer)对索引的选择性进行判断来决定索引的使用是否能提高效率. 如果索引有很高的选择性, 那就是说对于每个不重复的索引键值,只对应数量很少 ...
- tp5 select出来数据集(对象)转成数组
1.先在数据库配置文件中 //数据集返回类型 'resultset_type' => 'collection', 2.在使用时, 使用 toArray() 方法 //查询数据库 $news = ...
- Java自动生成testcase
package com.citi.sl.tlc.services.tlc.collateralDataProcess.util; import java.io.BufferedWriter; impo ...
- Python--day29--configparser模块(配置)(不熟,以后要找时间重学)
- ubuntu中桌面图标的配置
在网上随处可以找到怎么样把应用程序的图标放到桌面上,我刚用ubuntu时也是按照网上的做法,一步一步的做的,现将网上的做法复制下来: 桌面配置文件简述\label{sec:desktop file} ...
- 解决:javac: 无效的目标发行版: 1.8
原 解决:javac: 无效的目标发行版: 1.8 2017年06月14日 16:21:12 代码也文艺 阅读数 44795 版权声明:本文为博主原创文章,未经博主允许不得转载. https://bl ...
- springboot配置大全
此配置大全是在官方开发者文档中看到的,地址:https://docs.spring.io/spring-boot/docs/1.5.6.RELEASE/reference/html/common-ap ...