DIV CSS 佈局教程網

天貓將商品加入購物車會有一個拋物線動畫，告訴用戶操作成功以及購物車的位置，業務中需要用到類似的效果，記錄一下實現過程備忘，先上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();
 }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。