JS动画效果(样式获取、链式动画、动画框架)

样式获取

上一篇”JS动画效果”中使用setInterval()定时修改对象样式，从而实现动画效果。修改对象样式时需要获取对象原有的样式值，通过对象的offsetLeft、offsetWidth等属性来获取对象的样式。但在运用中，offsetLeft、offsetWidth等属性只能获取少量的样式值，而且offsetWidth等并不难准确获取我们需要的样式值。例如对象有border样式，若要修改width的值，用offsetWidth=width+border + padding去表示width显示是不正确的，此时我们需要一种通用的方式获取对象的样式值。

JS获取获取样式

1. element.style
   element.style只能获取写在元素标签中的style属性里的样式值，无法获取到定义在<style></style>和通过<link href="css.css">加载进来的样式属性
   例如：

   var ele = document.getElementById('test');
   alert(ele.style.width);

2. getComputedStyle()
   获取当前元素所有最终使用的CSS属性值
   语法：

   window.getComputedStyle("元素", "伪类");

   第一个参数为要获取样式的元素，第二个参数为伪类。如该不需要伪类，第二个参数可以设置为null
   例如：

   var ele = document.getElementById("test");
   test = window.getComputedStyle(ele, null);
   alert(test.width);
   

3. element.currentStyle
   currentStyle是IE浏览器的一个属性，element.currentStyle返回的是元素当前应用的最终CSS属性值（包括外链CSS文件，页面中嵌入的<style></style>属性等）
   语法:

   var style = element.currentStyle;

   例如：

   var ele = document.getElementById("test");
   test = ele.currentStyle; 
   alert(test.color); 

4. getPropertyValue()
   getPropertyValue获取CSS样式的直接属性名称,属性名不支持驼峰格式，IE6-8不支持该方法
   语法:

   window.getComputedStyle(element, null).getPropertyValue(attr);

5. getAttribute
   getAttribute与getPropertyValue类似，有一点的差异是属性名驼峰格式,该方法只支持IE6-8
   语法:

   element.getAttribute(attributename)

兼容的获取属性样式方法
JS动画获取样式值时，IE和firefox、chrome获取的方式不同。对于不同的样式，有的单位是px，有的不含单位(透明度)。下面是一种兼容的方法，接受两个参数，第一个参数是获取样式的对象，第二个参数是样式。若获取样式为透明度，则统一采用’opacity’为第二个参数。

function getStyle(obj,attr) {
    //返回属性值，int或者float
    if(document.currentStyle){
        var res = currentStyle(obj)[attr]; //IE
    }
    else {
        var res =  getComputedStyle(obj,null)[attr]; //Firefox
    }
    if(attr == 'opacity'){
        return parseFloat(res);
    }else{
        return parseInt(res);
    }
}

链式动画

若想要在一个动画结束时继续一个新的动画，则可以在前一个动画结束清除定时器后继续另一个动画。
例如:

function onMove(obj,attr，target,fn) {
    //obj为对象，attr为变化的属性，target为目标变化值，fn为动画结束后要运行的下一个函数
    clearInterval(obj.timer);
    //设定定时器  
    obj.timer = setInterval(function () {
        if(attr == 'opacity'){
            //若为透明度，则转化为0-100范围
            var icur = Math.round(100*getStyle(obj,attr));
        }else {
            var icur = getStyle(obj,attr);
        }

        if(icur!=target){
            var speed = (target>icur)?10:-10;    //变化速度
            if(attr == 'opacity'){
                obj.style[attr] = (icur + speed)/100;
                obj.style['filter'] = 'alpha(opacity:'+(icur+speed)+')';
            }else {
                obj.style[attr] = icur + speed + 'px';
            }
        }
        else {
            clearInterval(obj.timer);
            if(fn){   //如果有下一个动画，则执行下一个
                fn();
            }
        }
    },30)
}

动画框架

将JS动画的代码封装成一个简单框架

function onMove(obj,json,fn) {
    //obj为动画的对象，json为动画的样式的json格式，可以多个样式，fn为下一个函数
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var flag = true;    //设置flag，标注是否所有属性改变完全
        for(var attr in json){
            if(attr == 'opacity'){    //若样式是透明度，则转化为0-100
                var icur = Math.round(100*getStyle(obj,attr));
            }else {
                var icur = getStyle(obj,attr);
            }
            if(icur!=json[attr]){
                flag = false;
                //var speed = (json[attr]>icur)?10:-10;   //变化匀速
                var speed = (json[attr]-icur)/8;    //变化变速
                speed = (speed>0)?Math.ceil(speed):Math.floor(speed);   //将变化速度转化为整数
                if(attr == 'opacity'){
                    obj.style[attr] = (icur + speed)/100;
                    obj.style['filter'] = 'alpha(opacity:'+(icur+speed)+')';
                }else {
                    obj.style[attr] = icur + speed + 'px';
                }
            }
        }
        if(flag == true){
            clearInterval(obj.timer);
            if(fn){
                fn();
            }
        }

    },30)
}
function getStyle(obj,attr) {
    //返回属性值，int或者float
    if(document.currentStyle){
        var res = currentStyle(obj)[attr]; //IE
    }
    else {
        var res =  getComputedStyle(obj,null)[attr]; //Firefox
    }
    if(attr == 'opacity'){
        return parseFloat(res);
    }else{
        return parseInt(res);
    }
}

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运动框架</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            width: 200px;
            height: 200px;
            background: red;
            margin-top: 20px;
            opacity: 0.3;
            filter: alpha(opacity:30);

        }
    </style>
    <!--move.js 为上面的运动框架 -->
    <script type="text/javascript" src="move.js"></script>
    <script type="text/javascript" >
        window.onload = function () {
            var onDiv = document.getElementById('div1');
            onDiv.onmouseover = function(){
                onMove(onDiv,{'width':400,'height':400,'opacity':100});
            }
            onDiv.onmouseout = function () {
                onMove(onDiv,{'width':200,'height':200,'opacity':30});
            };
        }
    </script>
</head>
<body>
<div id="div1"></div>
</body>
</html>