小程序仿安卓动画滑动效果滑动动画效果实现
效果图:
源码
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
<view class='bg' >
<block wx:for='{{list}}' wx:key=''>
<image bindtouchend='touchend' bindtap='click' bindtouchstart='touchstart' id='{{index}}' animation='{{animation[index]}}' class='borner' style='top: {{index*80}}rpx;' src='{{item}}'></image>
</block>
</view>
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;
}