// 需要加入动画的页面js
data:{
// add goods animate
needAni: false,
hide_good_box: true,
hideCount: true,
// add goods animate
},
onLoad: function(options) {
wx.setNavigationBarTitle({title: '商城'});
// shopping car function
var that = this;
this.busPos = {};
this.busPos['x'] = app.globalData.ww * 0.8;
this.busPos['y'] = app.globalData.hh * 0.8;
// shopping car function
},
touchOnGoods: function (e) {
let that = this;
let imgSrc = e.currentTarget.dataset.imgsrc;
this.openAlert();
this.setData({
goodsitemimg: imgSrc,
goodsProtype_this: that,
goodsProtype_e: e,
})
console.log(imgSrc);
// this.touchGoods(that,e)
},
// shopping animate
touchGoods:function(that,e){
// 如果good_box正在运动
if (!that.data.hide_good_box) return;
that.finger = {};
var topPoint = {};
that.finger['x'] = e.touches["0"].clientX - 80;
that.finger['y'] = e.touches["0"].clientY - 120;
if (that.finger['y'] < that.busPos['y']) {
topPoint['y'] = that.finger['y'] - 150;
} else {
topPoint['y'] = that.busPos['y'] - 150;
}
topPoint['x'] = Math.abs(that.finger['x'] - that.busPos['x']) / 2 + that.finger['x'];
that.linePos = app.bezier([that.finger, topPoint, that.busPos], 30);
that.startAnimation();
},
// shopping animate
startAnimation: function () {
var index = 0,
that = this,
bezier_points = that.linePos['bezier_points'];
this.setData({
hide_good_box: false,
bus_x: that.finger['x'],
bus_y: that.finger['y']
})
this.timer = setInterval(function () {
index++;
that.setData({
bus_x: bezier_points[index]['x'],
bus_y: bezier_points[index]['y']
})
if (index >= 28) {
clearInterval(that.timer);
that.setData({
hide_good_box: true,
hideCount: false,
count: that.data.count += 1
})
}
}, 33);
},
// 需要加入动画的页面js
wxml部分
// app.js中以备重复调用
screenSize: function () {
var that = this;
wx.getSystemInfo({
success: function (res) {
var ww = res.windowWidth;
var hh = res.windowHeight;
that.globalData.ww = ww;
that.globalData.hh = hh;
}
})
},
bezier: function (points, times) { // shopping car Bezier curve center portion calculation method
var bezier_points = [];
var points_D = [];
var points_E = [];
const DIST_AB = Math.sqrt(Math.pow(points[1]['x'] - points[0]['x'], 2) + Math.pow(points[1]['y'] - points[0]['y'], 2));
const DIST_BC = Math.sqrt(Math.pow(points[2]['x'] - points[1]['x'], 2) + Math.pow(points[2]['y'] - points[1]['y'], 2));
const EACH_MOVE_AD = DIST_AB / times;
const EACH_MOVE_BE = DIST_BC / times;
const TAN_AB = (points[1]['y'] - points[0]['y']) / (points[1]['x'] - points[0]['x']);
const TAN_BC = (points[2]['y'] - points[1]['y']) / (points[2]['x'] - points[1]['x']);
const RADIUS_AB = Math.atan(TAN_AB);
const RADIUS_BC = Math.atan(TAN_BC);
for (var i = 1; i <= times; i++) {
var dist_AD = EACH_MOVE_AD * i;
var dist_BE = EACH_MOVE_BE * i;
var point_D = {};
point_D['x'] = dist_AD * Math.cos(RADIUS_AB) + points[0]['x'];
point_D['y'] = dist_AD * Math.sin(RADIUS_AB) + points[0]['y'];
points_D.push(point_D);
var point_E = {};
point_E['x'] = dist_BE * Math.cos(RADIUS_BC) + points[1]['x'];
point_E['y'] = dist_BE * Math.sin(RADIUS_BC) + points[1]['y'];
points_E.push(point_E);
var tan_DE = (point_E['y'] - point_D['y']) / (point_E['x'] - point_D['x']);
var radius_DE = Math.atan(tan_DE);
var dist_DE = Math.sqrt(Math.pow((point_E['x'] - point_D['x']), 2) + Math.pow((point_E['y'] - point_D['y']), 2));
var dist_DF = (dist_AD / DIST_AB) * dist_DE;
var point_F = {};
point_F['x'] = dist_DF * Math.cos(radius_DE) + point_D['x'];
point_F['y'] = dist_DF * Math.sin(radius_DE) + point_D['y'];
bezier_points.push(point_F);
}
return {
'bezier_points': bezier_points
};
},