js原生复杂实现animate操作Css3属性(升级版!) 

<!DOCTYPE html>
<html>
<head>
    <title>
        sadsadsadsadsadsadsa
    </title>

    <style type="text/css" media="screen">
        #box {
            width: 200px;
            height: 200px;
            background: red;
            
        }
    </style>

    <script type="text/javascript">
    /**
     * [animate 动画效果(可操作CSS2和CSS3)直接书写CSS3动画效果就可直接识别]
     * @param  {[type]}   obj   [要操作的对象]
     * @param  {[type]}   json  [属性]
     * @param  {[type]}   speed [时间]
     * @param  {Function} fn    [回调]
     * @return {[type]}         [description]
     */
    function animate(obj ,json ,speed ,fn) {
        var startTime = new Date();
        var iCur = 0;
        var iSpeed = 0;
        var Css3 = [];
        var i = 0;
        var px = '';
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
        var iStop = true;
            i++;
            document.title = i;
            for (var name in json) {
                var iTarget = parseInt(json[name].match(/([0-9])+/g, "" ));
                iCur = parseInt(obj.style[name].match(/([0-9])+/g, "" )) || parseInt(css(obj ,name).match(/([0-9])+/g, "" )) || 0;
                var percentage = Math.min(1, (new Date - startTime) / speed);

                if(!inArray(name ,Css3)) {
                    iSpeed = ( iTarget - iCur ) / 8;
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                    iSpeed = (iCur + (iTarget - iCur) * percentage);
                    iValue = iSpeed + css(obj ,name).match(/([a-z])+/g, "" );
                }
                else {
                }
                if(iCur != iTarget && json[name].match(/([a-z])+\((.)+\)/g, "" )) {
                    iStop = false;
                    iValue = json[name].replace(/([0-9])+/, iSpeed)
                }
                if(iCur != iTarget) {
                    iStop = false;
                    obj.style[name] = iValue;
                }
            }

            if(iStop) {
                console.log(new Date - startTime);
                clearInterval(obj.timer);
                fn && fn.call(obj);
            }
            
        } ,13);
    }
    function inArray(b,a){
            for (var i = 0; i <= a.length - 1; i++) {
                if(a[i] == b){
                    return true;
                }
                return false;
            };
        }
    function css(obj, attr) {
        if(obj.currentStyle) {
            return obj.currentStyle[attr];
        }
        else {
            return getComputedStyle(obj ,false )[attr];
        }

    }
    window.onload = function() {
        box.onclick = function() {
            animate(box ,{'width':'400px','height':'600px'} ,1000 ,function() {
                animate(this ,{'transform':'rotate(180deg)'},1000 ,function() {
                    animate(this ,{'width':'100px'},1000 ,function() {
                        animate(this ,{'height':'100px'},1000 ,function() {
                        alert(1)
                        })
                    })
                })
            })
        }
    }
    </script>
</head>
<body>
<div id="box">
    
</div>
</body>
</html>

 

posted @ 2015-02-27 14:22  dsphper  阅读(492)  评论(0)    收藏  举报