js加入购物车抛物线动画|实现天猫将商品加入购物车会有一个抛物线动画

  • 1,557

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

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

 

js加入购物车抛物线动画|实现天猫将商品加入购物车会有一个抛物线动画
  之后参考了张鑫旭用抛物线函数的实现方式和愚人码头的改进,豁然开朗。

思路我再捋一捋,抛物线函数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代码。

主要代码:

  1. /**
  2.      * js抛物线动画
  3.      * @param  {[object]} origin [起点元素]
  4.      * @param  {[object]} target [目标点元素]
  5.      * @param  {[object]} element [要运动的元素]
  6.      * @param  {[number]} a [抛物线弧度]
  7.      * @param  {[number]} time [动画执行时间]
  8.      * @param  {[function]} callback [抛物线执行完成后回调]
  9.      */
  10.     var parabola = function(config){
  11.         var b = 0,
  12.             INTERVAL = 15,
  13.             timer = null,
  14.             x1,y1,x2,y2,originx,originy,diffx,diffy;
  15.         this.config = config || {};
  16.         // 起点
  17.         this.origin = $(this.config.origin)||null;
  18.         // 终点
  19.         this.target = $(this.config.target)||null;
  20.         // 运动的元素
  21.         this.element = $(this.config.element)||null;
  22.         // 曲线弧度
  23.         this.a = this.config.a || 0.004;
  24.         // 运动时间(ms)
  25.         this.time = this.config.time || 1000;
  26.         this.init = function(){
  27.             x1 = this.origin.offset().left;
  28.             y1 = this.origin.offset().top;
  29.             x2 = this.target.offset().left;
  30.             y2 = this.target.offset().top;
  31.             originx = x1;
  32.             originy = y1;
  33.             diffx = x2-x1;
  34.             diffy = y2-y1,
  35.             speedx = diffx/this.time;
  36.             // 已知a, 根据抛物线函数 y = a*x*x + b*x + c 将抛物线起点平移到坐标原点[0, 0],终点随之平移,那么抛物线经过原点[0, 0] 得出c = 0;
  37.             // 终点平移后得出:y2-y1 = a*(x2 - x1)*(x2 - x1) + b*(x2 - x1)
  38.             // 即 diffy = a*diffx*diffx + b*diffx;
  39.             // 可求出常数b的值
  40.             b = (diffy - this.a*diffx*diffx)/diffx;
  41.             this.element.css({
  42.                 left: x1,
  43.                 top: y1
  44.             })
  45.             return this;
  46.         }
  47.         // 确定动画方式
  48.         this.moveStyle = function(){
  49.             var moveStyle = 'position',
  50.                 testDiv = document.createElement('div');
  51.             if('placeholder' in testDiv){
  52.                 ['','ms','moz','webkit'].forEach(function(pre){
  53.                     var transform = pre + (pre ? 'T' : 't') + 'ransform';
  54.                     if(transform in testDiv.style){
  55.                         moveStyle = transform;
  56.                     }
  57.                 })
  58.             }
  59.             return moveStyle;
  60.         }
  61.         this.move = function(){
  62.             var start = new Date().getTime(),
  63.                 moveStyle = this.moveStyle(),
  64.                 _this = this;
  65.             timer = setInterval(function(){
  66.                 if(new Date().getTime() - start > _this.time){
  67.                     clearInterval(timer);
  68.                     _this.element.css({
  69.                         left: x2,
  70.                         top: y2
  71.                     })
  72.                     typeof _this.config.callback === 'function' && _this.config.callback(_this.element);
  73.                     return;
  74.                 }
  75.                 x = speedx * (new Date().getTime() - start);
  76.                 y = _this.a*x*x + b*x;
  77.                 if(moveStyle === 'position'){
  78.                     _this.element.css({
  79.                         left: x+originx,
  80.                         top: y+originy
  81.                     })
  82.                 }else{
  83.                     if(window.requestAnimationFrame){
  84.                         window.requestAnimationFrame(_this.element[0].style[moveStyle] = 'translate('+x+'px,'+y+'px)');
  85.                     }else{
  86.                         _this.element[0].style[moveStyle] = 'translate('+x+'px,'+y+'px)';
  87.                     }
  88.                 }
  89.             },INTERVAL)
  90.             return this;
  91.         }
  92.         this.init();
  93.     }

 

weinxin
我的微信
这是我的微信扫一扫
开拓者博主
  • 本文由 发表于 2016年9月3日08:24:30
  • 转载请务必保留本文链接:https://www.150643.com/332.html
匿名

发表评论

匿名网友 填写信息

评论:1   其中:访客  1   博主  0
    • DD博客 DD博客 1

      非常不错的一篇文章!如果加上一个gif图片会更吸引人!