vue 简单实现 营销 转盘抽奖

请叫我海龟先生
• 阅读 1662

1.0 思路整理

转盘抽奖很常见,之前也没写过,现在有空来写写,分析如下:

1.1 转盘旋转 ? ----- 可以用 transform 的 rotate 来解决 1.2 旋转动画 ? ----- transition 过渡来处理 1.3 停留目标位置及中奖提示 ? ------ 通过控制旋转角度控制停留位置,中奖提示,考虑添加回调

1.1 开始行动

上面的思考,我们知道了大概要实现的步骤,首先我们搞张图片 vue 简单实现  营销 转盘抽奖 这个圆盘有 10 份,每一份 360/10 = 36deg,假设要停留在第二个---->20金币,顺时针(含初始位置并计为1),即 共需要旋转 (2 - 1)* 36 = 36,这样,我们可以得出,停留位置需要旋转的角度 = (target - 1)*36

1.2 中奖回调

上面的步骤,我们知道了如何控制到目标位置,那接下来就是事件通知,起初想的是,固定转动时间,然后开启定时器计时,很显然不靠谱,有没有什么可以在动画结束后就通知呢?transitionend,我找到了这个事件,可以监听元素动画结束事件,只不过有些兼容 这个好办

/**
动画结束事件兼容
**/
whichTransitionEvent(){
    let el = document.createElement('span'),
    transitions = {
        'transition':'transitionend',
        'OTransition':'oTransitionEnd',
        'MozTransition':'transitionend',
        'WebkitTransition':'webkitTransitionEnd'
    };
    for(let t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
    el = null;
}

2.0 完整示例

控制转动位置和事件通知都找到方法了,接下来开干! 栗子: vue 简单实现  营销 转盘抽奖

完整代码

<template>
  <div>
      <h3>转盘抽奖</h3>
      <div class="round_box" >
          <img class="img_rotate"  ref="rotImg" src="../assets/zhuan.png" alt="">
          <div class="center">
              <div class="pointer" ></div>
          </div>
      </div>
      <button @click="toDraw" >点击抽奖</button>
  </div>
</template>

<script>
export default {
    name:'rotaryDraw',
    data() {
        return {
            rotate: 0,
            resetRotate: 0,
            hitId: 1,// 1-10
            drawStatus: false
        }
    },
    async mounted() {
        await this.$nextTick();
        let evenTransition = this.whichTransitionEvent();
        let img = this.$refs.rotImg;
        let that = this;
        const hitAre = [ '30M流量包','20金币','20M流量包','10M流量包','5金币',
                         '谢谢参与','10金币','50M流量包','2金币','100M流量包'
                        ];
        // 监听 动画结束 
        img.addEventListener(evenTransition,tranHand,false);

        function tranHand() {
            // 复位
            that.resetRotate = that.rotate > 360 ? that.rotate % 360 : 0;
            img.style.transition = "none 0s ease 0s";
            img.style.transform = `rotate(${that.resetRotate}deg)`; 
            alert(`抽奖结果【 ${hitAre[that.hitId - 1]} 】`);
            that.drawStatus = false
        }
    },
    methods: {
        start() {
            this.$refs.rotImg.style.transition = "all 3s ease 0s";
            this.$refs.rotImg.style.transform = `rotate(${this.rotate}deg)`;
        },
        toDraw() {
            if(this.drawStatus){
                console.log('正在抽奖中');
                return
            }
            // 标记状态
            this.drawStatus = true
            /**
             * 圆盘共 10 份 每份 36度, 停位置(id)度数 (id - 1)*36 
             * 基数 3圈 360*4
             * this.rotate 当前角度
             * **/  
            let reset = 360 * 4;
            let idx = this.getRandomInt(1,11);
            // 设置命中
            this.hitId = idx;
            // 需要多转角度
            let addRotate = this.resetRotate > 0 ? 360 - this.resetRotate : 0;
            // 总共角度
            let allRotate = this.rotate + (idx - 1) * 36 + reset + addRotate;
            // 角度限制
            this.rotate = this.setRotate(allRotate);

            this.start()
        },
        // 递归计算角度 不超过 360*6
        setRotate(deg) {
            let rest = deg - 360;
            return  rest > 360*6 ? this.setRotate(rest) : deg;
        },
        getRandomInt(min, max) {
            // 向上收
            min = Math.ceil(min);
            // 向下收
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min)) + min; //不含最大值,含最小值
        },
        // 动画兼容
        whichTransitionEvent(){
            let el = document.createElement('span'),
            transitions = {
                'transition':'transitionend',
                'OTransition':'oTransitionEnd',
                'MozTransition':'transitionend',
                'WebkitTransition':'webkitTransitionEnd'
            };
            for(let t in transitions){
                if( el.style[t] !== undefined ){
                    return transitions[t];
                }
            }
            el = null;
        }
    }

}
</script>

<style lang="scss" >
.img_rotate{
    transform: rotate(0deg);
}
.round_box{
    width: 100%;
    max-width: 375px;
    position: relative;
    overflow: hidden;
    img{
        width: 100%;
    }
    .center{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        .pointer{
            width: 5px;
            height: 90px;
            background-color: #f40;
            position: absolute;
            top: -90px;
        }
        .pointer::before{
            content:'';
            width: 0;
            height: 0;
            border-top: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 15px solid #f40;
            border-left: 15px solid transparent;
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
        }
    }
}

</style>

3.0 tips

总体来说有几个点需要注意 1、动画开始前上锁 2、动画结束后通知,状态复位

/**
比如:
基数3圈 reset 360*3
停留位置 第二个 (2 - 1)* 36 = 36
总共角度 360*3 + 36
动画停止后,因为还要继续旋转,所以不可能把角度一直增加,因此需要复位 
360*3 + 36 其实可以考虑 就转了 36度,然后再增加需要转的角度
**/

3、继续旋转,因为我们计算是以 30M流量 为初始值的,所以在此旋转 仍然需要以 30M为起点,此时假设 现在停留位置是 300度,也就是说 再转 60度,也就回到了初始位置,本人也是按照这个思路进行复位的。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
VUE 实现一个简易老虎机
今天突然要做一个竖直滚动老虎机,可以设置中奖位置,以及中奖回调,然后再带点常规的滚动动画,还是有点意思,和之前的转盘抽奖有点类似,有兴趣可以看下。简单分析下UI,ui的话,就简单点,三个列表从下往上滚动,搞个框罩住css的活,应该简单。动画,老规矩,我们采用之前的方案,动态设置css,可以搞定。设置中奖位置,我们可以想传递
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这