抛物线函数封装

/*
 * 抛物线函数
 * 参数:
 * elem:被操作的元素
 * targetX:目标点
 * targetY:目标点
 * a:        a<0时,开口朝下; a>0时,开口朝上
 * fn:        运动执行后,所触发的函数
 */
function parabola(elem, targetX, targetY, a, fn){
    // 起点
    var [originX, originY] = [elem.offsetLeft, elem.offsetTop];
    // 目标点
    // targetX, targetY
    var x = targetX - originX;
    var y = targetY - originY;
    var c = 0;    
    // 抛物线公式
    // y = axx + bx + c;
    // b = (y-axx-c)/x
    var b = (y-a*x*x-c)/x;
    // 已知a、b、c后,随意给一个x,求这个x所对应的y
    x = 0;    
    clearInterval(elem.timer2);
    elem.timer2 = setInterval( ()=>{
        //x += 1;    // 匀速运动
        x += (targetX-elem.offsetLeft)/6;    // 缓冲运动
        x = Math.ceil(x);
        // 根据抛物线公式,已知x,求y
        y = a*x*x + b*x + c;        
        // 更新坐标
        elem.style.left = originX+x+'px';
        elem.style.top = originY+y+'px';
        // 如果到了目标点
        if( originX+x>=targetX ){
            elem.style.left = targetX+'px';
            elem.style.top = targetY+'px';
            clearInterval(elem.timer2);    // 停止定时器
            if(fn){ // 如果设置了回调函数,
                fn(); // 则执行回调函数
            }
        }
    }, 50 );
}

 

posted @ 2018-04-24 16:16  悔创阿里-杰克马  阅读(237)  评论(0)    收藏  举报
求投食~(点图即可)