本文详解如何使用JavaScript实现类似天猫的购物车抛物线动画。通过解析二次函数y=ax²+bx+c，利用起点和终点坐标求解参数b和c，结合水平匀速运动与定时器，动态计算元素在每一帧的left和top值，从而生成平滑的抛物线轨迹。
购物车抛物线动画需求与思路演进
天猫在将商品加入购物车时，会展示一个抛物线飞入动画，以此提示用户操作成功并指示购物车的位置。在实际业务开发中，我们常需实现类似的效果。此处记录具体的实现过程以供备忘，首先展示演示效果。
起初并未考虑直接使用抛物线函数，甚至已遗忘该函数的存在。当时的思路是：抛物线本质上是向右和向上两个方向速度的合成（以演示效果为例）。其中，水平方向速度保持匀速，垂直方向速度则递减至零后反向递增。元素的left和top值随时间推移而改变，其运动轨迹即构成抛物线。然而，这种思路缺乏通用性且实现复杂，因此被放弃。
随后，参考了张鑫旭关于抛物线函数的实现方式以及愚人码头的改进方案，思路豁然开朗。
基于二次函数的坐标计算原理
重新梳理思路：抛物线函数公式为y = a*x*x + b*x + c，其中a不等于0，a、b、c均为常数。x和y代表抛物线经过的坐标点；a决定抛物线的开口方向，当a>0时开口向上，a<0时开口向下。显然，天猫的抛物线开口向下，因此a为负值。a还决定开口的大小，|a|越小开口越大，抛物线越平缓；反之则越陡峭。因此，a的值可以自定义。既然已知起点和终点两个坐标（即元素的left和top值），这就转化为求解两个未知数b和c的问题，属于初中数学中的二元二次方程范畴。
y1 ＝ a*x1*x1 + b*x1 + c y2 = a*x2*x2 + b*x2 + c
已知a的值，将两个已知坐标［x1, y1］和[x2, y2]代入上述方程，即可解出b和c的值，从而确定x和y的对应关系。
运动逻辑与定时器实现细节
无论抛物线开口向上还是向下，元素在水平方向上的移动速度保持不变，即left值匀速变化。我们可以设定抛物线运动的总时间t，则水平方向速度speedx = (x2 - x1) / t。通过设置一个定时器，每30ms执行一次，left值在每次定时器执行后的值为当前x = speedx * 定时器已执行时长。将x代入函数y = a*x*x + b*x + c即可得到对应的top值。需要注意的是，所有计算均基于将起点坐标平移至原点（终点随之平移）的前提，因此在最终设置运动元素的left和top值时，必须加上起点元素的初始left和top值。具体实现可按下F12查看演示代码。
核心代码实现如下：
核心代码实现
/**
* js抛物线动画
* @param {[object]} origin [起点元素]
* @param {[object]} target [目标点元素]
* @param {[object]} element [要运动的元素]
* @param {[number]} a [抛物线弧度]
* @param {[number]} time [动画执行时间]
* @param {[function]} callback [抛物线执行完成后回调]
*/
var parabola = function(config){
var b = 0,
INTERVAL = 15,
timer = null,
x1,y1,x2,y2,originx,originy,diffx,diffy;
this.config = config || {};
// 起点
this.origin = $(this.config.origin)||null;
// 终点
this.target = $(this.config.target)||null;
// 运动的元素
this.element = $(this.config.element)||null;
// 曲线弧度
this.a = this.config.a || 0.004;
// 运动时间(ms)
this.time = this.config.time || 1000;
this.init = function(){
x1 = this.origin.offset().left;
y1 = this.origin.offset().top;
x2 = this.target.offset().left;
y2 = this.target.offset().top;
originx = x1;
originy = y1;
diffx = x2-x1;
diffy = y2-y1,
speedx = diffx/this.time;
// 已知a, 根据抛物线函数 y = a*x*x + b*x + c 将抛物线起点平移到坐标原点[0, 0]，终点随之平移，那么抛物线经过原点[0, 0] 得出c = 0;
// 终点平移后得出：y2-y1 = a*(x2 - x1)*(x2 - x1) + b*(x2 - x1)
// 即 diffy = a*diffx*diffx + b*diffx;
// 可求出常数b的值
b = (diffy - this.a*diffx*diffx)/diffx;
this.element.css({
left: x1,
top: y1
})
return this;
}
// 确定动画方式
this.moveStyle = function(){
var moveStyle = 'position',
testDiv = document.createElement('div');
if('placeholder' in testDiv){
['','ms','moz','webkit'].forEach(function(pre){
var transform = pre + (pre ? 'T' : 't') + 'ransform';
if(transform in testDiv.style){
moveStyle = transform;
}
})
}
return moveStyle;
}
this.move = function(){
var start = new Date().getTime(),
moveStyle = this.moveStyle(),
_this = this;
timer = setInterval(function(){
if(new Date().getTime() - start > _this.time){
clearInterval(timer);
_this.element.css({
left: x2,
top: y2
})
typeof _this.config.callback === 'function' && _this.config.callback(_this.element);
return;
}
x = speedx * (new Date().getTime() - start);
y = _this.a*x*x + b*x;
if(moveStyle === 'position'){
_this.element.css({
left: x+originx,
top: y+originy
})
}else{
if(window.requestAnimationFrame){
window.requestAnimationFrame(_this.element[0].style[moveStyle] = 'translate('+x+'px,'+y+'px)');
}else{
_this.element[0].style[moveStyle] = 'translate('+x+'px,'+y+'px)';
}
}
},INTERVAL)
return this;
}
this.init();
}
以上即为本文的全部内容，希望能为各位的学习提供帮助，也欢迎大家多多支持本站。