微信小程序 底部弹出层 可触控移动动画效果

WXML

<view bindtap='showModal' class='click'><text>click</text></view>
<view class="commodity_screen {{showModalStatus?'active':''}}" animation="{{animationBG}}" bindtap="hideModal"></view>
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}" bindtouchstart="mytouchstart" catchtouchmove="mytouchmove" bindtouchend="mytouchend" catchtap='hideModal'></view>

WXSS

.click{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/*使屏幕变暗  */

.commodity_screen {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
  transition: all 2s ease;
}

.commodity_screen.active {
  display: block;
}

/*对话框 */

.commodity_attr_box {
  height: 1120rpx;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #f8f8f8;
  /* padding-top: 20rpx; */
}

JS

Page({
  data: {
  },
  mytouchstart: function (e) {
    console.log(e.timeStamp + '- touch start')
    var startPoint = [e.touches[0].pageX, e.touches[0].pageY]
    this.setData({
      startPoint: startPoint
    })
  },
  mytouchend: function (e) {
    console.log(e.timeStamp + '- touch end')
    console.log(e)
    var endPoint = [e.changedTouches[0].pageX, e.changedTouches[0].pageY]
    this.setData({
      endPoint: endPoint
    })

    var startPoint = this.data.startPoint
    var y = endPoint[1] - startPoint[1]
    console.log('最终移动了Y=' + y)
    if (y > 0) {
      // this.hideModal()
      var animation = wx.createAnimation({
        duration: 500,
        timingFunction: "ease",
        delay: 0
      })
      this.animation = animation
      animation.translateY(900).step()

      var animationBG = wx.createAnimation({
        duration: 500,
        timingFunction: 'ease',
      })
      animationBG.opacity(0).step()

      this.setData({
        animationData: animation.export(),
        animationBG: animationBG.export(),
      })

      setTimeout(function () {
        this.setData({
          showModalStatus: false
        })
      }.bind(this), 500)

      this.setData({
        noscroll: ''
      })
    } else {
      // this.showModal()
      var animation = wx.createAnimation({
        duration: 500,
        timingFunction: "ease",
        delay: 0
      })
      this.animation = animation
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export()
      })
    }
  },
  mytouchmove: function (e) {
    console.log(e.timeStamp + '- touch move')
    var curPoint = [e.touches[0].pageX, e.touches[0].pageY]
    var startPoint = this.data.startPoint
    var y = curPoint[1] - startPoint[1]
    console.log(y)

    var animation = wx.createAnimation({
      duration: 0,
      timingFunction: 'ease',
      delay: 0
    })
    this.animation = animation
    if (y > -50) {
      animation.translateY(y).step()
      this.setData({
        animationData: animation.export()
      })
    }
  },
  //显示对话框
  showModal: function () {
    // 显示遮罩层
    var animation = wx.createAnimation({
      duration: 500,
      timingFunction: "ease",
      delay: 0
    })
    animation.translateY(900).step()
    this.setData({
      animationData: animation.export(),
      showModalStatus: true
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 0)

    var animationBG = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease',
    })
    animationBG.opacity(0.5).step()
    this.setData({
      animationBG: animationBG.export()
    })

    this.setData({
      noscroll: 'noscroll'
    })
  },
  //隐藏对话框
  hideModal: function () {
    console.log('hideModal')
    // 隐藏遮罩层
    var animation = wx.createAnimation({
      duration: 500,
      timingFunction: "ease",
      delay: 0
    })
    animation.translateY(500).step()
    var animationBG = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease',
    })
    animationBG.opacity(0).step()
    this.setData({
      animationData: animation.export(),
      animationBG: animationBG.export()
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export(),
        showModalStatus: false
      })
    }.bind(this), 200)

    this.setData({
      noscroll: ''
    })
  },
})

问题：IOS 性能可以，安卓 性能堪忧