溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

小程序如何實(shí)現(xiàn)抽獎(jiǎng)動畫

發(fā)布時(shí)間：2020-08-03 10:49:03 來源：億速云 閱讀：233 作者：小豬 欄目：web開發(fā)

這篇文章主要為大家展示了小程序如何實(shí)現(xiàn)抽獎(jiǎng)動畫，內(nèi)容簡而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。

所有的抽獎(jiǎng)都是由后臺計(jì)算后得到的，前臺只做動畫展示

<view class='top-banner center'> <!-- 輪播展示中獎(jiǎng)信息區(qū)域 -->
 <swiper autoplay="{{true}}" interval="{{1500}}" circular="{{true}}" vertical='{{true}}'>
  <block wx:for="{{prizeInfo}}" wx:key="index">
   <swiper-item>
    <view>{{item.name}}{{item.prize}}</view>
   </swiper-item>
  </block>
 </swiper>
</view>
<!-- 輪播結(jié)束 抽獎(jiǎng)轉(zhuǎn)盤 -->
<view class='turntable' bindtap='doLottery'>
 <image class='turntable-bj'  src='../../../img/turntable.png'></image>
 <image class='arrow' src='../../../img/arrow.png'>
 </image>
</view>

js:

const app = getApp();

var index = {
 data:{ 
  prizeInfo:[
   {
    name:'qiphon',
    prize:'5元'
   },
   {
    name:'qiphon23423',
    prize:'53元'
   },
   {
    name:'qipsdfhon',
    prize:'35元'
   }
  ],
  transformDeg:0, // 旋轉(zhuǎn)角度
  transition:'all 3s cubic-bezier(0.005, 1.340, 1.000, 0.865)',
  time:'999s'
 },
 onLoad(opt){
  console.log(opt)

 },
 onReady(){
  this.animation = wx.createAnimation({
   timingFunction:'esse-in-out',
   duration:2000
  });
  this.animationDeg = 360;
 },
 loadCoupons(){ // 加載獲獎(jiǎng)信息
  
 },
 doLottery(){ // 抽獎(jiǎng)
  var _this = this;
  if(this.aniRotate)return;
  this.aniRotate = true;
  this.setData({
   transformDeg:this.data.transformDeg + 360*900,
   time:'100s ease'
  })
  setTimeout(function(){
   console.log('請求完成'+_this.data.transformDeg) // setTimeout 模擬ajax請求
   _this.setData({
    transformDeg:-360*4,
    time:'3s ease'
   })
   setTimeout(function(){
    console.log('返回結(jié)果'+_this.data.transformDeg)
    _this.setData({
     transformDeg:360*2 + 0,
     time:'6s cubic-bezier(0.000, 0.765, 0.000, 0.955)'
    })
    setTimeout(function(){
     _this.aniRotate = false;
     wx.showModal({
      title:'中獎(jiǎng)信息',
      content:'恭喜獲得獎(jiǎng)品'
     })
    },6000)
   },2000)
  },3000)
 },
}
Page(index);

css:

.top-banner{
 background: #fff;
 padding:20rpx;
}
.top-banner swiper{
 height: 50rpx;
 line-height: 50rpx;
}
/* 轉(zhuǎn)盤 */
.turntable{
 position: relative;
 width: 100%;
 height: 530rpx;
}
.turntable-bj{
 display: block;
 margin:0 auto;
 width:600rpx;
 height: 530rpx;
}
.turntable .arrow{
 position: absolute;
 top:0;
 right:0;
 left:0;
 bottom:110rpx;
 margin:auto;
 width:93.5rpx;
 height: 212rpx;
}

以上就是關(guān)于小程序如何實(shí)現(xiàn)抽獎(jiǎng)動畫的內(nèi)容，如果你們有學(xué)習(xí)到知識或者技能，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手