小程序仿安卓动画滑动效果滑动动画效果实现

微信小程序开发交流qq群   173683895

   承接微信小程序开发。扫码加微信。

效果图：

 

源码

var start_clientY; //记录当前滑动开始的值
var end_clientY; //记录当前滑动结束的值
var animation = wx.createAnimation({
  duration: '400'
}); //初始化动画

var history_distance = 0; //历史距离
Page({
  // 滑动开始
  touchstart: function(e) {
    start_clientY = e.changedTouches[0].clientY
    // console.log('touchstart', start_clientY)
  },
  // 滑动结束
  touchend: function(e) {
    console.log('e', e)
    end_clientY = e.changedTouches[0].clientY;
    var item = Number(e.target.id);
    var end = end_clientY - start_clientY
    console.log('滑动距离', end, '当前下标', item)

    // 不是第一张j   Math.abs(end)=> 求绝对值
    if (Math.abs(end) < 20) {
      wx.showToast({
        title: '点击了' + this.data.list[item].img,
        icon: 'none'
      })
      return
    };

    // 如果是下拉第一张图片，整体动画
    if (item == 0) {
      for (var i = 0; i < this.data.list.length; i++) {
        animation.translateY(80 * i!=0?80*i:80).step();
        this.setData({
          ['animation[' + i + ']']: animation.export(),
        })
      }
      setTimeout(() => {
        for (var i = 0; i < this.data.list.length; i++) {
          animation.translateY(0).step();
          this.setData({
            ['animation[' + i + ']']: animation.export(),
          })
        }
      }, 450)
      return
    }

    //开始滑动当前的 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    // 需要计算缓存，默认没有，所以在onLoad先初始化，让默认有
    history_distance = this.data.animation[item].actions[0].animates[0].args[0];
    let item_args = end + history_distance > 0 ? end + history_distance : 0;
    console.log('当前滑动的图片滑动距离', item_args)
    animation.translateY(item_args).step();

    this.setData({
      ['animation[' + item + ']']: animation.export(),
    })
    //开始滑动当前的 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

    // 如果历史滑动大于0，就是往下拉
    if (end != 0) {
      for (var i = 1; i < this.data.list.length; i++) {

        // 让内层的都跟着滑动
        var _item_1 = item - i;
        if (_item_1 > 0) {
          animation.translateY(item_args / 2 / i).step();
          this.setData({
            ['animation[' + _item_1 + ']']: animation.export(),
          })
        }

        // 如果不是最后一张图并且小于图片数组的长度,让外层的都跟着滑动
        var _item_2 = item + i;
        if (item != this.data.list.length - 1 && _item_2 < this.data.list.length) {
          animation.translateY(item_args * 2 * i).step();
          this.setData({
            ['animation[' + _item_2 + ']']: animation.export(),
          })
        }

      }
    } else {
      // 如果历史滑动等于0，重新初始化
      this.inti();
    }


  },
  // ================================================================================================================================
  onShow() {
    // 初始化
    this.inti();
  },
  onLoad(e) {},
  // 初始化
  inti() {
    for (var i = 0; i < this.data.list.length; i++) {
      this.setData({
        ['animation[' + i + '].actions[0].animates[0].args[0]']: 0,
      })
    }
  },
  data: {
    windowWidth: wx.getSystemInfoSync().windowWidth,
    list: ['https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=935292084,2640874667&fm=27&gp=0.jpg', 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3205470526,1518785822&fm=27&gp=0.jpg', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=873265023,1618187578&fm=27&gp=0.jpg','https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3967239004,1951414302&fm=27&gp=0.jpg'],
    animationArr: [],
    animation: [],
    scrollTop: 100
  },
})

a

css

page{
  height: 100%;
}
.bg{
  height: 100%;
  width: 100%;
  position: fixed;
}
.top_title{
  position: relative;
}
image{
  margin-top: 50rpx;
  width: 90%;
  height: 90%;
  margin-left: 5%;
  position: absolute;
  border-radius: 10rpx;
}