Vue+CSS3實現轉盤抽獎

mj 發布于2019-08-30 11:16 / 3026人閱讀

摘要：最近有個轉盤抽獎的需求，搜了一下現有的輪子，有的是用的動畫函數實現的，有的是用繪圖然后再用高頻率的調用旋轉方法，前者太老了沒法簡單移植到項目，后者感覺性能表現可能不會太好。核心思路是用以及實現旋轉動畫，使用和繪制出定位較為精確的輪盤獎項。

最近有個轉盤抽獎的需求，搜了一下現有的輪子，有的是用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抽獎轉盤大轉盤抽獎活動大轉盤抽獎算法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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