js绘制购物车抛物线动画

天猫在给购物车添加商品时会有一个抛物线动画，告诉用户操作成功以及购物车的位置。类似的效果需要在商业中使用。记录实施过程备忘录，并首先进行演示

一开始没想到用抛物线函数，忘了还有这样的函数。我认为抛物线在向右和向上的方向上有一个速度(就上面的演示而言)。向右方向速度均匀，向上方向速度减小，减小到0后再反方向增大。元素的左、顶值随时间增加而变化，元素的运动轨迹为抛物线。这个想法实现起来并不普遍也不复杂，所以我放弃了。

参考了张新旭实施抛物线功能和愚人码头的改进后，一下子就清楚了。

我要再复习一遍。抛物线函数y=a*x*x b*x c，其中a不等于0，a、b、c为常数。x和y是抛物线经过的坐标；a确定抛物线的开口方向，a0向上开口，a0向下开口。显然天猫的抛物线开口是向下的，A也决定了开口的大小。该值越小，开口越大，抛物线越平滑，而抛物线越陡峭。所以a的值是可以自定义的，相当于知道两个坐标(起点和终点sit，即元素的左、顶值)，求两个未知数。初中时学过数学中的二元二次方程。

y1=a*x1*x1 b*x1 cy2=a*x2*x2 b*x2 c

a是已知的，b和c的值可以通过代入两个已知坐标[x1，y1] [x2，y2]得到，建立了x和y的对应关系。

无论抛物线开口是向上还是向下，元素在水平方向的移动速度都是恒定的，即左值以恒定的速度变化。可以设置抛物线运动时间t，元素在水平方向的速度为speedx=(x2-x1)/t，设置定时器，每30毫秒执行一次。每次定时器执行后的左值为当前x=speedx *定时器执行时间。然后代入函数y=a * x * XB * xc，得到顶值。由于所有这些计算都是基于起点坐标到原点的平移(终点也是平移的)，因此在最终设置移动元素的左/顶值时，必须添加起点元素的初始左/顶值。演示代码见F12。

主代码：

/** * js抛物线动画* @ param {[对象]}原点[起点元素]* @ param {[对象]}目标[目标点元素]* @ param {[对象]}元素[要运动的元素] * @param {[number]} a [抛物线弧度] * @param {[number]}时间[动画执行时间]* @ param {[函数]}回调[抛物线执行完成后回调] */var抛物线=function(config){ var b=0，INTERVAL=15，timer=null，x1，y1，x2，y2，originx，originy，diffx，diffythis。config=config | | { }；//起点这个。origin=$(这个。配置。origin)| | null；//终点这个。target=$(这个。配置。target)| | null；//运动的元素这个。元素=$(这。配置。元素)| | null//曲线弧度这个。a=这个。配置。a | | 0.004//运动时间这个。时间=这个。配置。时间| | 1000；这个。init=function(){ x1=this。起源。偏移量().向左；y1=this.origin.offset().顶部；x2=this.target.offset().向左；y2=this.target.offset().顶部；originx=x1originy=y1diffx=x2-x1；diffy=y2-y1，speedx=diffx/this。时间；//已知一个，根据抛物线函数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 })返回这个；} //确定动画方式这个。move style=function(){ var move style=' position '，testDiv=document。create element(' div ')；if(' testDiv中的占位符){ [' '，' ms '，' moz '，' webkit'].forEach(函数(pre){ var transform=pre (pre？t ' : ' t ')'转换'；if(testdiv。风格中的转换){ moveStyle=transform} }) }返回moveStyle}这。move=function(){ var start=new Date().getTime()，moveStyle=this.moveStyle()，_ this=thistimer=setInterval(函数(){如果(新日期()。getTime()-start _ this。时间){ clearInterval(计时器);_this.element.css({ left: x2，top : y2 })类型的_this。配置。回调==' function ' _ this。配置。回调(_ this。元素)；返回；} x=speedx *(新日期()。getTime()-start)；y=_ this . a * x * x b * xif(move style==' position '){ _ this。元素。CSS({ left : x originx，top :y origin y })} else { if(window。requestanimationframe){ window。requestanimationframe(_ this。元素[0]).style[move style]=' translate(' x ' px，' y ' px)')；}else{ _this.element[0].style[move style]=' translate(' x ' px，' y ' px)'；} } }，INTERVAL)返回这个；}这个。init()；}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。