Vue+CSS3实现转盘抽奖

mj 发布于2019-08-30 11:16 / 3001人阅读

摘要：最近有个转盘抽奖的需求，搜了一下现有的轮子，有的是用的动画函数实现的，有的是用绘图然后再用高频率的调用旋转方法，前者太老了没法简单移植到项目，后者感觉性能表现可能不会太好。核心思路是用以及实现旋转动画，使用和绘制出定位较为精确的轮盘奖项。

最近有个转盘抽奖的需求，搜了一下现有的轮子，有的是用jQuery的动画函数实现的，有的是用canvas绘图然后再用高频率的setTimeout调用旋转方法，前者太老了没法简单移植到vue项目，后者感觉性能表现可能不会太好。也有一些用CSS动画的方案，设计了加速-匀速-减速三个动画，再计算偏转角度让三个动画尽可能无缝衔接，但我感觉绕了大远路，应该有更简单轻量的实现方案。个人更倾向于用transition来实现，不过网上的例子感觉还不够好，有的倾斜文字都没有对齐，最后还是自己手写了一个。
无需jQuery，不用js脚本实现动画细节，动画效果完全连续无需衔接，支持动态设置2个以上任意数量的奖项。
核心思路是用transition以及rotate实现旋转动画，使用transition-origin和rotate绘制出定位较为精确的轮盘奖项。

代码及实例展示



  Prize number: {{ prizeNumber }}
  
  
   
    
      Start
    
    
      
        
          
            
              {{ item.name }}

html {
   background: #DD7C7D;
}

.wheel-wrapper {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .wheel-pointer {
    width: 60px;
    height: 60px;
    border-radius: 1000px;
    background: yellow;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 60px;
    z-index: 10;
  }
  .wheel-bg {
    width: 100%;
    height: 100%;
    border-radius: 1000px;
    overflow: hidden;
    transition: transform 4s ease-in-out;
    background: #7EEF97;
    
    &.freeze {
      transition: none;
      background: red;
    }
  }

  .prize-list {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
  }

  .prize-item-wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
  }

  .prize-item {
    width: 100%;
    height: 100%;
    transform-origin: bottom;

    .prize-name {
      padding: 16px 0;
    }

    .prize-icon {}
  }

var Main = {
  data() {
    return {
      freeze: false,
      rolling: false,
      wheelDeg: 0,
      prizeNumber: 8,
      prizeListOrigin: [
        {
          icon: "https://picsum.photos/40?random=1",
          name: "$10000"
        },
        {
          icon: "https://picsum.photos/40?random=6",
          name: "Thank you!"
        },
                {
          icon: "https://picsum.photos/40?random=2",
          name: "$500"
        },
        {
          icon: "https://picsum.photos/40?random=3",
          name: "$100"
        },
                {
          icon: "https://picsum.photos/40?random=6",
          name: "Thank you!"
        },
        {
          icon: "https://picsum.photos/40?random=4",
          name: "$50"
        },
        {
          icon: "https://picsum.photos/40?random=5",
          name: "$10"
        },
        {
          icon: "https://picsum.photos/40?random=6",
          name: "Thank you!"
        }
      ]
    };
  },
  computed: {
    prizeList () {
      return this.prizeListOrigin.slice(0, this.prizeNumber)
    }
  },
  methods: {
    onClickRotate() {
      if (this.rolling) {
        return;
      }
      this.rolling = true;
      const { wheelDeg, prizeList } = this;
      const random = Math.floor(Math.random() * (prizeList.length ));
      console.log(random);
      this.wheelDeg =
        wheelDeg -
        wheelDeg % 360 +
        6 * 360 +
        (360 - 360 / prizeList.length * random);
      setTimeout(() => {
        this.rolling = false;
        alert("Result：" + prizeList[random].name);
      }, 4500);
    }
  },
  watch: {
    prizeNumber () {
      this.freeze = true
      this.wheelDeg = 0
     
      setTimeout(() => {
         this.freeze = false
      }, 0)
    }
  }
};
var App = Vue.extend(Main);
new App().$mount("#app");

GPU云服务器云服务器转盘抽奖 php抽奖转盘大转盘抽奖活动大转盘抽奖算法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114882.html

转盘抽奖脚本自己撸

摘要：效果需求很多场景都需要做各种活动，抽奖最是司空见惯了，跑马灯的，转盘的，下面先花几分钟撸出一个转盘的吧，当然网上至少有一打的可供参考。但是我们只差一个定时器循环了接下里实现这个主循环，不断更新值就可以了。 demo 效果需求很多场景都需要做各种活动，抽奖最是司空见惯了，跑马灯的，转盘的，下面先花几分钟撸出一个转盘的吧，当然网上至少有一打的 demo 可供参考。真的只需要一点点时间而...

赵春朋 2019-08-23 11:01 评论0 收藏0
转盘抽奖-- 自己手撸

摘要：自己很菜，不可否认。所以上周日试试水，看看自己能否写个圆盘抽奖的。效果图代码外部圆内部园请输入外数字开始基础旋转的圆以自己的宽度的一半为，以父盒子的高度一半为，作为旋转点。自己很菜，不可否认。所以上周日试试水，看看自己能否写个圆盘抽奖的demo。// github L6zt开发思路布局 css rotate 布局；抽奖过渡效果，采用css3 transition；动态计算抽奖...

gaara 2019-08-23 10:44 评论0 收藏0
canvas之转盘抽奖

摘要：最近工作中重构了抽奖转盘，给大家提供一个开发转盘抽奖的思路需求转盘根据奖品数量不同而有变化目录结构由于业务需要所以开发了两个版本抽奖，和，不过部分只能替换图片，没有功能逻辑。最近工作中重构了抽奖转盘，给大家提供一个开发转盘抽奖的思路需求 1、转盘根据奖品数量不同而有变化 2、canvas 目录结构 showImg(https://segmentfault.com/img/bVbwL...

_ang 2019-08-26 10:58 评论0 收藏0