JavaScript原生运动框架

    在网页交互过程中，运动是比不可少的，每次交互产生运动的时候，都要写一次关于这次运动的代码，显然很麻烦，封装运动框架能让代码的可读性增强很多。

    匀速运动

        匀速运动就是让dom元素匀速的进行某一个动作（位置，大小等）。

var timer = null;
function anmite(dom,target){
    var speed;
    if(dom.offsetLeft < target){
        speed = 10;
    } else{

function anmite(dom, target) {
    var timer = null, spend;
    clearInterval(timer);
    timer = setInterval(function () {
        spend = (target - dom.offsetLeft) / 10;
        spend = spend > 0 ? Math.ceil(spend) : Math.floor(spend);
        if (dom.offsetLeft == target) {
            clearInterval(timer);
        } else {
            dom.style.left = dom.offsetLeft + spend + 'px';
        }
    }, 30)
}

    缓冲运动

        缓冲就是当dom元素向某一个运动趋势进行的时候，越接近所运动速度

function anmite(dom, target) {
    var timer = null, spend;
    clearInterval(timer);
    timer = setInterval(function () {
        spend = (target - dom.offsetLeft) / 10;
        spend = spend > 0 ? Math.ceil(spend) : Math.floor(spend);
        if (dom.offsetLeft == target) {
            clearInterval(timer);
        } else {
            dom.style.left = dom.offsetLeft + spend + 'px';
        }
    }, 30)
}

        多物体运动

        多物体运动是指，当一个dom元素在运动的时候，可以让其他dom元素进行运动，并且互补影响。问题就出现了，几个dom元素所用一个运动框架，那么所用的定时器也是一个timer，当一个物体正在运动的时候，进行下一个物体运动，此时因为共用一个timer会清除上一个定时器，会出现bug，因此，把timer绑定为dom属性，每一个dom元素的timer都是独一无二的，互不影响。

function anmite(dom,target){
    console.log(dom);
    clearInterval(dom.timer);
    dom.timer = setInterval(function(){
        var spend = (target - dom.offsetWidth) / 10;
        spend = spend > 0 ? Math.ceil(spend) : Math.floor(spend);
        if(dom.offsetWidth == target){
            clearInterval(dom.timer);
        } else {
            dom.style.width = dom.offsetWidth + spend + 'px';
        }
    },30)
}

        任意值运动

        上面说到的运动都是在确定属性上进行的运动（要么是left、要么是width），要把运动框架造成，任意方式的运动是很有必要的。此时注意opacity在ie上的兼容处理

function animate(dom,target,attr){
    clearInterval(dom.timer);
    dom.timer = setInterval(function(){
        if(attr == "opacity"){
            var atr = parseFloat(getStyle(dom,attr)) * 100;
        } else {
            var atr = parseInt(getStyle(dom, attr));                                
        }
        var spend = (target - atr) / 10;
        spend = spend > 0 ? Math.ceil(spend) : Math.floor(spend);
        if(atr == target){
            clearInterval(dom.timer);
        } else {
            if(attr == "opacity"){
                dom.style.filter = "alpha(opacity:" + spend+ ")"
                dom.style[attr] = (atr + spend) / 100 ;
            }
            dom.style[attr] = atr + spend +'px';
        }
    },30)
}
function getStyle(dom,attr){
    if(window.getComputedStyle) {
        return getComputedStyle(dom,null)[attr];
    } else {
        return dom.currentStyle[attr];
    }
}

         链式运动   

        链式运动，一系列运动，当响应事件之后，做出的一系列运动，当然，后一个运动是在前一个运动结束后进行的。此时需要注意回调函数的this指向问题。

function animate(dom,target,attr,handle){
    clearInterval(dom.timer);
    dom.timer = setInterval(function(){
        if(attr == "opacity"){
            var atr = parseFloat(getStyle(dom,attr)) * 100; 
        } else{
            var atr = parseInt(getStyle(dom,attr));
        }
        var spend = (target - atr) /10;
        spend = spend > 0 ? Math.ceil(spend) : Math.floor(spend);
        if(atr == target){
            clearInterval(dom.timer);
            //回调函数
            if (handle) {
                handle.call(dom);
            }
        } else {
            if(attr == "opacity"){
                dom.style.filter = "alpha(opacity"+ spend + ")";
                dom.style[attr] = (atr + spend) /100;
            } else {
                dom.style[attr] = atr + spend +'px';
            }
        }
    },30)
}
function getStyle(dom,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(dom,null)[attr];
    } else {
        return dom.currentStyle[attr];
    }
}

        同时运动

        上面所说的都是让dom元素进行一个属性的运动，比如说只能让物体动width或者left等等，同时运动是让一个物体在进行width运动的同时进行left运动。此时选择把dom属性封装成对象，进行遍历循环运动。

function animate(dom,obj,handle){
    clearInterval(dom.timer);                    
    dom.timer = setInterval(function () {
        var bool = true;                        
        for (var k in obj) {
            if (k == "opacity") {
                var atr = parseFloat(getStyle(dom, k)) * 100;
            } else {
                var atr = parseInt(getStyle(dom, k));
            }
            var spend = (obj[k] - atr) / 10;
            spend = spend > 0 ? Math.ceil(spend) : Math.floor(spend);
            if(atr != obj[k]){
                bool = false;
            }
            if (k == "opacity") {
                dom.style.filter = "alpha(opacity" + spend + ")";
                dom.style[k] = (atr + spend) / 100;
            } else {
                dom.style[k] = atr + spend + 'px';
            }
            if(bool){
                clearInterval(dom.timer);
                if(handle){
                    handle.call(dom);
                }
            }
        }
    }, 30)         
}
function getStyle(dom,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(dom,null)[attr];
    } else {
        return dom.currentStyle[attr];
    }
}

         --主页传送门--