Javascript中的拋物線 ~ 加入購物車小動畫

廢話很少說,先上DEMO~
http://jsrun.net/PxKKp?uid=483
再上源碼~
https://github.com/Nelson2016...

---

運行的原理

很簡單的一個小特效，接下來來講一下他的原理。

顯而易見，這小東西確定和拋物線確定有着割不開的情緣啦~

上圖！

那麼咱們將跑速先單獨拿出來看：

首先拋物線嘛~得有本身的方程啊，就像本身的身份證同樣。

咱們假設拋物線的方程爲 y = ax^2 + bx + c。

爲了計算方便呢，咱們另拋物線通過（0，0）這一點，那麼c的值就爲0了。

上圖即爲歸零後的座標系，對稱軸直線爲 x2 = -b / 2a.

在拋物線方程中，a值得正負表明着拋物線的開口方向，那麼a值的絕對值也和拋物線的開口大小有着反比例的關係。那麼a值咱們即定位一個已知值做爲參數傳給運動。

到如今爲止，y = ax^2 + bx + c;方程中的a值與c之就爲已知了

那麼拋物線對稱軸的x值-x2 在起始點座標與終點座標已知的狀況下是苛求的，那麼x2變爲已知量。

經過x2 = -b / 2a便可就出b值，那麼整個拋物線方程咱們就得出啦~

碼代碼

1.定義一個全局的對象。

nelsonAddtoCartAnimation{}

2.在nelsonAddtoCartAnimation中咱們定義幾個值：

a:"",//拋物線係數
b:"",//拋物線係數
c:"",//拋物線係數
startX:"",//起始X座標
startY:0,//其實Y座標
endX:"",//終點X座標
endY:0,//終點Y座標
second:0,//動畫總計時
speed:10,//動畫速度

3.接下來咱們用一個init函數來初始化這個‘小球’：建立「小球」的DOM，把它放到起始位置，並計算動畫須要的時間。

function init(startX,endX,rC,txt){    
    if(!document.getElementById("nelsonATCAContainer")){
        var _nelsonATCAContainer = document.createElement("div");
        _nelsonATCAContainer.className = "nelsonATCAContainer";
        _nelsonATCAContainer.id = "nelsonATCAContainer";
        _nelsonATCAContainer.innerText = txt?txt:"";
        _nelsonATCAContainer.style.left = startX + "px";
        nelsonATCAControlBar.appendChild(_nelsonATCAContainer);
        nelsonATCAContainer = _nelsonATCAContainer;
        _nelsonATCAContainer = null;
        his.startX = startX;
        this.endX = endX;
        this.formula(rC);
        this.second = Math.abs(startX - endX) * this.speed / 1000;
        return this;
    }
}

4.計算a、b、c的值：首先根據起點、終點座標計算對稱軸的座標centerX，而後根據a值和centerX值計算b的值，因爲咱們強制使拋物線通過（0，0）點，而實際中咱們須要對拋物線進行移動，根據拋物線終點座標和起點座標計算c的值，最終獲得拋物線方程。

function formula(rC){
    var centerX =  (this.startX - this.endX) / 2 + this.endX;
    this.a = rC;
    this.b = -2 * this.a * centerX;
    this.c = -1 * this.a * this.startX * this.startX - this.b * this.startX;
}

5.開始漂移

function move(){
    var that = this;
    for(var i in prefixes){
           nelsonATCAContainer.style[prefixes[i] + prefixes[i]?"A":"a" + "nimation"] = "moveAnimation " + that.second + "s forwards";
    }
    nelsonATCAContainer.style.display = "block";
    var s = setInterval(function(){
        var startLeft = nelsonATCAContainer.offsetLeft;
        if(startLeft <= that.endX){
            clearInterval(s);
            that.resetPosition();
            return that;
        }
        nelsonATCAContainer.style.left = startLeft - 1 + "px";
        startLeft = nelsonATCAContainer.offsetLeft;
        nelsonATCAContainer.style.top = that.a * startLeft * startLeft + that.b * startLeft + that.c + "px";
    },that.speed)
}

6.大功告成~