日期:2014-05-16  浏览次数:20386 次

js anim小框架完善的问题
HTML code

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>
        <style>
            .a {
                position:absolute; left:100px; top:100px;
                width:100px; height:100px;
                border:1px solid red; background:#ddd;
                opacity:1;
            }
        </style>
    </head>
    <body>
        <div id="a" class="a">a</div>
        <div id="b">b</div>
        <button id="pause">pause</button>
        <button id="move">move</button>
        <script>
            function $(o){return document.getElementById(o)}
            
            var Easing = {
                'linear' : function(t){
                    return t;
                },
                'easeIn' : function(t){
                    return t * t;
                },
                'easeOut' : function(t) {
                    return ( 2 - t) * t;
                },
                'easeBoth' : function(t){
                    return (t *= 2) < 1 ?
                        .5 * t * t :
                        .5 * (1 - (--t) * (t - 2));
                },
                'easeInStrong' : function(t){
                    return t * t * t * t;
                },
                'easeOutStrong' : function(t){
                    return 1 - (--t) * t * t * t;
                },
                'easeBothStrong' : function(t){
                    return (t *= 2) < 1 ?
                        .5 * t * t * t * t :
                        .5 * (2 - (t -= 2) * t * t * t);
                },
                'elasticIn' : function(t){
                    var p = .3, s = p / 4;
                    if (t === 0 || t === 1) return t;
                    return -(Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * (2 * Math.PI) / p));
                },
                'elasticOut' : function(t){
                    var p = .3, s = p / 4;
                    if (t === 0 || t === 1) return t;
                    return Math.pow(2, -10 * t) * Math.sin((t - s) * (2 * Math.PI) / p) + 1;
                },
                'elasticBoth' : function(t){
                    var p = .45, s = p / 4;
                    if (t === 0 || (t *= 2) === 2) return t;

                    if (t < 1) {
                        return -.5 * (Math.pow(2, 10 * (t -= 1)) *
                            Math.sin((t - s) * (2 * Math.PI) / p));
                    }
                    return Math.pow(2, -10 * (t -= 1)) *
                        Math.sin((t - s) * (2 * Math.PI) / p) * .5 + 1;
                },
                'backIn' : function(t){
                    if (t === 1) t -= .001;
                    return t * t * ((BACK_CONST + 1) * t - BACK_CONST);
                },
                'backOut' : function(t){
                    return (t -= 1) * t * ((BACK_CONST + 1) * t + BACK_CONST) + 1;
                },
                'backBoth' : function(t){
                    if ((t *= 2 ) < 1) {
                        return .5 * (t * t * (((BACK_CONST *= (1.525)) + 1) * t - BACK_CONST));
                    }
                    return .5 * ((t -= 2) * t * (((BACK_CONST *= (1.525)) + 1) * t + BACK_CONST) + 2);
                },
                'bounceIn' : function(t){
                    return 1 - Easing.bounceOut(1 - t);
                },
                'bounceOut' : function(t){
                    var s = 7.5625, r;
                    if (t < (1 / 2.75)) {
                        r = s * t * t;
                    }
                    else if (t < (2 / 2.75)) {
                        r = s * (t -= (1.5 / 2.75)) * t + .75;
                    }
                    else if (t <