微信小程序底部彈框動畫

在寫小程序的時候，一般會碰到底部彈出動畫，就像下面這樣的效果

直接進入正題

https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html

1.首先需要寫點擊觸發事件

<view class='text' bindtap='chooseSezi'>請選擇：顏色/尺碼</view>

這是點擊之后需要彈出的內容，為了方便我把里面的內容去掉了，maskLayer是遮罩層，choose是內容

<!--隱藏區域  -->
<view class='maskLayer' wx:if="{{chooseSize}}" bindtap='hideModal'></view>
<view class='choose' wx:if="{{chooseSize}}" animation='{{animationData}}'>
  這里面是內容
</view>

2.進入js寫點擊事件

先看這里，再看下面的方法：

data: {
    chooseSize:false,
    animationData:{}
  }

chooseSezi:function(e){
    // 用that取代this，防止不必要的情況發生
    var that = this;
    // 創建一個動畫實例
    var animation  = wx.createAnimation({
      // 動畫持續時間
        duration:500,
        // 定義動畫效果，當前是勻速
        timingFunction:'linear'
      })
      // 將該變量賦值給當前動畫
    that.animation = animation
    // 先在y軸偏移，然后用step()完成一個動畫
    animation.translateY(200).step()
    // 用setData改變當前動畫
    that.setData({
      // 通過export()方法導出數據
      animationData: animation.export(),
      // 改變view里面的Wx：if
      chooseSize:true
    })
    // 設置setTimeout來改變y軸偏移量，實現有感覺的滑動
    setTimeout(function(){
      animation.translateY(0).step()
      that.setData({
        animationData: animation.export()
      })
    },200)
  },

 現在點擊view，內容已經出現了，如何讓他消失呢？這個就很簡單，同上面的方法一樣。當然如果你想更簡單的方法，那就直接點擊遮罩層，讓wx:if={{chooseSize}},在js里面改變chooseSize:false就行了

下面是點擊遮罩層，隱藏動畫

  hideModal:function(e){
    var that = this;
    var animation = wx.createAnimation({
      duration:1000,
      timingFunction:'linear'
    })
    that.animation = animation
    animation.translateY(200).step()
    that.setData({
      animationData:animation.export()
      
    })
    setTimeout(function () {
      animation.translateY(0).step()
      that.setData({
        animationData: animation.export(),
        chooseSize: false
      })
    }, 200)
  }

ok了