js运动框架逐渐递进版

运动，其实就是在一段时间内改变left、right、width、height、opactiy的值，到达目的地之后停止。

现在按照以下步骤来进行我们的运动框架的封装:

1. 匀速运动。
2. 缓冲运动。
3. 多物体运动。
4. 任意值变化。
5. 链式运动。
6. 同时运动

（第一部分）：匀速运动

运动基础

思考：如何让div动起来?
如下：

1. 设置元素为绝对定位，只有绝对定位后，left,top等值才生效。
2. 定时器的使用（动态改变值），这里使用setInterval()每隔指定的时间执行代码。

• 计时器setInterval(函数,交互时间(毫秒))：在执行时,从载入页面后每隔指定的时间执行代码。
• 取消计时器clearInterval(函数) 方法可取消由 setInterval() 设置的交互时间。

1. 获取当前的位置，大小等等。offsetLeft（当前元素相对父元素位置）获取左边距。
2. 速度–控制物体运动的快慢

• 定时器间隔时间
• 改变值的大小

根据上面的信息我们就可以开始封装运动框架创建一个变化的div了。

1 2 3 4 5 6 7 8 9 10

/**  * 运动框架-1-动起来  * @param {HTMLElement} element 进行运动的节点  */ var timer = null; function startMove(element) {     timer = setInterval(function () {//定时器         element.style.left = element.offsetLeft + 5 + "px";     }, 30); }

 

 

速度取到某些值会无法停止
到达位置后再点击还会运动
重复点击速度加快
速度无法更改
速度取到某些值会无法停止（这个Bug稍后解决，在进化过程中自然解决）
把运动和停止隔开(if/else)
在开始运动时,关闭已有定时器
把速度用变量保存
 运动框架-3-解决Bug
var timer = null;
function startMove(element, iTarget) {
    clearInterval(timer);//在开始运动时,关闭已有定时器
    timer = setInterval(function () {
        var iSpeed = 5;//把速度用变量保存
        //把运动和停止隔开(if/else)
        if (element.offsetLeft === iTarget) {//结束运动
            clearInterval(timer);
        } else {
            element.style.left = element.offsetLeft + iSpeed + "px";
        }
    }, 30);
例如：

 

var timer = null;
function startMove(){
    var oDiv = document.getElementById('div1');
    clearInterval(timer);
        //计算速度
    var iSpeed = 10;
    //设置定时器
    timer = setInterval(function(){
        //判断停止条件
        if(oDiv.offsetLeft > 300){
            clearInterval(timer);
        }else{
            //改变物体位置
            oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
            document.title = oDiv.offsetLeft;
        }
    },30);
}

window.onload = function(){
    var oDiv = document.getElementById('div1');
    oDiv.onmouseover = function(){
        startMove(0);
    }
    oDiv.onmouseout = function(){
        startMove(-100);
    }
}
var timer = null;
var iSpeed;
function startMove(iTatget){
    var oDiv = document.getElementById('div1');
    clearInterval(timer);
    timer = setInterval(function(){
        //计算速度
        if(iTatget -oDiv.offsetLeft > 0){
            iSpeed = 10;
        }else{
            iSpeed = -10;
        }

        if(oDiv.offsetLeft == iTatget){
            clearInterval(timer);
        }else{
            oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
        }
        document.title = oDiv.offsetLeft;
    },30)
}
用变量alpha储存当前透明度。
把上面的element.offsetLeft改成变量alpha。
运动和停止条件部分进行更改。如下：
window.onload = function(){
    var oImg = document.getElementById('img1');
    oImg.onmouseover = function(){
        startMove(100);
    }
    oImg.onmouseout = function(){
        startMove(30);
    }
}
var timer = null;
//保存透明度的数字值
var alpha = 30;
function startMove(iTarget){
    var oDiv = document.getElementById('img1');
    clearInterval(timer);
    timer = setInterval(function(){
        var iSpeed = 0;
        if(alpha > iTarget){
            iSpeed = -1;
        }else{
            iSpeed = 1;
        }
        if(alpha == iTarget){
            clearInterval(timer);
        }else{
                        //改变透明度速度值
            alpha += iSpeed;
            oDiv.style.filter = 'alpha(opacity:'+ alpha+')';
            oDiv.style.opacity = alpha/100;
            document.title = alpha;
        }

    },30)
}
window.onload = function(){
    var btn = document.getElementsByTagName('input')[0];
    btn.onclick = function(){
        startMove(300);
    }
}
var timer = null;
function startMove(iTarget){
    var oDiv = document.getElementById('div1');
    clearInterval(timer);
    timer = setInterval(function(){
        //求出带有变化的速度
        var iSpeed = (iTarget - oDiv.offsetLeft) / 8;
        if(oDiv.offsetLeft == iTarget){
            clearInterval(timer);
        }else{
            oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
        }
        document.title = oDiv.offsetLeft + '...' + iSpeed;
    },30);
}
function startMove(iTarget){
    var oDiv = document.getElementById('div1');
    clearInterval(timer);
    timer = setInterval(function(){
        var iSpeed = (iTarget - oDiv.offsetLeft) / 8;
        //对正的速度向上取整，负的速度向下取整
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
        if(oDiv.offsetLeft == iTarget){
            clearInterval(timer);
        }else{
            oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
        }
        document.title = oDiv.offsetLeft + '...' + iSpeed;
    },30);
}