vue组件实现移动端九宫格转盘抽奖

本文实例为大家分享了vue组件实现移动端九宫格转盘抽奖的具体代码,供大家参考,具体内容如下

vue-lucky-draw

移动端九宫格转盘抽奖vue组件,中奖的奖品数据由接口决定。

效果图

抽奖

因为中奖的结果是后台返回的,所以要考虑转盘的最终停下来的位置必须是在对应后台返回结果的奖品的位置,也就是要模拟出这个中奖的过程(所以所谓的抽奖都是骗人的,嘿嘿)。先要写出移动的背景框对应的各个位置的css,然后动态切换class来使其呈现出转动效果。明白了过程就好写了。

中间的按钮用的是css3的animation,我这个奖品是合在了一张图上,你也可以分开成8张小图,那样需要写更多的样式。

// 抽奖
 handleStart() {
  if (this.isRuningLucky) {
   return Toast("正在抽奖中...");
  }
  if (isNaN(Number(this.initSpeed))) {
   return false;
  }
  this.speed = this.initSpeed;
  // 开始抽奖
  this.isRuningLucky = true;
  this.time = Date.now();
  this.drawAward();
  Toast("开始抽奖");
 },
 drawAward() {
  // 请求接口,模拟一个抽奖数据(假设请求时间为2s)
  setTimeout(() => {
   this.award = {
    id: "4"
   };
   console.log("返回的抽奖结果是", this.award);
  }, 2000);
  this.move();
 },
 move() {
  let timer = setTimeout(() => {
   this.current++;
   if (this.current > 7) {
    this.current = 0;
   }
   // 若抽中的奖品id存在,则开始减速转动
   if (this.award.id && (Date.now() - this.time) / 1000 > 2) {
    console.log("奖品出来了");
    this.speed += this.diff; // 转动减速

    // 若转动时间超过4秒,并且奖品id等于小格子的奖品id,则停下来
    if (
     (Date.now() - this.time) / 1000 > 4 &&
     this.award.id == this.awards[this.current].id
    ) {
     clearTimeout(timer);

     setTimeout(() => {
      this.isRuningLucky = false;
      // 这里写停下来要执行的操作(弹出奖品框)
      Toast(
       "您抽中的奖品是" + this.awards[this.current].name + ",奖品id是" + this.awards[this.current].id
      );
     }, 400);
     return;
    }

   // 若抽中的奖品不存在,则加速转动
   } else {
    if (this.speed >= 50) {
     this.speed -= this.diff; // 转动加速
    }
   }

   this.move();
  }, this.speed);
 },

号码滚动

使用无序列表将号码列表(正常是从接口获取)循环出来,通过设置定时以及控制transition的属性,来达到无缝连接的效果。如果样式(li高度)改变的话,需要对定时器时间进行调节(控制下一个显示的时间)。

// 中奖名单滚动
 scroll() {
  this.animate = true;
  let timer = setTimeout(() => {
   this.list.push(this.list[0]);
   this.list.shift();
   this.animate = false;
  }, 500);
 }

功能代码请移步到我的GitHub
可以clone项目 npm i , npm run dev,喜欢的话点个星吧_~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2020-10-15

vue实现手机号码抽奖上下滚动动画示例

本文介绍了vue实现手机号码抽奖上下滚动动画示例,分享给大家.具体如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Document</title> <meta name="viewport" content=

基于VUE实现的九宫格抽奖功能

先给大家展示下效果图: HTML代码: <template> <div class="luckDraw"> <title-bar :title="title"></title-bar> <div class="container"> <div class="turntable-wrapper"> <div class="luck-wrapp

Vue.js实现大转盘抽奖总结及实现思路

大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩子函数watch监听抽奖结果的返回情况播放大转盘动画并给用户弹出中奖提示. 中奖结果弹窗,为抽奖组件服务. 实现步骤如下: 构建api奖品配置信息和抽奖接口,vuex全局存放奖品配置和中奖结果数据信息. api: export default { getPrizeList () { let priz

js实现大转盘抽奖游戏实例

本文实例讲述了js实现大转盘抽奖游戏.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

jquery——九宫格大转盘抽奖实例

 一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery九宫格大转盘抽奖</title> <style> #lottery{width:570px;height:510

jquery实现九宫格大转盘抽奖

下面我们来分享一个九宫格抽奖特效 特效说明: 一款jQuery九宫格大转盘抽奖代码网页特效,点击抽奖按钮开始随机抽奖选择奖品,可设置起点位置.奖品数量.转动次数.中奖位置参数.(兼容测试:IE7及以上.Firefox.Chrome.Opera.Safari.360等主流浏览器) HTML: <!--效果html开始--> <div id="lottery"> <table border="0" cellpadding="0&q

Unity 2017使用UGUI实现大转盘抽奖

本文实例为大家分享了Unity 2017实现大转盘抽奖的具体代码,供大家参考,具体内容如下 涉及到的插件:Dotween 在"Hierarchy"面板创建一个Image,这个Image用来显示大转盘的那个圆盘,我用的UGUI里默认的那个圆圆的图片,放大后很模糊,不过不打紧 接着创建一个Panel名字改成"奖品组",这个是奖品的父物体,记得吧Panel里的Image,Canvas Renderer组件删了 然后在创建一个Panel名字改成"Awar"

大转盘抽奖小程序版 转盘抽奖网页版

今天整理了下以前写的小demo,把大转盘抽奖的代码,整合下,列了网页版和小程序两个版本,这个转盘抽奖的核心是H5的canvas和Css3的translate属性,非常简单,写了网页版和小程序版供大家参考,主要核心代码就是利用canvas画图,完整代码见大转盘抽奖,下载可用 希望给大家带来帮助 //转盘内部绘制 lottery.prototype.getCanvasI=function(){ let itemsArc=360/this.itemsNum //获取大转盘每等分的角度 this.ite

python实现大转盘抽奖效果

本文实例为大家分享了python实现大转盘抽奖的具体代码,供大家参考,具体内容如下 选择转盘中的某一个方框,来进行抽奖 import tkinter #导入线程模块 import threading import time #导入代码的sleep 代码休眠 root = tkinter.Tk() root.title('大转盘') root.minsize(300,300) #摆放按钮 btn1 = tkinter.Button(root,text = '樱桃',bg = 'red') btn1

Vue.js实现大屏数字滚动翻转效果

大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最终实现的效果: 整体思路: 在实现此效果之前,我们先来捋一下思路,用思维导图来设计一下我们的实现步骤,如下: 你可以审查元素,下载数字背景图片,复制图片地址,或者使用其他背景图片.背景颜色 有了以上的设计流程,我们先来简单实现一下: // CSS代码 <style> .box-item { position: relative; display: inline-

使用jQuery Rotare实现微信大转盘抽奖功能

很多公司到了年底都会做一些抽奖活动来刺激.吸引.粘住客户,比如抽奖转盘活动. 前几天用一个jqueryRotate插件实现了转盘的效果.比起那些很炫丽的flash是稍逊点,但也基本实现了需求 效果图: 实现这个其实蛮简单的,转动的效果用的jqueryRotate插件,所以只要判断每个奖荐对应的角度,然后设置指针的转动角度就可以了.比如关键的是jqueryRotate这个插件的用法. jqueryRotate的资料: 支持Internet Explorer 6.0+ .Firefox 2.0 .S

jquery转盘抽奖功能实现

 一.用到的素材 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery九宫格大转盘抽奖</title> <style> #lottery{width:570px;height:510