微信小程序底部彈窗動畫

第一步，在組件里編寫彈窗的代碼

<!-- 活動類型彈框 -->
  <view class='bottomModel' wx:if="{{modelFlag}}" catchtouchmove="toCatch"></view>
  <view class='fixedModel' wx:if="{{modelFlag}}" animation='{{animationData}}'>
    <view class='wraps'>
      <view class='fixedTitle'>
        <view class='commony' bindtap='noShow'>取消</view>
        <view class='centerTitle'>活動類型</view>
        <view class='commony' bindtap='sure'>確定</view>
      </view>
      <view class='fixedContent'>
        <view class='contents' wx:for="{{arr}}"  wx:for-index="idx" wx:key="idx">
          <view class='items' bindtap='chooseItem' id="{{idx}}">
            <image class='icons' wx:if="{{item.checked}}" src='{{choose}}'></image>
            <image class='icons' wx:else src='{{quan}}'></image>
            <view>{{item.classify_name}}</view>
          </view>
        </view>
      </view>
    </view>  
  </view>

第二部，在對應的點擊事件中

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

第三部，隱藏彈框

noShow: function () {
    var that = this;
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'linear'
    })
    that.animation = animation
    animation.translateY(550).step()
    that.setData({
      animationData: animation.export()

    })
    setTimeout(function () {
      animation.translateY(0).step()
      that.setData({
        animationData: animation.export(),
        modelFlag: false
      })
    }, 200)
  },

注意：上面的550是你彈框的高度rpx，上面的catchtouchmove是彈框顯示的時候防止地圖的遮罩層滾動

toCatch:function(){
    return false;
  },

效果如下