微信小程序（19）-- 從底部向上滑出的動畫效果

從底部向上滑出的動畫效果：

用到了小程序的觸摸事件bindtouchmove，以及創建一個annimation對象，完成動畫操作之后使用animation這個對象的export()方法導出動畫數據。

為了阻止多次向上向下滑動，出現多次動畫效果，需要增加 ifStop 來判斷。

根據 e.touches[0].clientY 的對比，顯示相應的動畫效果。

  

<!--logs.wxml-->
<view class="box-out" bindtouchstart='startFun' bindtouchmove='showFun' bindtouchend='hideFun'>
  <view class="content">
    <view>日志內容</view>
    <view>日志內容</view>
    <view>日志內容</view>
    <view>日志內容</view>
    <view>日志內容</view>
    <view>日志內容</view>
    <view>日志內容</view>
    <view>日志內容</view>
    <view>日志內容</view>
    <view>日志內容</view>
    <view>日志內容</view>
    <view>日志內容</view>
    <view>日志內容</view>
    <view>日志內容</view>
    <view>日志內容</view>
    <view>日志內容</view>
    <view>日志內容</view>
    <view>日志內容</view>
    <view>日志內容</view>
    <view>日志內容</view>
    <view bindtap='clickFun'>點擊日志內容1</view>
    <view>點擊日志內容2</view>
    <view>點擊日志內容3</view>
    <view>點擊日志內容4</view>
  </view>
  <view class="modalDetail" hidden="{{isShow}}"></view>
    <scroll-view class="modalDetail__box" scroll-y="{{true}}" style='height: 600rpx;background:#fff;transform: translateY(600px);' animation="{{animationData}}">
      你的展示內容寫這里你的展示內容寫這里 你的展示內容寫這里你的展示內容寫這里你的展示內容寫這里你的展示內容寫這里你的展示內容寫這里你的展示內容寫這里你的展示內容寫這里你的展示內容寫這里你的展示內容寫這里你的展示內容寫這里你的展示內容寫這里你的展示內容寫這里你的展示內容寫這里你的展示內容寫這里
    </scroll-view>
</view>

.modalDetail{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
}
.modalDetail__box{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    z-index: 10000;
}

//logs.js

Page({
  data: {
    animationData:'',
    startclientY:'',
    isShow: true,//底部遮罩
    ifStop: true //阻止多次同方向滑動，多次動畫效果
  },
  onLoad: function () {
    
  },
  clickFun: function () {
    console.log('內容1')
  },
  // bindtouchstart
  startFun: function(e){
    console.log(e,'start')
    this.setData({
      startclientY:e.touches[0].clientY   //起始點的clientY
    })
  },
  // bindtouchmove
  showFun: function (e) {
    if (e.touches[0].clientY > this.data.startclientY){
      console.log(this.data.ifStop,'隱藏')
      if(this.data.ifStop){
        return;
      }
      console.log('move')
      // 隱藏遮罩層
      var animation = wx.createAnimation({
        duration: 500,
        timingFunction: "linear",
        delay: 0 })
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export(),
        ifStop: true
      })
      setTimeout(function () {
        animation.translateY(600).step()
        this.setData({
          animationData: animation.export(),
          isShow: true
        })
      }.bind(this), 500)
    }else{
      console.log(this.data.ifStop,'顯示')
      if(!this.data.ifStop){
        return;
      }
      console.log('move')
      // 顯示遮罩層
      var animation = wx.createAnimation({
        duration: 500,
        timingFunction: "linear",
        delay: 0
      })
      animation.translateY(600).step()
      this.setData({
        animationData: animation.export(),
        ifStop: false
      })
      setTimeout(function () {
        animation.translateY(0).step()
        this.setData({
          animationData: animation.export(),
          isShow: false
        })
      }.bind(this), 500)
    }
    
  },
  // bindtouchend
  hideFun: function (e) {
    console.log(e,'end')
  },
})