js绘制购物车抛物线动画

2019-11-20 09:06:14

字体：大中小

来源：转载

供稿：网友

天猫将商品加入购物车会有一个抛物线动画，告诉用户操作成功以及购物车的位置，业务中需要用到类似的效果，记录一下实现过程备忘，先上demo

一开始没有想到用抛物线函数去做，也已经忘记还有这么个函数了，想着抛物线本质上就是向右和向上方向各有一个速度（就上面的demo而言），向右的速度匀速，向上的速度递减，减到0后再反方向递增，元素的left和top值随时间递增而改变，元素运动轨迹就是抛物线，这个思路不具备通用性，实现也比较复杂，放弃了。

之后参考了张鑫旭用抛物线函数的实现方式和愚人码头的改进，豁然开朗。

思路我再捋一捋，抛物线函数y = a*x*x + b*x + c ,其中a不等于0，a、b、c为常数。x、y为抛物线经过的坐标；a决定抛物线的开口方向，a>0开口向上，a<0开口向下。很明显天猫的抛物线开口向下，a还决定开口的大小，值越小开口越大，抛物线越平顺，反之抛物线越陡。所以a的值可以自定义，等于是已知两个坐标（起点和终点坐，即元素left、top值），求两个未知数，初中的数学就学过，二元二次方程。

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 * 定时器已执行时长，再代入函数y ＝ a*x*x + b*x + c得到top值，由于这一切的计算都建立在起点坐标平移到原点（终点也随之平移）的基础上，所以最终设置运动元素的left／top值的时候必须将起点元素的初始left／top值加上。具体请F12查看demo代码。

主要代码：

/**  * 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(); }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：vue.js入门教程之绑定class和style样式

下一篇：基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)