js加入購物車拋物線動畫

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

2017年8月28日補充拋物線移動示意圖：

拋物線起點（x1,y1）移動到座標原點，x、y軸移動的距離是座標（x1,y1）與座標原點（0,0）之差，即diffx = x1 - 0、diffy = y1 - 0，對應地，拋物線終點（x2,y2）也移動相同的距離，移動後的座標爲（x2-diffx,y2-diffy)，也就是（x2-x1,y2-y1）,將移動後的座標（x2-x1,y2-y1）代入拋物線函數得出：y2-y1 = a*(x2 - x1)*(x2 - x1) + b*(x2 - x1)。

主要代碼：

/**
 * js拋物線動畫
 * @param  {[object]} origin [起點元素]
 * @param  {[object]} target [目標點元素]
 * @param  {[object]} element [要運動的元素]
 * @param  {[number]} radian [拋物線弧度]
 * @param  {[number]} time [動畫執行時間]
 * @param  {[function]} callback [拋物線執行完成後回調]
 */
class Parabola {
    constructor(config) {
        this.$ = selector => {
            return document.querySelector(selector);
        };
        this.b = 0;
        this.INTERVAL = 15;
        this.timer = null;
        this.config = config || {};
        // 起點
        this.origin = this.$(this.config.origin) || null;
        // 終點
        this.target = this.$(this.config.target) || null;
        // 運動的元素
        this.element = this.$(this.config.element) || null;
        // 曲線弧度
        this.radian = this.config.radian || 0.004;
        // 運動時間(ms)
        this.time = this.config.time || 1000;

        this.originX = this.origin.getBoundingClientRect().left;
        this.originY = this.origin.getBoundingClientRect().top;
        this.targetX = this.target.getBoundingClientRect().left;
        this.targetY = this.target.getBoundingClientRect().top;

        this.diffx = this.targetX - this.originX;
        this.diffy = this.targetY - this.originY;
        this.speedx = this.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的值
        this.b =
            (this.diffy - this.radian * this.diffx * this.diffx) / this.diffx;

        this.element.style.left = `${this.originX}px`;
        this.element.style.top = `${this.originY}px`;
    }

    // 肯定動畫方式
    moveStyle() {
        let moveStyle = 'position',
            testDiv = document.createElement('input');
        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;
    }

    move() {
        let start = new Date().getTime(),
            moveStyle = this.moveStyle(),
            _this = this;

        if (this.timer) return;
        this.element.style.left = `${this.originX}px`;
        this.element.style.top = `${this.originY}px`;
        this.element.style[moveStyle] = 'translate(0px,0px)';
        this.timer = setInterval(function() {
            if (new Date().getTime() - start > _this.time) {
                _this.element.style.left = `${_this.targetX}px`;
                _this.element.style.top = `${_this.targetY}px`;
                typeof _this.config.callback === 'function' &&
                    _this.config.callback();
                clearInterval(_this.timer);
                _this.timer = null;
                return;
            }
            let x = _this.speedx * (new Date().getTime() - start);
            let y = _this.radian * x * x + _this.b * x;
            if (moveStyle === 'position') {
                _this.element.style.left = `${x + _this.originX}px`;
                _this.element.style.top = `${y + _this.originY}px`;
            } else {
                if (window.requestAnimationFrame) {
                    window.requestAnimationFrame(() => {
                        _this.element.style[moveStyle] =
                            'translate(' + x + 'px,' + y + 'px)';
                    });
                } else {
                    _this.element.style[moveStyle] =
                        'translate(' + x + 'px,' + y + 'px)';
                }
            }
        }, this.INTERVAL);
        return this;
    }
}

 

有疑問歡迎討論。