微信小程序抽獎動畫效果（老虎機(jī)上下滾動效果）

微信小程序抽獎效果實(shí)現(xiàn)，本來打算用小程序自帶的swiper來實(shí)現(xiàn)，嘗試了一下，發(fā)現(xiàn)控制它速度變化的時候會有明顯的卡頓，而且想要控制元素達(dá)到指定的位置也不是特別容易實(shí)現(xiàn)，于是想到用小程序提供的動畫效果api實(shí)現(xiàn)這個效果

1.抽獎動畫實(shí)現(xiàn)的構(gòu)思

首先固定一個框，把它的overflow設(shè)置為hidden，所有的動畫效果都只在這個框內(nèi)執(zhí)行，它的內(nèi)部是一個高度超過它的列表，控制這個列表滾動即可，示意圖如下

滾動示意圖.png

2.建立wxml文件如下

transform-container即為內(nèi)部需要滾動的列表區(qū)域，用animation綁定動畫效果，列表用for循環(huán)展示，超出的部分被隱藏

<!--index.wxml-->
<view class="container">
  <!-- 滾動區(qū)域 -->
  <view class="scroll-container">
    <view class="transform-container" animation="{{animationData}}">
      <view wx:for="{{scrollText}}" wx:key="*this" class="scroll-text">
        {{item}}
      </view>
    </view>
  </view>
  <!-- 按鈕 -->
  <button type="primary" bindtap="startScroll">開啟</button>
  <button bindtap="reset">重置</button>
</view>

3.建立wxss文件如下

/**index.wxss**/
.scroll-container{
  width: 750rpx;
  height: 300rpx;
  text-align: center;
  background: #DDD;
  overflow: hidden;
}
.scroll-text{
  line-height: 300rpx;
  font-size: 50rpx;
  font-weight: bold;
}
button{
  margin-top: 20rpx;
}

3.建立js文件如下

相關(guān)的功能代碼中都有注釋，這里不做贅述

//index.js

Page({
  data: {
    scrollText: ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff', 'ggg', 'hhh', 'iii', 'jjj', 'kkk'], // 滾動的文字
    animationData: null // 綁定的動畫效果
  },
  // 開始滾動
  startScroll () {
    console.log('開啟')
    // 創(chuàng)建一個動畫實(shí)例
    let animation = wx.createAnimation({
      duration: 5000,
      timingFunction: 'ease'
    })
    // 獲取元素總高度
    let height =  (this.data.scrollText.length - 1) * 300
    // 向上移動
    animation.translateY(-height + 'rpx').step()
    // 將動畫效果賦值
    this.setData({
      animationData: animation.export()
    })
  },
  // 重置
  reset () {
    let animation = wx.createAnimation({
      duration: 0
    })
    this.setData({
      animationData: animation.translateY(0).step().export()
    })
  }
})

4.運(yùn)行小程序，即可實(shí)現(xiàn)對應(yīng)的效果

滾動動畫效果.gif