快捷導(dǎo)航

js繪制購(gòu)物車拋物線動(dòng)畫(huà)

更新時(shí)間：2020年11月18日 14:42:49 作者：wangmeijian

這篇文章主要為大家詳細(xì)介紹了js繪制購(gòu)物車拋物線動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

天貓將商品加入購(gòu)物車會(huì)有一個(gè)拋物線動(dòng)畫(huà)，告訴用戶操作成功以及購(gòu)物車的位置，業(yè)務(wù)中需要用到類似的效果，記錄一下實(shí)現(xiàn)過(guò)程備忘，先上demo

一開(kāi)始沒(méi)有想到用拋物線函數(shù)去做，也已經(jīng)忘記還有這么個(gè)函數(shù)了，想著拋物線本質(zhì)上就是向右和向上方向各有一個(gè)速度（就上面的demo而言），向右的速度勻速，向上的速度遞減，減到0后再反方向遞增，元素的left和top值隨時(shí)間遞增而改變，元素運(yùn)動(dòng)軌跡就是拋物線，這個(gè)思路不具備通用性，實(shí)現(xiàn)也比較復(fù)雜，放棄了。

之后參考了張?chǎng)涡裼脪佄锞€函數(shù)的實(shí)現(xiàn)方式和愚人碼頭的改進(jìn)，豁然開(kāi)朗。

思路我再捋一捋，拋物線函數(shù)y = a*x*x + b*x + c ,其中a不等于0，a、b、c為常數(shù)。x、y為拋物線經(jīng)過(guò)的坐標(biāo)；a決定拋物線的開(kāi)口方向，a>0開(kāi)口向上，a<0開(kāi)口向下。很明顯天貓的拋物線開(kāi)口向下，a還決定開(kāi)口的大小，值越小開(kāi)口越大，拋物線越平順，反之拋物線越陡。所以a的值可以自定義，等于是已知兩個(gè)坐標(biāo)（起點(diǎn)和終點(diǎn)坐，即元素left、top值），求兩個(gè)未知數(shù)，初中的數(shù)學(xué)就學(xué)過(guò)，二元二次方程。

y1 ＝ a*x1*x1 + b*x1 + c
y2 = a*x2*x2 + b*x2 + c

a已知，代入兩個(gè)已知坐標(biāo)［x1, y1］[x2, y2]可以得出b、c的值，x和y的對(duì)應(yīng)關(guān)系有了。

不管拋物線開(kāi)口向上還是向下，元素在水平方向上移動(dòng)的速度不變，即left值勻速改變，可以設(shè)定拋物線運(yùn)動(dòng)時(shí)間t，元素在水平方向上的速度為speedx =（x2 - x1）/t，設(shè)置一個(gè)定時(shí)器，每30ms執(zhí)行一次，left值在每次定時(shí)器執(zhí)行后的值為當(dāng)前的x ＝ speedx * 定時(shí)器已執(zhí)行時(shí)長(zhǎng)，再代入函數(shù)y ＝ a*x*x + b*x + c得到top值，由于這一切的計(jì)算都建立在起點(diǎn)坐標(biāo)平移到原點(diǎn)（終點(diǎn)也隨之平移）的基礎(chǔ)上，所以最終設(shè)置運(yùn)動(dòng)元素的left／top值的時(shí)候必須將起點(diǎn)元素的初始left／top值加上。具體請(qǐng)F(tuán)12查看demo代碼。

主要代碼：

/**
 * js拋物線動(dòng)畫(huà)
 * @param {[object]} origin [起點(diǎn)元素]
 * @param {[object]} target [目標(biāo)點(diǎn)元素]
 * @param {[object]} element [要運(yùn)動(dòng)的元素]
 * @param {[number]} a [拋物線弧度]
 * @param {[number]} time [動(dòng)畫(huà)執(zhí)行時(shí)間]
 * @param {[function]} callback [拋物線執(zhí)行完成后回調(diào)]
 */
 var parabola = function(config){
 var b = 0,
  INTERVAL = 15,
  timer = null,
  x1,y1,x2,y2,originx,originy,diffx,diffy;

 this.config = config || {};
 // 起點(diǎn)
 this.origin = $(this.config.origin)||null;
 // 終點(diǎn)
 this.target = $(this.config.target)||null;
 // 運(yùn)動(dòng)的元素
 this.element = $(this.config.element)||null;
 // 曲線弧度
 this.a = this.config.a || 0.004;
 // 運(yùn)動(dòng)時(shí)間(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, 根據(jù)拋物線函數(shù) y = a*x*x + b*x + c 將拋物線起點(diǎn)平移到坐標(biāo)原點(diǎn)[0, 0]，終點(diǎn)隨之平移，那么拋物線經(jīng)過(guò)原點(diǎn)[0, 0] 得出c = 0;
  // 終點(diǎn)平移后得出：y2-y1 = a*(x2 - x1)*(x2 - x1) + b*(x2 - x1)
  // 即 diffy = a*diffx*diffx + b*diffx;
  // 可求出常數(shù)b的值
  b = (diffy - this.a*diffx*diffx)/diffx;
  this.element.css({
  left: x1,
  top: y1
  })
  return this;
 }

 // 確定動(dòng)畫(huà)方式
 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();
 }

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: