js加入购物车抛物线动画

Posted 2020-11-30 simple-love

天猫将商品加入购物车会有一个抛物线动画，告诉用户操作成功以及购物车的位置，业务中需要用到类似的效果，记录一下实现过程备忘，先上demo

https://codepen.io/wangmeijian/pen/NQrdpR

一开始没有想到用抛物线函数去做，也已经忘记还有这么个函数了，想着抛物线本质上就是向右和向上方向各有一个速度（就上面的demo而言），向右的速度匀速，向上的速度递减，减到0后再反方向递增，元素的left和top值随时间递增而改变，元素运动轨迹就是抛物线，这个思路不具备通用性，实现也比较复杂，放弃了。

一开始没有想到用抛物线函数去做，也已经忘记还有这么个函数了，想着抛物线本质上就是向右和向上方向各有一个速度（就上面的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;
    }
}