最近有個轉盤抽獎的需求，搜了一下現有的輪子，有的是用jQuery的動畫函數實現的，有的是用canvas繪圖然后再用高頻率的setTimeout調用旋轉方法，前者太老了沒法簡單移植到vue項目，后者感覺性能表現可能不會太好。也有一些用CSS動畫的方案，設計了加速-勻速-減速三個動畫，再計算偏轉角度讓三個動畫盡可能無縫銜接，但我感覺繞了大遠路，應該有更簡單輕量的實現方案。個人更傾向于用transition來實現，不過網上的例子感覺還不夠好，有的傾斜文字都沒有對齊，最后還是自己手寫了一個。
無需jQuery，不用js腳本實現動畫細節，動畫效果完全連續無需銜接，支持動態設置2個以上任意數量的獎項。
核心思路是用transition以及rotate實現旋轉動畫，使用transition-origin和rotate繪制出定位較為精確的輪盤獎項。
代碼及實例展示
<script src="//unpkg.com/vue/dist/vue.js"></script><span id="app"> <span>Prize number: {{ prizeNumber }}</span> <button type="button" @click="!rolling && prizeNumber < 8 && (prizeNumber++)" :disabled="rolling || prizeNumber === 8">Add</button> <button type="button" @click="!rolling && prizeNumber > 2 && (prizeNumber--)" :disabled="rolling || prizeNumber === 2">Remove</button> <div class="wheel-wrapper"> <div class="wheel-pointer" @click="onClickRotate" > Start </div> <div class="wheel-bg" :class="{freeze: freeze}" :style="`transform: rotate(${wheelDeg}deg)`" > <div class="prize-list"> <div class="prize-item-wrapper" v-for="(item,index) in prizeList" :key="index" > <div class="prize-item" :style="`transform: rotate(${(360/ prizeList.length) * index}deg)`" > <div class="prize-name"> {{ item.name }} </div> <div class="prize-icon"> <img :src="item.icon"> </div> </div> </div> </div> </div> </div></div>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");以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
