9种原生js动画效果

###  1，匀速动画效果
```
window.onload = function() {
    var odiv = document.getElementById('odiv');
    odiv.onmouseover = function() {
        startMover(0);
    }
    odiv.onmouseout = function() {
        startMover(-200);
    }
}
var timer = null;

function startMover(itarget) { //目标值
    clearInterval(timer); //执行当前动画同时清除之前的动画
    var odiv = document.getElementById('odiv');
    timer = setInterval(function() {
        var speed = 0;
        if (odiv.offsetLeft > itarget) {
            speed = -1;
        } else {
            speed = 1;
        }
        if (odiv.offsetLeft == itarget) {
            clearInterval(timer);
        } else {
            odiv.style.left = odiv.offsetLeft + speed + 'px';
        }
    }, 30);
}
```
### 2，缓冲动画效果
```
window.onload = function() {
    var odiv = document.getElementById('odiv');
    odiv.onmouseover = function() {
        startMover(0);
    }
    odiv.onmouseout = function() {
        startMover(-200);
    }
}
var timer = null;

function startMover(itarget) { //速度和目标值
    clearInterval(timer); //执行当前动画同时清除之前的动画
    var odiv = document.getElementById('odiv');
    timer = setInterval(function() {
        var speed = (itarget - odiv.offsetLeft) / 10; //缓冲动画的速度参数变化值
        //如果速度是大于0，说明是向右走，那么就向上取整
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        //Math.floor();向下取整
        if (odiv.offsetLeft == itarget) {
            clearInterval(timer);
        } else {
            //clientLeft 返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离 
            odiv.style.left = odiv.offsetLeft + speed + 'px';
        }
    }, 30);
}
```
### 3，透明度动画
```
window.onload = function() {
    var odiv = document.getElementsByTagName('div');
    for (var i = 0; i < odiv.length; i++) {
        odiv[i].onmouseover = function() {
            startOP(this, 100);
        }
        odiv[i].onmouseout = function() {
            startOP(this, 30);
        }
        odiv[i].timer = null; //事先定义
        odiv[i].alpha = null; //事先定义
        //这里发现一个问题，对象的动画属性可以不定义，但是透明度属性必须定义，否则报错
    }
}

function startOP(obj, utarget) {
    clearInterval(obj.timer); //先关闭定时器
    obj.timer = setInterval(function() {
        var speed = 0;
        if (obj.alpha > utarget) {
            speed = -10;
        } else {
            speed = 10;
        }
        obj.alpha = obj.alpha + speed;
        if (obj.alpha == utarget) {
            clearInterval(obj.timer);
        }
        obj.style.filter = 'alpha(opacity:' + obj.alpha + ')'; //基于IE的
        obj.style.opacity = parseInt(obj.alpha) / 100;
    }, 30);
}
```
### 4，多物体动画
```
window.onload = function() {
    var olist = document.getElementsByTagName('li');
    for (var i = 0; i < olist.length; i++) {
        olist[i].onmouseover = function() {
            startmov(this, 400);
        };
        olist[i].onmouseleave = function() {
            startmov(this, 200);
        };
        olist[i].timer = null;
    }

    function startmov(obj, itarget) {
        clearInterval(obj.timer); //执行动画之前清除动画
        obj.timer = setInterval(function() {
            var speed = 0;
            speed = (itarget - obj.offsetWidth) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (obj.offsetWidth == itarget) {
                clearInterval(obj.timer);
            } else {
                obj.style.width = obj.offsetWidth + speed + 'px';
            }
        }, 30);
    }
}
```
### 5，获取样式动画
```
window.onload = function() {
    var odiv = document.getElementById('odiv');
    odiv.onmouseover = function() {
        startMov(this);
    };

    function startMov(obj) {
        setInterval(function() {
            obj.style.width = parseInt(getStyle(obj, 'width')) + 1 + 'px';
            obj.style.fontSize = parseInt(getStyle(obj, 'fontSize')) + 1 + 'px';
        }, 30);
    }

    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        }
    }
}
```
### 6，多物体复杂动画
```
window.onload = function() {
    var li1 = document.getElementById('li1');
    var li2 = document.getElementById('li2');
    li1.onmouseover = function() {
        startMov(this, 400, 'width');
    };
    li1.onmouseout = function() {
        startMov(this, 200, 'width');
    };
    li2.onmouseover = function() {
        startMov(this, 200, 'height');
    };
    li2.onmouseout = function() {
        startMov(this, 100, 'height');
    };

    function startMov(obj, itarget, attr) {
        clearInterval(obj.timer); //执行动画之前清除动画
        obj.timer = setInterval(function() {
            var icur = parseInt(getStyle(obj, attr));
            var speed = 0;
            speed = (itarget - icur) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (icur == itarget) {
                clearInterval(obj.timer);
            } else {
                obj.style[attr] = icur + speed + 'px';
            }
        }, 30);
    }

    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        }
    }
}
```
### 7，多物体复杂动画（带透明度的）
```
window.onload = function() {
    var li1 = document.getElementById('li1');
    var li2 = document.getElementById('li2');
    li1.onmouseover = function() {
        startMov(this, 100, 'opacity');
    };
    li1.onmouseout = function() {
        startMov(this, 30, 'opacity');
    };
    li2.onmouseover = function() {
        startMov(this, 200, 'height');
    };
    li2.onmouseout = function() {
        startMov(this, 100, 'height');
    }
    li1.timer = null;
    li2.timer = null;

    function startMov(obj, itarget, attr) {
        clearInterval(obj.timer); //执行动画之前清除动画
        obj.timer = setInterval(function() {
            var icur = 0;
            if (attr == 'opacity') {
                icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); //转换成整数,并且四舍五入下
                //计算机在计算小数的时候往往是不准确的！
            } else {
                icur = parseInt(getStyle(obj, attr));
            }
            var speed = 0;
            speed = (itarget - icur) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (icur == itarget) {
                clearInterval(obj.timer);
            } else {
                if (attr == 'opacity') {
                    obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
                    obj.style.opacity = (icur + speed) / 100;
                } else {
                    obj.style[attr] = icur + speed + 'px';
                }
            }
        }, 30);
    }

    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        }
    }
}
```
### 8，链式动画
```
window.onload = function() {
    var li1 = document.getElementById('li1');
    li1.onmouseover = function() {
        startMov(li1, 400, 'width', function() {
            startMov(li1, 200, 'height', function() {
                startMov(li1, 100, 'opacity');
            });
        });
    };
    li1.onmouseout = function() {
        startMov(li1, 30, 'opacity', function() {
            startMov(li1, 100, 'height', function() {
                startMov(li1, 100, 'width');
            });
        });
    };
    li1.timer = null;

    function startMov(obj, itarget, attr, fn) { //fn回调函数
        clearInterval(obj.timer); //执行动画之前清除动画
        obj.timer = setInterval(function() {
            var icur = 0;
            if (attr == 'opacity') {
                icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); //转换成整数,并且四舍五入下
                //计算机在计算小数的时候往往是不准确的！
            } else {
                icur = parseInt(getStyle(obj, attr));
            }
            var speed = 0;
            speed = (itarget - icur) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (icur == itarget) {
                clearInterval(obj.timer);
                if (fn) {
                    fn();
                }
            } else {
                if (attr == 'opacity') {
                    obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
                    obj.style.opacity = (icur + speed) / 100;
                } else {
                    obj.style[attr] = icur + speed + 'px';
                }
            }
        }, 30);
    }

    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        }
    }
}
```
### 9，多物体同时运动动画
```
window.onload = function() {
    var li1 = document.getElementById('li1');
    li1.onmouseover = function() {
        startMov(li1, {
            width: 201,
            height: 200,
            opacity: 100
        });
    };
    li1.onmouseout = function() {
        startMov(li1, {
            width: 200,
            height: 100,
            opacity: 30
        });
    };
    li1.timer = null;

    function startMov(obj, json, fn) { //fn回调函数
        clearInterval(obj.timer); //执行动画之前清除动画
        var flag = true; //是否动画都完成了
        obj.timer = setInterval(function() {
            for (var attr in json) {
                var icur = 0;
                if (attr == 'opacity') {
                    icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); //转换成整数,并且四舍五入下
                    //计算机在计算小数的时候往往是不准确的！
                } else {
                    icur = parseInt(getStyle(obj, attr));
                }
                var speed = 0;
                speed = (json[attr] - icur) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if (icur != json[attr]) {
                    flag = false;
                }
                if (attr == 'opacity') {
                    obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
                    obj.style.opacity = (icur + speed) / 100;
                } else {
                    obj.style[attr] = icur + speed + 'px';
                }
                if (flag) {
                    clearInterval(obj.timer);
                    if (fn) {
                        fn();
                    }
                }
            }
        }, 30);
    }

    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        }
    }
}