小程序 手指滑动+动画效果

<view animation="{{animation1}}" bindtouchstart='touchStart' bindtouchend="touchEnd"></view>

• animation：添加动画
• bindtouchstart：手指开始滑动事件
• bindtouchend：手指滑动结束事件

// 滑动开始
  touchStart(e){
    this.setData({
      touchStartX:e.changedTouches[0].clientX,
      touchStartY:e.changedTouches[0].clientY
    });
  },
  
 //滑动结束
  touchEnd(e){
    let that = this
    let trun = ''
    let touchEndX = e.changedTouches[0].clientX;
    let touchEndY = e.changedTouches[0].clientY;
    let touchStartX = that.data.touchStartX
    let touchStartY = that.data.touchStartY
    if (touchEndX - touchStartX > 50 && Math.abs(touchEndY - touchStartY) < 50) {      //右滑
      trun = 'right'
    } else if (touchEndX - touchStartX < -50 && Math.abs(touchEndY - touchStartY) < 50) {   //左滑
      trun = 'left'
    }
    that.animationFun(trun)
  },
  
 //添加动画
  animationFun(trun){
    let animation1 = wx.createAnimation({
      transformOrigin: "50% 50%",
      duration: 0,
      timingFunction: "ease",
      delay: 0
     });
     let modal = wx.getSystemInfoSync().screenWidth + 15
     animation1.translateX(modal).step({ duration: 10000 })
     this.setData({
      animation1: animation1.export()
     });
  },

• wx.getSystemInfoSync()：获取屏幕信息
• .step()：逐帧动画
• .export()：结束当前动画