天貓將商品加入購物車會有一個拋物線動畫，告訴用戶操作成功以及購物車的位置，業(yè)務(wù)中需要用到類似的效果，記錄一下實現(xiàn)過程備忘，先上demo
一開始沒有想到用拋物線函數(shù)去做，也已經(jīng)忘記還有這么個函數(shù)了，想著拋物線本質(zhì)上就是向右和向上方向各有一個速度（就上面的demo而言），向右的速度勻速，向上的速度遞減，減到0后再反方向遞增，元素的left和top值隨時間遞增而改變，元素運動軌跡就是拋物線，這個思路不具備通用性，實現(xiàn)也比較復(fù)雜，放棄了。
之后參考了張鑫旭用拋物線函數(shù)的實現(xiàn)方式和愚人碼頭的改進，豁然開朗。
思路我再捋一捋，拋物線函數(shù)y = a*x*x + b*x + c ,其中a不等于0，a、b、c為常數(shù)。x、y為拋物線經(jīng)過的坐標(biāo)；a決定拋物線的開口方向，a>0開口向上，a<0開口向下。很明顯天貓的拋物線開口向下，a還決定開口的大小，值越小開口越大，拋物線越平順，反之拋物線越陡。所以a的值可以自定義，等于是已知兩個坐標(biāo)（起點和終點坐，即元素left、top值），求兩個未知數(shù)，初中的數(shù)學(xué)就學(xué)過，二元二次方程。
y1 ＝ a*x1*x1 + b*x1 + c
y2 = a*x2*x2 + b*x2 + c
a已知，代入兩個已知坐標(biāo)［x1, y1］[x2, y2]可以得出b、c的值，x和y的對應(yīng)關(guān)系有了。
不管拋物線開口向上還是向下，元素在水平方向上移動的速度不變，即left值勻速改變，可以設(shè)定拋物線運動時間t，元素在水平方向上的速度為speedx =（x2 - x1）/t，設(shè)置一個定時器，每30ms執(zhí)行一次，left值在每次定時器執(zhí)行后的值為當(dāng)前的x ＝ speedx * 定時器已執(zhí)行時長，再代入函數(shù)y ＝ a*x*x + b*x + c得到top值，由于這一切的計算都建立在起點坐標(biāo)平移到原點（終點也隨之平移）的基礎(chǔ)上，所以最終設(shè)置運動元素的left／top值的時候必須將起點元素的初始left／top值加上。具體請F12查看demo代碼。
主要代碼：
/** * js拋物線動畫 * @param {[object]} origin [起點元素] * @param {[object]} target [目標(biāo)點元素] * @param {[object]} element [要運動的元素] * @param {[number]} a [拋物線弧度] * @param {[number]} time [動畫執(zhí)行時間] * @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 || {}; // 起點 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, 根據(jù)拋物線函數(shù) y = a*x*x + b*x + c 將拋物線起點平移到坐標(biāo)原點[0, 0]，終點隨之平移，那么拋物線經(jīng)過原點[0, 0] 得出c = 0; // 終點平移后得出：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; } // 確定動畫方式 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(); }以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
