使用vue怎么實(shí)現(xiàn)一個(gè)轉(zhuǎn)盤抽獎(jiǎng)功能

本篇文章為大家展示了使用vue怎么實(shí)現(xiàn)一個(gè)轉(zhuǎn)盤抽獎(jiǎng)功能，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

Vue的優(yōu)點(diǎn)

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

1.0 思路整理

轉(zhuǎn)盤抽獎(jiǎng)很常見，之前也沒寫過，現(xiàn)在有空來寫寫，分析如下：

1.1 轉(zhuǎn)盤旋轉(zhuǎn) ----- 可以用 transform 的 rotate 來解決
1.2 旋轉(zhuǎn)動(dòng)畫 ----- transition 過渡來處理
1.3 停留目標(biāo)位置及中獎(jiǎng)提示 ？ ------ 通過控制旋轉(zhuǎn)角度控制停留位置，中獎(jiǎng)提示，考慮添加回調(diào)

1.1 開始行動(dòng)

上面的思考，我們知道了大概要實(shí)現(xiàn)的步驟，首先我們搞張圖片

這個(gè)圓盤有 10 份，每一份 360/10 = 36deg，假設(shè)要停留在第二個(gè)---->20金幣，順時(shí)針（含初始位置并計(jì)為1），即 共需要旋轉(zhuǎn) (2 - 1)* 36 = 36，這樣，我們可以得出，停留位置需要旋轉(zhuǎn)的角度 = (target - 1)*36。

1.2 中獎(jiǎng)回調(diào)

上面的步驟，我們知道了如何控制到目標(biāo)位置，那接下來就是事件通知，起初想的是，固定轉(zhuǎn)動(dòng)時(shí)間，然后開啟定時(shí)器計(jì)時(shí)，很顯然不靠譜，有沒有什么可以在動(dòng)畫結(jié)束后就通知呢？transitionend，我找到了這個(gè)事件，可以監(jiān)聽元素動(dòng)畫結(jié)束事件，只不過有些兼容 這個(gè)好辦

/**
動(dòng)畫結(jié)束事件兼容
**/
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 完整示例

控制轉(zhuǎn)動(dòng)位置和事件通知都找到方法了，接下來開干！

栗子：

完整代碼

<template>
 <div>
 <h4>轉(zhuǎn)盤抽獎(jiǎng)</h4>
 <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" >點(diǎn)擊抽獎(jiǎng)</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流量包'
   ];
 // 監(jiān)聽 動(dòng)畫結(jié)束 
 img.addEventListener(evenTransition,tranHand,false);

 function tranHand() {
  // 復(fù)位
  that.resetRotate = that.rotate > 360 ? that.rotate % 360 : 0;
  img.style.transition = "none 0s ease 0s";
  img.style.transform = `rotate(${that.resetRotate}deg)`; 
  alert(`抽獎(jiǎng)結(jié)果【 ${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('正在抽獎(jiǎng)中');
  return
  }
  // 標(biāo)記狀態(tài)
  this.drawStatus = true
  /**
  * 圓盤共 10 份 每份 36度, 停位置(id)度數(shù) (id - 1)*36 
  * 基數(shù) 3圈 360*4
  * this.rotate 當(dāng)前角度
  * **/ 
  let reset = 360 * 4;
  let idx = this.getRandomInt(1,11);
  // 設(shè)置命中
  this.hitId = idx;
  // 需要多轉(zhuǎn)角度
  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()
 },
 // 遞歸計(jì)算角度 不超過 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; //不含最大值，含最小值
 },
 // 動(dòng)畫兼容
 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

總體來說有幾個(gè)點(diǎn)需要注意

1、動(dòng)畫開始前上鎖

2、動(dòng)畫結(jié)束后通知，狀態(tài)復(fù)位

/**
比如：
基數(shù)3圈 reset 360*3
停留位置 第二個(gè) （2 - 1）* 36 = 36
總共角度 360*3 + 36
動(dòng)畫停止后，因?yàn)檫€要繼續(xù)旋轉(zhuǎn)，所以不可能把角度一直增加，因此需要復(fù)位 
360*3 + 36 其實(shí)可以考慮 就轉(zhuǎn)了 36度，然后再增加需要轉(zhuǎn)的角度
**/

上述內(nèi)容就是使用vue怎么實(shí)現(xiàn)一個(gè)轉(zhuǎn)盤抽獎(jiǎng)功能，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。