//index.js
Page({
data: {
animationData: {},
animating: '',
},
onLoad: function () {
},
/*
* t: current time(当前时间);
* b: beginning value(初始值);
* c: change in value(变化量);
* d: duration(持续时间)。
*/
bounceEaseOut: function (t, b, c, d) {//弹性线
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b;
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
}
},
easeOutBack: function (t, b, c, d, s) {//抛物线
if (s == undefined) s = 1.70158;
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
startAm: function (that, e) {
var atime = 0.6//动画持续时间
var etime = 100//动画结束时间
that.setData({
animating: e.target.dataset.goodsid
})
setTimeout(() => {
that.setData({
animating: ''
})
}, etime)
var animation = wx.createAnimation({
duration: 100,
timingFunction: 'ease',
})
that.animation = animation
//变化量坐标
var offx = 320 / 2 - e.touches[0].clientX//购物车所在位置x - 加入购物车按钮的位置x
var offy = 405- 50 - e.touches[0].clientY//购物车所在位置Y - 加入购物车按钮的位置Y
//console.log("变化量坐标", offx, offy, that.bounceEaseOut(1 / 10, 0, offy, 1))
//每1/10秒变化量坐标:
//console.log("每1/10秒变化量坐标", offx / 10, that.bounceEaseOut(1 / 10, 0, offy, 1))
animation
.translate(1 * offx / 20, that.bounceEaseOut(1 / 20, 0, offy, atime)).step()
.translate(2 * offx / 20, that.bounceEaseOut(2 / 20, 0, offy, atime)).step()
.translate(3 * offx / 20, that.bounceEaseOut(3 / 20, 0, offy, atime)).step()
.translate(4 * offx / 20, that.bounceEaseOut(4 / 20, 0, offy, atime)).step()
.translate(5 * offx / 20, that.bounceEaseOut(5 / 20, 0, offy, atime)).step()
.translate(6 * offx / 20, that.bounceEaseOut(6 / 20, 0, offy, atime)).step()
.translate(7 * offx / 20, that.bounceEaseOut(7 / 20, 0, offy, atime)).step()
.translate(8 * offx / 20, that.bounceEaseOut(8 / 20, 0, offy, atime)).step()
.translate(9 * offx / 20, that.bounceEaseOut(9 / 20, 0, offy, atime)).step()
.translate(10 * offx / 20, that.bounceEaseOut(10 / 20, 0, offy, atime)).step()
.translate(11 * offx / 20, that.bounceEaseOut(11 / 20, 0, offy, atime)).step()
.translate(12 * offx / 20, that.bounceEaseOut(12 / 20, 0, offy, atime)).step()
.translate(13 * offx / 20, that.bounceEaseOut(13 / 20, 0, offy, atime)).step()
.translate(14 * offx / 20, that.bounceEaseOut(14 / 20, 0, offy, atime)).step()
.translate(15 * offx / 20, that.bounceEaseOut(15 / 20, 0, offy, atime)).step()
.translate(16 * offx / 20, that.bounceEaseOut(16 / 20, 0, offy, atime)).step()
.translate(17 * offx / 20, that.bounceEaseOut(17 / 20, 0, offy, atime)).step()
.translate(18 * offx / 20, that.bounceEaseOut(18 / 20, 0, offy, atime)).step()
.translate(19 * offx / 20, that.bounceEaseOut(19 / 20, 0, offy, atime)).step()
.translate(20 * offx / 20, that.bounceEaseOut(20 / 20, 0, offy, atime)).step()
.opacity(0).step().translate(0, 0).step().opacity(1).step()
that.setData({
animationData: animation.export()
})
setTimeout(function () {
animation.translate(0, 0).step()
that.setData({
animationData: animation.export()
})
}.bind(this), etime)
},
cartPlus: function (e) {
var that = this
//加入购物车动画
that.startAm(that,e)
},
})
<view data-goodsId='' bindtap="cartPlus" animation='{{animating==im.goodsIdStr?animationData:""}}'>加入购物车</view >
大佬有详细的 代码么