Page({
data: {
animationData: null,
lastX: 0, //滑动开始x轴位置
lastY: 0, //滑动开始y轴位置
text: "没有滑动",
currentGesture: 0, //标识手势
anim:null,
big:null,
big1: null,
img:'',
da:[{name:'张三',age:18,like:'打篮球'},
{name:'李四',age:19,like:'跑步'},
{name:'王五',age:20,like:'喝茶'}
],
xi:{ name: '张三', age: 18, like: '打篮球'}
},
handletouchmove: function (event) {
var currentX = event.touches[0].pageX;
var currentY = event.touches[0].pageY;
var tx = currentX - this.data.lastX;
var ty = currentY - this.data.lastY;
var text = ""
//左右方向滑动
if (Math.abs(tx) > Math.abs(ty)) {
if (tx < -10) {
text = "向左滑动";
this.skew();
// this.data.hide = false;
// this.setData({
// hide: true,
// })
this.bigo()
this.ani_smallbigOut();
this.alphaClick()
this.right()
// this.sk()
// this.leftSlideIn()
} else if (tx > 10) {
text = "向右滑动";
this.ani_smallbigOut();
this.bigo1();
this.skew1();
this.left();
// 一个序列
// 1.沿x/y轴,逐渐淡化消失!
// 2.背景心形进行缩放;
// 3.新的数据淡化加载进来;
// this.ani_smallbigOut();
// this.skew();
// this.rotate3d()
// this.data.hide = false;
// this.setData({
// hide: false,
// })
}
}
//上下方向滑动
else {
if (ty < 0)
text = "向上滑动"
else if (ty > 0)
text = "向下滑动"
// this.leftSlideIn();
}
//将当前坐标进行保存以进行下一次计算
this.data.lastX = currentX
this.data.lastY = currentY
this.setData({
text: text,
});
},
//滑动开始事件
handletouchtart: function(event) {
this.data.lastX = event.touches[0].pageX
this.data.lastY = event.touches[0].pageY
},
//滑动结束事件
handletouchend: function (event) {
this.data.currentGesture = 0;
this.setData({
text: "没有滑动",
});
},
ani_smallbigOut: function () {
let that = this
// console.log("animate")
var animation = wx.createAnimation({
duration: 750,
timingFunction: 'ease',
})
this.animation = animation
animation.scale(0.2, 0.2).step()
animation.scale(1, 1).step()
that.setData({
animationData: animation.export(),
})
setTimeout(function () {
that.setData({
flag: false
})
}, 1500)
},
bigo: function () {
let that = this
// console.log("animate")
var big = wx.createAnimation({
duration: 750,
timingFunction: 'ease',
})
this.big = big
big.scale(1.5, 1.5).step()
big.scale(1, 1).step()
that.setData({
big: big.export(),
})
setTimeout(function () {
that.setData({
flag: false
})
}, 1500)
},
bigo1: function () {
let that = this
// console.log("animate")
var big1 = wx.createAnimation({
duration: 750,
timingFunction: 'ease',
})
this.big1 = big1
big1.scale(1.5, 1.5).step()
big1.scale(1, 1).step()
that.setData({
big1: big1.export(),
})
setTimeout(function () {
that.setData({
flag: false
})
}, 1500)
},
skew:function(){
let that = this
// console.log("animate")
var anim = wx.createAnimation({
duration: 400,
timingFunction: 'ease-in-out',
})
this.anim = anim;
// anim.rotate(-45).translate(-300, -200).opacity(0).step(10);
// anim.rotate(0).translate(0, 0).step(10);
// anim.scale(0.4, 0.4).step(0);
// anim.scale(1, 1).opacity(1).step(0);
anim.rotate(-45).translate(-300, -200).opacity(0).step(1000);
anim.rotate(0).translate(0, 0).step(10);
anim.scale(0.2, 0.2).step(0);
anim.scale(1, 1).opacity(1).step(0);
// anim.step();
// anim.skew(0.2, 0.2).step()
that.setData({
anim: anim.export(),
})
setTimeout(function () {
that.setData({
flag: false
})
}, 1500)
},
skew1: function () {
let that = this
// console.log("animate")
var anim = wx.createAnimation({
duration: 400,
timingFunction: 'ease-in-out',
})
this.anim = anim;
anim.rotate(45).translate(700, -400).opacity(0).step(1000);
anim.rotate(0).translate(0, 0).step(10);
anim.scale(0.2, 0.2).step(0);
anim.scale(1, 1).opacity(1).step(0);
// anim.step();
// anim.skew(0.2, 0.2).step()
that.setData({
anim: anim.export(),
})
setTimeout(function () {
that.setData({
flag: false
})
}, 1500)
},
sk: function () {
let that = this
// console.log("animate")
var anim = wx.createAnimation({
duration: 750,
timingFunction: 'ease',
})
this.anim = anim;
anim.scale(0.2, 0.2).step()
anim.scale(1, 1).step()
that.setData({
anim: anim.export(),
})
setTimeout(function () {
that.setData({
flag: true
})
}, 1500)
},
rotate3d: function() {
let that = this
var anim = wx.createAnimation({
duration: 1000,
timingFunction: 'ease'
})
//rotate3d: 参数 x,y,z轴, 翻转度数
//其中x,y,z轴为0-1范围,y轴设置为1,代表以y轴为旋转轴
this.anim = anim;
anim.rotate3d(0, 1, 0, 180).step()
that.setData({
anim: anim.export()
})
setTimeout(function () {
that.setData({
flag: true
})
}, 1500)
},
skewXY: function() {
var anim = wx.createAnimation({
duration: 1000,
timingFunction: 'ease'
})
//参数: ax,[ay] 参数范围-180~180;一个参数时,Y轴坐标不变,X轴坐标延顺时针倾斜ax度;两个参数时,分别在X轴倾斜ax度,在Y轴倾斜ay度
anim.skew(0, 10).step()
this.setData({
anim: anim.export()
})
},
//js
leftSlideIn: function() {
let anim = wx.createAnimation({
duration: 2000,
timingFunction: 'ease'
})
anim.translate(-100,-300).step()
this.setData({
anim: anim.export()
})
}
,
noLike:function(){
this.bigo()
this.ani_smallbigOut();
this.skew();
},
like:function(){
this.bigo1()
this.ani_smallbigOut();
this.skew1();
},
alphaClick: function (even) {
var animation = wx.createAnimation({})
animation.opacity(0.1).step({ duration: 2000 })
this.setData({ alphaData: animation.export() })
},
left:function(){
let big = wx.createAnimation({
duration: 2000,
timingFunction: 'ease'
})
big.scale(1, 1).step();
this.setData({
big: big.export()
})
},
right:function(){
let big1 = wx.createAnimation({
duration: 2000,
timingFunction: 'ease'
})
big1.scale(1, 1).step();
this.setData({
big1: big1.export()
})
}
})
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
测试小程序.zip (51个子文件)
测试小程序
utils
util.js 472B
app.wxss 266B
project.config.json 595B
app.js 1KB
pages
classify
classify.js 7KB
classify.json 2B
classify.wxml 2KB
classify.wxss 619B
animation
animation.wxss 871B
animation.json 2B
animation.js 2KB
animation.wxml 388B
cart
cart.wxml 2KB
cart.wxss 3KB
cart.js 4KB
cart.json 2B
index
index.wxml 618B
index.js 2KB
index.wxss 298B
index.json 2B
ball
ball.json 2B
ball.wxss 430B
ball.js 2KB
ball.wxml 877B
to
to.js 2KB
to.json 2B
to.wxss 3KB
to.wxml 4KB
too
too.wxss 124B
too.js 556B
too.json 2B
too.wxml 857B
my
my.js 943B
my.wxss 54B
my.wxml 68B
my.json 2B
logs
logs.json 52B
logs.wxml 173B
logs.js 261B
logs.wxss 106B
app.json 1KB
images
footer-icon-04.png 587B
footer-icon-03-active.png 531B
footer-icon-04-active.png 630B
footer-icon-01.png 728B
footer-icon-02.png 815B
footer-icon-01-active.png 771B
footer-icon-03.png 506B
1.png 1.11MB
2.png 855KB
footer-icon-02-active.png 886B
共 51 条
- 1
资源评论
梦想缔造者
- 粉丝: 1
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功