1:实现效果;
2:index.wxss
//只写红点样式
.good_box {
width: 30rpx;
height: 30rpx;
position: fixed;
border-radius: 50%;
overflow: hidden;
left: 50%;
top: 50%;
z-index: 99;
background: #b02c41;
}
3:index.wxml
<!-- 点击加 点击事件 -->
<image catchtap='middlejia' data-indexOut="{{indexOut}}" data-indexIn="{{indexIn}}" style='background:#cb003c;' src='../../image/imgs/plus.png'></image>
<!-- 飞入图标 -->
<view class="good_box" hidden="{{hide_good_box}}" style="left: {{bus_x}}px; top{{bus_y}}px;">
</view>
4:app.js 里面加入
onLaunch: function () {
let that = this;
wx.getSystemInfo({// 获取页面的有关信息
success: function (res) {
wx.setStorageSync('systemInfo', res)
var ww = res.windowWidth;
var hh = res.windowHeight;
that.globalData.ww = ww;
that.globalData.hh = hh;
}
});
},
bezier: function (pots, amount) {
var pot;
var lines;
var ret = [];
var points;
for (var i = 0; i <= amount; i++) {
points = pots.slice(0);
lines = [];
while (pot = points.shift()) {
if (points.length) {
lines.push(pointLine([pot, points[0]], i / amount));
} else if (lines.length > 1) {
points = lines;
lines = [];
} else {
break;
}
}
ret.push(lines[0]);
}
function pointLine(points, rate) {
var pointA, pointB, pointDistance, xDistance, yDistance, tan, radian, tmpPointDistance;
var ret = [];
pointA = points[0];//点击
pointB = points[1];//中间
xDistance = pointB.x - pointA.x;
yDistance = pointB.y - pointA.y;
pointDistance = Math.pow(Math.pow(xDistance, 2) + Math.pow(yDistance, 2), 1 / 2);
tan = yDistance / xDistance;
radian = Math.atan(tan);
tmpPointDistance = pointDistance * rate;
ret = {
x: pointA.x + tmpPointDistance * Math.cos(radian),
y: pointA.y + tmpPointDistance * Math.sin(radian)
};
return ret;
}
return {
'bezier_points': ret
};
},
5:index.js
data: {
hide_good_box: true
},
onLoad: function(res) {
var that = this;
this.busPos = {};
this.busPos['x'] = 180;//购物车的位置
this.busPos['y'] = app.globalData.hh - 56;
}
// 点击添加商品
middlejia: function(e) {
var that=this;
touchOnGoods(that, e);
},
//调用的方法
function touchOnGoods(that, e) {
that.finger = {}; var topPoint = {};
that.finger['x'] = e.touches["0"].clientX;//点击的位置
that.finger['y'] = e.touches["0"].clientY;
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;
if (that.finger['x'] > that.busPos['x']) {
topPoint['x'] = (that.finger['x'] - that.busPos['x']) / 2 + that.busPos['x'];
} else {//
topPoint['x'] = (that.busPos['x'] - that.finger['x']) / 2 + that.finger['x'];
}
that.linePos = app.bezier([that.busPos, topPoint, that.finger], 100);
startAnimation(that, e);
}
function startAnimation(that, e) {
var index = 0,
bezier_points = that.linePos['bezier_points'];
that.setData({
hide_good_box: false,
bus_x: that.finger['x'],
bus_y: that.finger['y']
})
var len = bezier_points.length;
index = len
that.timer = setInterval(function () {
for (let i = index - 1; i > -1; i--) {
that.setData({
bus_x: bezier_points[i]['x'],
bus_y: bezier_points[i]['y']
})
if (i < 1) {
clearInterval(that.timer);
that.setData({
hide_good_box: true
})
}
}
}, 25);
}