本文实例为大家分享了js实现商品抛物线加入购物车动画代码，供大家参考，具体内容如下
var params = {}; options = options || {}; for (var key in defaults) { var exports = { /* 确定移动的方式 // 根据两点坐标以及曲率确定运动曲线函数（也就是确定a,b的值） // 是否执行运动的标志量 if (element && target && element.nodeType == 1 && target.nodeType == 1) { } return exports; /*! requestAnimationFrame.js if (!window.requestAnimationFrame) { 使用：
加入购物车实战：
}); 以上就是本文的全部内容，希望对大家的学习有所帮助。
speed: 166.67,// 每帧移动的像素大小，每帧（对于大部分显示屏）大约16~17毫秒
curvature: 0.001,// 实际指焦点到准线的距离，你可以抽象成曲率，这里模拟扔物体的抛物线，因此是开口向下的
progress: function() {},complete: function() {}
};
params[key] = options[key] || defaults[key];
}
mark: function() { return this; },position: function() { return this; },move: function() { return this; },init: function() { return this; }
};
*/
var moveStyle = "margin",testDiv = document.createElement("div");
if ("oninput" in testDiv) {
["","ms","webkit"].forEach(function(prefix) {
var transform = prefix + (prefix? "T": "t") + "ransform";
if (transform in testDiv.style) {
moveStyle = transform;
}
});
}
/ 公式： y = axx + bx + c;
*/
var a = params.curvature,b = 0,c = 0;
var flagMove = true;
var rectElement = {},rectTarget = {};// 移动元素的中心点位置，目标元素的中心点位置
var centerElement = {},centerTarget = {};
// 目标元素的坐标位置
var coordElement = {},coordTarget = {};
// 标注当前元素的坐标
exports.mark = function() {
if (flagMove == false) return this;
if (typeof coordElement.x == "undefined") this.position();
element.setAttribute("data-center",[coordElement.x,coordElement.y].join());
target.setAttribute("data-center",[coordTarget.x,coordTarget.y].join());
return this;
}
exports.position = function() {
if (flagMove == false) return this;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft,scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 初始位置
if (moveStyle == "margin") {
element.style.marginLeft = element.style.marginTop = "0px";
} else {
element.style[moveStyle] = "translate(0,0)";
}
// 四边缘的坐标
rectElement = element.getBoundingClientRect();
rectTarget = target.getBoundingClientRect();
// 移动元素的中心点坐标
centerElement = {
x: rectElement.left + (rectElement.right - rectElement.left) / 2 + scrollLeft,y: rectElement.top + (rectElement.bottom - rectElement.top) / 2 + scrollTop
};
// 目标元素的中心点位置
centerTarget = {
x: rectTarget.left + (rectTarget.right - rectTarget.left) / 2 + scrollLeft,y: rectTarget.top + (rectTarget.bottom - rectTarget.top) / 2 + scrollTop
};
// 转换成相对坐标位置
coordElement = {
x: 0,y: 0
};
coordTarget = {
x: -1 * (centerElement.x - centerTarget.x),y: -1 * (centerElement.y - centerTarget.y)
};
/*
* 因为经过(0,0),因此c = 0
* 于是：
* y = a * x*x + b*x;
* y1 = a * x1*x1 + b*x1;
* y2 = a * x2*x2 + b*x2;
* 利用第二个坐标：
* b = (y2+ a*x2*x2) / x2
*/
// 于是
b = (coordTarget.y - a * coordTarget.x * coordTarget.x) / coordTarget.x;
return this;
};
// 按照这个曲线运动
exports.move = function() {
// 如果曲线运动还没有结束，不再执行新的运动
if (flagMove == false) return this;
var startx = 0,rate = coordTarget.x > 0? 1: -1;
var step = function() {
// 切线 y'=2ax+b
var tangent = 2 * a * startx + b; // = y / x
// y*y + x*x = speed
// (tangent * x)^2 + x*x = speed
// x = Math.sqr(speed / (tangent * tangent + 1));
startx = startx + rate * Math.sqrt(params.speed / (tangent * tangent + 1));
// 防止过界
if ((rate == 1 && startx > coordTarget.x) || (rate == -1 && startx < coordTarget.x)) {
startx = coordTarget.x;
}
var x = startx,y = a * x * x + b * x;
// <a href="https://www.jb51.cc/tag/biaoji/" target="_blank" class="keywords">标记</a>当前位置，这里有测试使用的嫌疑，实际使用可以将这一行注释
element.setAttribute("data-center",[Math.round(x),Math.round(y)].join());
// x,y目前是坐标，需要转换成定位的像素值
if (moveStyle == "margin") {
element.style.marginLeft = x + "px";
element.style.marginTop = y + "px";
} else {
element.style[moveStyle] = "translate("+ [x + "px",y + "px"].join() +")";
}
if (startx !== coordTarget.x) {
params.progress(x,y);
window.requestAnimationFrame(step);
} else {
// 运动结束，回调执行
params.complete();
flagMove = true;
}
};
window.requestAnimationFrame(step);
flagMove = false;
return this;
};
// 初始化<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>
exports.init = function() {
this.position().mark().move();
};
};
*/
(function() {
var lastTime = 0;
var vendors = ['webkit','moz'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || // name has changed in Webkit
window[vendors[x] + 'CancelRequestAnimationFrame'];
}
window.requestAnimationFrame = function(callback,element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0,16.7 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
},timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}());
var eleFlyElement = document.querySelector("#flyItem"),eleShopCart = document.querySelector("#shopCart");
var numberItem = 0;
// 抛物线运动
var myParabola = funParabola(eleFlyElement,eleShopCart,{
speed: 400,curvature: 0.002,complete: function() {
eleFlyElement.style.visibility = "hidden";
eleShopCart.querySelector("span").innerHTML = ++numberItem;
}
});
// 绑定点击事件
if (eleFlyElement && eleShopCart) {
[].slice.call(document.getElementsByClassName("btnCart")).forEach(function(button) {
button.addEventListener("click",function() {
// 滚动大小
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || 0,scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0;
eleFlyElement.style.left = event.clientX + scrollLeft + "px";
eleFlyElement.style.top = event.clientY + scrollTop + "px";
eleFlyElement.style.visibility = "visible";
// 需要重定位
myParabola.position().move();
});
}
