微信小程序之转盘抽奖效果

微信小程序之转盘抽奖效果

效果图：

代码：
html:

<view class="background">
  <image class="back" mode="widthFix" src="../../img/back-1.jpg" />
  <image class="jiang" mode="widthFix" src="../../img/back-jiang.png" animation="{
      {rotateData}}" />
<image class="zhen" mode="widthFix" src="../../img/back-zhen.png" bindtap="start" />
view>

css:

.background{
     
  position: relative;
  width: 640rpx;
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
}
.back{
     
  position: relative;
  width: 100%;
}
.jiang{
     
  position: absolute;
  top: 75rpx;
  left: 105rpx;
  width: 460rpx;
}
.zhen{
     
  position: absolute;
  top: 180rpx;
  left:250rpx;
  width: 180rpx;
}

js:

let animation = wx.createAnimation({
     
  duration:4000,
  timingFunction:'ease',
})

let animationclear = wx.createAnimation({
     
  duration: 0,
  timingFunction: 'ease',
})

Page({
     
  data:{
     
    rotateData:{
     },
    turning:false,

  },
  start:function(){
     
    // animation.rotate(1200).step();
    // this.setData({
     
    //   rotateData:animation.export()
    // })
    // console.log(this.data.turning);
    if (!this.data.turning){
           
      console.log(this.data.turning);
      animationclear.rotate(0).step();
      this.setData({
     
        rotateData: animationclear.export(),
      }) //清除之前旋转度数；
      let rdm = 0; //随机度数
      let cat = 51.4;
      rdm = Math.floor(Math.random()*3600+1200); 

      animation.rotate(rdm).step();
      this.setData({
     
        rotateData:animation.export(),
        turning:true,
      })
      
      console.log(this.data.turning);
      setTimeout(()=>{
     
        this.setData({
     
          turning:false
        })        
        console.log(this.data.turning);
        let num = rdm % 360;
        if(num <= cat*1){
     
          showModal('4999元！')
        }else if(num <=cat*2){
     
          showModal('50元！')
        } else if (num <= cat * 3) {
     
          showModal('10元！')
        } else if (num <= cat * 4) {
     
          showModal('5元！')
        } else if (num <= cat * 5) {
     
          showModal('免息服务')
        } else if (num <= cat * 6) {
     
          showModal('提高白条额度')
        } else if (num <= cat * 7) {
     
          showModal('未中奖！')
        }
      },5000)
    }else{
     
      wx.showToast({
     
        title: '正在抽奖中！',
        icon:'none'
      })
    }
  }
})

function showModal(str){
     
  wx.showModal({
     
    title: '提示',
    content: str
  })
}

图片
back-1.jpg
back-jiang.png
back-zhen.png

 

相关animation动画效果：

<view animation="{
      {animationData}}" style="background:red;height:100rpx;width:100rpx" 
bindtap="rotateAndScaleThenTranslate">view>

//index.js
//获取应用实例

Page({
     
  data: {
     
    animationData: {
     }
  },
  onShow: function () {
     
    var animation = wx.createAnimation({
     
      duration: 1000,
      timingFunction: 'ease',
    })

    this.animation = animation

    animation.scale(2, 2).rotate(45).step()

    this.setData({
     
      animationData: animation.export()
    })

    setTimeout(function () {
     
      animation.translate(30).step()
      this.setData({
     
        animationData: animation.export()
      })
    }.bind(this), 1000)
  },
  rotateAndScale: function () {
     
    // 旋转同时放大
    this.animation.rotate(-30).scale(5, 5).step()
    this.setData({
     
      animationData: this.animation.export()
    })
  },
  rotateThenScale: function () {
     
    // 先旋转后放大
    this.animation.rotate(-5).step()
    this.animation.scale(5, 5).step()
    this.setData({
     
      animationData: this.animation.export()
    })
  },
  rotateAndScaleThenTranslate: function () {
     
    // 先旋转同时放大，然后平移
    this.animation.rotate(0).scale(3, 3).step()
    this.animation.translate(100, 100).step({
      duration: 1000 })
    this.setData({
     
      animationData: this.animation.export()
    })
  }
})

相关链接：

小程序官网 ：https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.html