微信小程序之轉盤抽獎

  公司需求要作轉盤抽獎,剛開始也是踩了好幾個坑,跟你們一塊兒來分享下。剛開始搞微信小程序的轉盤抽獎,用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>
相關文章
相關標籤/搜索