// 需要加入动画的页面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

};

},