公司需求要作轉盤抽獎,剛開始也是踩了好幾個坑,跟你們一塊兒來分享下。剛開始搞微信小程序的轉盤抽獎,用CSS3+定時器寫的。在微信開發工具中沒有問題,可是真機測試時發現動畫卡的要死,徹底是木偶人的感受。小程序
不得已,開始用微信的 wx.createAnimation
寫,廢話很少說,直接上代碼 ~微信小程序
(我用的是wepy工具開發的,因此要是不用wepy的話,要分開寫.js .wxss .wxml。有興趣的能夠在微信搜索 「糖果福利社」小程序,查看實際效果)微信
效果圖:微信開發
CSS部分:app
<style lang="less"> .wheel { position: absolute; top: calc((100% - 880rpx)/2); width: calc(100% - 60rpx); background-color: #fff; margin: 0 30rpx; border-radius: 16rpx; text-align: center; overflow: hidden; .wheel_wp { width: calc(100% - 120rpx); padding: 0 60rpx 60rpx 60rpx; height: 100%; image { width: 100%; height: 100%; } .wheel_pointer{ position: absolute; width: 150rpx; height: 150rpx; top: 344rpx; left: 50%; margin: -75rpx 0 0 -75rpx; transform-origin: 50% 50%; } .wheel_pointer image{ position: absolute; width: 150rpx; height: 238rpx; left: 0; top: -40rpx; } .times { font-size: 32rpx; height: 64rpx; text-align: center; line-height: 64rpx; margin-top: 24rpx; margin-bottom: 32rpx; view { display: inline-block; height: 64rpx; width: 180rpx; margin: 0 20rpx; background-color: #f4f4f4; border-radius: 8rpx; } button { display: inline-block; height: 40rpx; width: 40rpx; background-color: #FF4538; border-radius: 50%; color: #fff; padding: 0; line-height: 32rpx; font-size: 44rpx; position: relative; top: 8rpx; } } .invite_text { color: #666; font-size: 24rpx; } } .close { width: 100%; height: 60rpx; image { width: 24rpx; height: 24rpx; padding: 24rpx 24rpx 12rpx 24rpx; float: right; } } } </style>
HTML部分:less
<view class="wheel"> <view class="close"> <image bindtap="closeWin" src="https://o3pvuu23u.qnssl.com/48524237-601b-4611-b96d-01d99abd1ef2.png" /> </view> <view class="wheel_wp"> <image mode="widthFix" src="https://o3pvuu23u.qnssl.com/2f9bddd9-bb82-47ed-bd0f-9b1bee4463b8.png" animation="{{animationData}}" /> <view class="wheel_pointer" bindtap="start"> <image mode="widthFix" src="https://o3pvuu23u.qnssl.com/e36952f5-0458-467b-890c-61941877c0c9.png" /> </view> <view class="times"> <text>可抽</text> <view>{{times}}次</view> <button open-type="share">+</button> </view> <view class="invite_text">每邀請一個好友可得到一次抽獎機會</view> </view> </view>
JS部分:dom
<script> import wepy from 'wepy'
export default class wheel extends wepy.component { data = { deg: 0, // 初始化角度 singleAngle: 60, // 每片扇形的角度 awardNumer: 1, // 中獎區域 從1開始 isStart: false, animationData: {} } onLoad(options) { const animation = wx.createAnimation({ duration: 2000, timingFunction: 'ease-in-out' }) this.animation = animation } methods = { start() { if (this.isStart) return let tmpnum = Math.random() tmpnum = tmpnum < 0.5 ? tmpnum + 0.1 : tmpnum - 0.1 const endAddAngle = (this.awardNumer - 1 + tmpnum) * this.singleAngle + 360 // 中獎角度 const rangeAngle = (Math.floor(Math.random() * 4) + 4) * 360 // 隨機旋轉幾圈再中止 this.animation.rotate(this.deg + endAddAngle + rangeAngle).step() this.animationData = this.animation.export() this.deg += rangeAngle this.$apply() }, closeWin() { this.animation.rotate(0).step() this.animationData = this.animation.export() this.deg = 0 this.$apply() } } } </script>