JavaScript 运动（缓冲运动，多物体运动 ,多物体多值运动+回调机制）

匀速运动（当需要物体做匀速运动直接调用statMove函数）

 

function startMove(dom, speed,targetPosetion){     //dom : 运动对象， speed :运动速度 targetPosition : 到达目标位置
　　clearInterval(timer);                           //防止定时器叠加，先清除定时器。
 3    speed = targetPosetion - dom.offsetLeft > 0 ? speed : -speed;   
                                                   //断物体到移动的目标位置的左边还是右边，左边速度是正的，右边速度是负的。
　　timer = setInterval(function(){ 　　            //设置定时器。变量timer要定义在函数外面。
　　　　if(Math.abs(targetPosetion - dom.offsetLeft ) < Math.abs(speed)){  
　　　　　　clearInterval(timer);                   //当目位置减去物体偏移量小于定时器移动的位置（因为在移动就超出了目标位置），清除定时器
　　　　　　dom.style.left = targetPosetion + "px"; //因为距离目标位置还有一小段距离，直接让物体等于目标位置就行
　　　　}else{
　　　　　　dom.style.left = dom.offsetLeft + speed + "px"; 
　　　　}
　　},30);
}

 

缓冲运动（越接近目标，速度越慢）缓运运动比直线运动视觉性更好，更常用

 

function startMove(dom, targetPosetion) { 
　　clearInterval(timer);
　　var speed = null;
　　timer = setInterval(function () {                             
　　　　speed = (targetPosetion - dom.offsetLeft) /10;  //因为越接近目标速度越慢，并且相距越短，所以可以用距离表示速度（由于速度太大，需要除以一个数或乘一个小数）
　　　　speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 
　　　　if(dom.offsetLeft == targetPosetion){
　　　　　　clearInterval(timer);
　　　　}else{
　　　　　　dom.style.left = dom.offsetLeft + speed + "px";
　　　　}
　　}, 30)
}

6：当目标位置 - 物体偏移量小于除数时，speed就等于小数了， 但是偏移量都是整数，就会自动的取舍值，例如：dom.style.left = 355.24px 实际会转换成dom.style.left = 355px; 导致最后怎么加都是原来的那个整数。所以只要有小数就向上取整（Math.ceil()），加上1。当是负值的时候就下取整（Math.floor()）.因为当speed是小数时，就会被取整。所以最后是一个像素一个像素加上去的，所以物体的偏移量正好等于目标位置时就清除定时器。

 

颜色渐变的缓冲运动

 

因为让当前的颜色渐变需要让当前的opacity增加或减少，获取当前的透明度opacity可以用计算样式window.getComputedStyle。

计算样式只读，返回的都是绝对值，没有相对单位

获取计算样式函数

function getStyle(dom,attr){
　　if(window.getComputedStyle){
　　　　return window.getComputedStyle(dom,null)[attr];
　　}
　　else{
　　　　return dom.currentStyle[attr]; //IE8不兼容，IE独有属性currentStyle
　　}
}

 

让物体透明度缓冲变化

 

startMove(div,0.5);     
function startMove(dom, targetOpacity) {
　　clearInterval(timer);  targerOpacity = targetOpacity * 100;  //透明度的范围是0-1，而缓冲变化最小变化是1 需要把缓冲范围变大（扩大100倍）。
　　var speed = null,current = null;
　　timer = setInterval(function () {
　　　　current = parseFloat(getStyle(div,'opacity')) * 100;
　　　　console.log(current);
　　　　speed = (targetOpacity - current) / 10;
　　　　speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
　　　　if (current == targetOpacity) {
　　　　　　clearInterval(timer);
　　　　} else {
　　　　dom.style.opacity = (current + speed) / 100;             //当赋值时需要缩小100倍
　　　　}
　　}, 30)
}

 

多物体运动

 

例：4个div，鼠标移入到那个div，宽度做缓冲运动移动到400；移除宽度变为100。

下面的代码。橙色的部分有timer变为dom自己的属性dom.timer,在上面定义timer的时候，

定义的timer是在函数外面的，4个div共用一个timer定时器，当鼠标移入第一个div时，开启一个定

时器，移出div时，又开启一个定时器。当快速从第一个div移到第二个div是，发现宽度回不去了，

因为鼠标移入第二个div时。把上一个定时器给清除了，重新开启了一个定时器。

 

所以解决这个问题，就是在每个div上都加一个定时器。

当清理定时器的时候也是清理自己的定时器，不会影响其他的，就在每个元素上加上timer属性。

 function startMove(dom, targetPosetion) { 
            clearInterval(dom.timer);
            var speed = null;
            dom.timer = setInterval(function () {
                current = parseFloat(getStyle(dom, 'width')); //用计算样式获取当前宽度值。
                speed = (targetPosetion - current) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                console.log(speed, current);
                if (current == targetPosetion) {
                    clearInterval(dom.timer);
                } else {
                    dom.style.width = current + speed + "px";
                }
            }, 30)
        }
 
for (var i = 0; i < div.length; i++) {
　　div[i].onmouseenter = function () {
　　　　startMove(this, 400)
　　}
　　div[i].onmouseleave = function () {
　　　　startMove(this, 100);
　　}
}

 

多物体不同属性运动

 

function startMove(dom , attr , target){
　　clearInterval(dom.timer);
　　dom.timer = setInterval(function(){
　　　　var current = null,speed = null;
　　　　if(attr == 'opacity'){
　　　　　　current = parseFloat(getStyle(dom,attr)) * 100;
 　　　　}else{
　　　　　　current = parseFloat(getStyle(dom,attr));
　　　　}
　　　　speed = (target - current) / 10;
　　　　speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
　　　　if(current == target){
　　　　　　clearInterval(dom.timer);
　　　　}
　　　　else if(attr == 'opacity'){
　　　　　　dom.style.opacity = (current + speed) / 100;
　　　　}else{
　　　　　　dom.style[attr] = (current + speed) + "px";
　　　　}
　　},30)
}
 
var div = document.getElementsByTagName('div');
div[0].onmouseenter = function(){
　　startMove(this,'width',400);
};
div[1].onmouseenter = function(){
　　startMove(this,'height',400);
};
div[2].onmouseenter = function(){
　　startMove(this,'borderWidth',20);
};
div[3].onmouseenter = function(){
　　startMove(this,'opacity',50);
};

 

多物体多值运动 + 回调机制 

 

function startMove(dom, targetObj, callback) {
            clearInterval(dom.timer);
            dom.timer = setInterval(function () {
                var stop = true;
                var speed = null, current = null;
                for (var prop in targetObj) {
                    if (prop == 'opacity') {
                        current = parseFloat(getStyle(dom, prop))*100;
                    } else {
                        current = parseFloat(getStyle(dom, prop));
                    }
                    speed = (targetObj[prop] - current) / 10;
                    speed = speed>0?Math.ceil(speed):Math.floor(speed);
                    if (prop == 'opacity') {
                        dom.style.opacity = (current + speed) / 100;
                    } else {
                        dom.style[prop] = (current + speed) + "px";
                    }
                    if (targetObj[prop] != current) {
                        stop = false;
                    }
                }
                if (stop == true) {
                    clearInterval(dom.timer);
                    typeof callback == 'function' && callback();
                }
            }, 30);
        }

//让多物体多值运动，由于多值就可以用对象来装。
startMove(dom, targetObj, callback)接收3个参数，运动对象，想要改变的多值属性对象，回调函数
跟上面一样一地步清除定时器，然后设置定时器，用for in 循环传过来的对象属性，
如果传过来的是opacity 就要扩大100倍，不是就正常调用上面getStyle()方法，返回一个计算属性。
设置一个锁，每次定时器执行时定义一个变量stop = true 可以停止，
当for in 循环时，判断如果有一个当前值不等于目标值的时候，就让stop = false。不可以停止
for in 结束，stop == true 的时候就代表所有的值都到达目标值，这时候就可以清空定时器。这个运动过程结束，调用回调函数

　　　　　var divOne = document.getElementById('one');
        var divTwo = document.getElementById('two');
        divOne.onclick = function () {
            startMove(this, { width: 400,height: 400,left: 200,top: 300,opacity: 50}, function () {
                startMove(divTwo, { width: 400, height: 400, left: 200, top: 300, opacity: 50 }, function () {
                    alert(555);
                })
            })
        }