JS中常见的运动(学自于妙味课堂)

JS常见的运动主要有三种,1.匀速运动,2.减速运动(也叫缓冲运动),3.碰撞运动.

1.匀速运动,设置默认的speed即可,没有太多难点

2.减速运动,即速度越来越慢,如下图所示

实现原理:动态获取其speed即可,

speed = (目标 - 当前) / 10 
//或者其他数字,这样就能让其速度原来越小
//源码:
function move(obj , attr , target){
    clearInterval(obj.time_id);
    obj.time_id = setInterval(function(){
        var iCurr = 0;
        if(attr == 'opacity'){
            iCurr = parseInt(parseFloat(getStyle(obj , attr))*100);
        }else{
            iCurr = parseInt(getStyle(obj , attr));
        }
        console.log(iCurr);
        var speed = (target - iCurr)/8;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if(target == iCurr){
            clearInterval(obj.time_id);
        }
        if(attr == 'opacity'){
            obj.style.filter = 'alpha(opacity:'+(iCurr + speed)+')';
            obj.style.opacity = (iCurr + speed)/100;
        }else{
            obj.style[attr] = parseInt(getStyle(obj , attr)) + speed + 'px';
        }
    }, 40);
}

3.碰撞运动,即让目标来回运动,最终再慢慢落到目标点,如下图所示

实现原理:1.与缓冲类似,speed也需要动态来获取,2.speed是需要不断的在运动的基础上递减的

//源码:
function move(obj , target){
        clearInterval(obj.time_id);
        obj.time_id = setInterval(function(){
            //speed动态获取,并且每次都是在+= 这里注意,与缓冲不同,这样才能在超过目标的时候形成来回摆动的效果
            speed += (target - obj.offsetLeft)/5;
            if(speed == 0){
                return false;
            }
            console.log(speed , obj.offsetLeft);
            //与此同时,速度在不断的递减
            speed *= 0.7;
            left += speed;
            if(Math.abs(speed)<1 && Math.abs(left - target)<1){
                clearInterval(obj.time_id);
                obj.style.left = target + 'px';
            }else{
                obj.style.left = left + 'px';
            }
        } , 30);

    }