手写移动端抛物线购物车

思路：

1、获得抛物线起点、终点

2、通过变量加速度、向上初速度、起点终点垂直的位移计算出整个抛物运动所用的时间t

3、通过2步骤得到的时间t和起点、终点的水平位移计算出水平速度v

4、有了变量他t、v、加速度、初速度整个曲线的方程就有了

5、创建一个节点设置样式使其脱离文档流，在定时器里面不断不断计算出新的位置改变该节点的定位即可

核心代码：

/*添加商品的动画*/
function addgoodsanimation(){
        var dety=0.2; /*加速度 每百毫秒2像素 */
        var def=-4; /*初速度*/
        /*计算下落时间*/
        function gettime(t){
            var b= Math.sqrt((def*def)-(2*dety*(-t))) ;
            var t1= (-def+b)/(dety);
            var t2= (-def-b)/(dety);
            if(t1>0){
                return  parseInt(t1);
            }else{
                return  parseInt(t2);
            }
        }
        if($(".cart-num").length==1){
            var endy=$(window).height()-60;
            var endx=30;
            var starty=$(this).offset().top;
            var startx=$(this).offset().left;
            var $el= $("<i class='materialAdd'></i>").appendTo($("body")).css({
                position:'fixed',
                left: startx+'px',
                top: starty+'px',
                'margin-top':0,
                'margin-left':0
            });
            /*获得运动时间*/
            var t=gettime(endy-starty);
            var vx=(startx-endx)/t;
            var count=0;
            var timmer=setInterval(function(){
                count++;
                if(count>=t){
                    $el.css({
                        left: endx,
                        top: endy
                    });
                    setTimeout(function(){
                        $el.remove();
                    },100);
                    clearInterval(timmer);
                }
                startx-=vx ;
                var temp= starty + 0.5*count*count*dety +(count*def);
                $el.css({
                    left: startx+'px',
                    top: temp+'px'
                });
            },10)
        }
    }