vue 简单实现 营销 转盘抽奖

请叫我海龟先生 等级 552 0 1

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度,也就回到了初始位置,本人也是按照这个思路进行复位的。

收藏
评论区

相关推荐

教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)
前言 本文将带大家一步步实现一个H5拼图小游戏,考虑到H5游戏的轻量级和代码体积,我没有使用react或vue这些框架,而采用我自己写的dom库和原生javascript来实现业务功能,具体库代码可见我的文章如何用不到200行代码写一款属于自己的js类库(https://juejin.im/post/6844903880707293198),构建工具我采
vue-toy: 200行代码模拟Vue实现
vuetoy 200行左右代码模拟vue实现,视图渲染部分使用React来代替Sanbbdom,欢迎Star。 项目地址:https://github.com/bplok20010/vuetoy(https://github.com/bplok20010/vuetoy) codesandbox示例(https://codes
Vue3 的 15 个常用 API
来自公众号:前端印象 本文会频繁地对比Vue2来介绍Vue3,也将对各个API结合代码实例讲解,这既是对自己知识的总结,也希望能帮助到大家 一、前言 大家都知道,现在Vue3的各个版本已经陆续发布了,并且有很多的团队已经着手各个库的开发与Vue2向Vue3的升级,我们当然也不能落后,所以赶紧将你手中的Vue2升级到Vue3,跟着本文一起学
基于Vue实现一个有点意思的拼拼乐小游戏
笔者去年曾写过一个类似的拼拼乐小游戏,技术栈采用自己的Xuery框架和原生javascript实现的,脚手架采用gulp来实现,为了满足对vue的需求,笔者再次使用vue生态将其重构,脚手架采用比较火的vuecli。 前言 为了加深大家对vue的了解和vue项目实战,笔者采用vue生态来重构此项目,方便大家学习和探索。技术栈如下: vuecli4
vue实现世界疫情地图(点击进入子地图)
点击进入子地图目前只实现了中国模块 数据来源,腾讯实时疫情(https://news.qq.com/zt2020/page/feiyan.htm/global),中国疫情网(https://www.ncovchina.com/data.html) 原本只想做中国模块,后来想了想,做个世界的吧 使用axios和echarts,elementui的
前端 滚动到目标元素位置 VUE 版本
1、前言 想起之前一次在写一个小程序商城时候,详情页的类似锚点的跳转花了我不少时间,因为刚写,对小程序滚动,滚动距离那套不熟悉加之本身对什么滚动高度,元素距离顶部距离不是很了解,花了挺长时间的,这几天有空,就研究了下。 2、先看效果 在这里插入图片描述(https://imghelloworld.osscnbeijing.aliyuncs.c
基于Vue3+TypeScript+ Vue-Cli4.0构建手机端模板脚手架
vue3h5template基于 Vue3TypeScript VueCli4.0 vant ui sass rem 适配方案axios 封装 jssdk 配置 vconsole 移动端调试,构建手机端模板脚手架项目地址: 建议手机端查看 Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本
有关CSS预编译、管理工具和网络安全的相关面试题
我经常会听到一些想入行前端的人问,前端开发需要学习哪些技术?其实,除了核心的HTML、CSS、JavaScript技术外,像CSS预编译、前端框架,如Vue,React、Node、Angular;代码管理工具,如git,代码编辑器,sublime text,还有测试,网络安全等相关技术也是需要会一些。当然要求可能不会那么高,但至少要懂一些。所有今天准备了一些
vue-生命周期
vue生命周期 即为一个组件从出生到死亡的一个完整周期,主要包括以下4个阶段:创建,挂载,更新,销毁 创建前:beforeCreate, 创建后:created 挂载前:beforeMount, 挂载后:mounted 更新前:beforeUpdate, 更新后:updated 销毁前:beforeDestroy, 销毁后:destroye
浅谈Vue.js
作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的兴趣。 注:本文介绍的是Vue1.×,目前Vue已经升级至2.×,功能和语法上有一定升级和修改,想了解2.×的请移步:Vue.js简介
11个基于vue的UI框架_U.R.M.L
Element UI 来自中国,由与 Mint UI 相同的开发者所创建。Element UI 是用于 Web 和桌面应用程序的桌面 UI 工具包,如果你需要开发 Electron 应用,这个库会是你的理想之选。 iView 是一个 UI 工具包,其中包含简洁又设计优雅的小部件和各种组件。iView 团队维护非常及时,最近一次的更新在19年3
Vue进阶(四十七):面试必备:2021 Vue经典面试题总结(含答案)_IT全栈 华强工作室
面试必备:2021 Vue经典面试题总结(含答案)一、什么是MVVM?
前端培训-Vue专题之Vue基础
简介特点:MVVM框架,双向绑定,数据驱动,单页面,组件化。 区别Vue 和 jQuery 的区别:不直接操作DOM,而是操作数据。案例:Hello World 你好,世界HTML代码:xml<h1msg</h1jQuery实现javascript$("h1").text("你好,世界");Vue 实现javascriptthis.msg '你好,世界'
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。 language JavaScript "name": "vuecliversion2", "version": "1.0.0", "desc
javascript实践教程-01-javascript介绍
本节目标1. 了解javascript是什么。2. 了解javascript能干什么。 内容摘要本篇介绍了javascript是什么,为什么要用javascript,ECMAScript标准是什么等。阅读时间大约510分钟。 javascript是什么?javascript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于HT