題記:?當(dāng)你不再依賴JQuery時(shí)，當(dāng)你已經(jīng)厭倦了引入js類庫(kù)實(shí)現(xiàn)一些動(dòng)畫效果的方式，當(dāng)你想實(shí)現(xiàn)一個(gè)簡(jiǎn)單而實(shí)用的動(dòng)畫框架......下面介 紹下愚人設(shè)計(jì)的動(dòng)畫框架：支持動(dòng)畫緩動(dòng)算法函數(shù)，如Linear、Cubic、Back、Bounce，支持改變高度，寬度，透明度，邊框，外邊距的基本 動(dòng)畫，支持動(dòng)畫的回調(diào)函數(shù)，如開始、暫停、完成的callback等。

?

?

?

Section One

?

游戲動(dòng)畫，F(xiàn)lash動(dòng)畫里一個(gè)比較重要的概念是 幀頻 ，即每秒播放多少幀動(dòng)畫，一般動(dòng)畫是30幀/秒，單位為fps（frames per second）。

?

對(duì)于勻速運(yùn)動(dòng)來(lái)說(shuō)：如果一個(gè)動(dòng)畫的持續(xù)時(shí)間duration為500ms，幀頻frequence為30fps，則總幀數(shù)frames為 (500/1000)*30 = 15 ，即該動(dòng)畫過(guò)程有15個(gè)“畫面”，每走一幀，都計(jì)算出一個(gè)畫面： 畫面當(dāng)前位置 = 開始位置 + (當(dāng)前幀/總幀數(shù))(結(jié)束位置-開始位置) ，如果當(dāng)前幀是最后一幀，則動(dòng)畫結(jié)束。其中setTimeout或setInterval每隔 (500/15)ms 時(shí)間段調(diào)用一次函數(shù)，即計(jì)算一個(gè)畫面。

?

來(lái)看下線性運(yùn)動(dòng)Linear緩動(dòng)算法函數(shù)，t表示當(dāng)前幀，b表示開始位置，c表示發(fā)生偏移的距離值，即當(dāng)前位置-開始位置，d表示總幀數(shù)，符合上面 的推理解釋，對(duì)于其他的算法函數(shù)，道理其實(shí)都是一樣，只不過(guò)在運(yùn)動(dòng)過(guò)程中的曲線不同，有些呈現(xiàn)拋物線，有些呈現(xiàn)線性指數(shù)，對(duì)于數(shù)學(xué)感興趣的可以研究下這些 算法函數(shù)，我也是略知皮毛：

      Linear: function (t, b, c, d) {
	return c * t / d + b;
}
    

?

?

清楚了以上問(wèn)題后，對(duì)于js的動(dòng)畫框架設(shè)計(jì)，就迎刃而解了，廢話不多說(shuō)，來(lái)個(gè) demo 先。

?

?

Section Two

?

代碼總體結(jié)構(gòu)，具體說(shuō)明看注釋，需注意的問(wèn)題： 1） 在私有作用域里定義的變量，要在外部能訪問(wèn)到，需掛在window全局對(duì)象下，如window.Anim = Anim； 2） 動(dòng)畫元素需要設(shè)置定位position屬性； 3） 傳入的外邊距參數(shù)需要駝峰式命名，并且當(dāng)同時(shí)設(shè)置targetPos(元素目標(biāo)位置)和外邊距時(shí)，外邊距的值會(huì)覆蓋targetPos的值，如marginLeft的值會(huì)覆蓋targetPos.left的值，因?yàn)橥膺吘鄬?shí)現(xiàn)動(dòng)畫的原理也是利用元素的left、top值：

      (function(window) {
    /*
     * 工具對(duì)象
     * 包含基本的dom操作，event操作
     */
    var util = {};
    util.dom = {
        // 獲取元素計(jì)算樣式
        getPropValue: function(element, propName) {
        },
        // 設(shè)置透明度
        setOpacity: function(obj, num) {
            document.all ? obj.filters.alpha.opacity = num : obj.style.opacity = num / 100;
        }
        // ......
    };
    util.event = {
        // 獲取事件對(duì)象
        getEvent: function(event) {
        },
        // 獲取事件源目標(biāo)
        getTarget: function(event) {
        },
        // 注冊(cè)事件
        addEvent: function(element, event, handler) {
        },
        // 刪除事件
        removeEvent: function(element, event, handler) {
        },
        // 阻止默認(rèn)行為
        preventDefault: function(event) {
        },
        // 阻止事件冒泡
        stopPropagation: function(event) {
        }
        // ......
    };

    /*
    * 動(dòng)畫緩動(dòng)函數(shù)
    */
    var Tween = {
        Linear: function (t, b, c, d) { return c * t / d + b; },
        Quad: {
            easeIn: function (t, b, c, d) {
                return c * (t /= d) * t + b;
            },
            easeOut: function (t, b, c, d) {
                return -c * (t /= d) * (t - 2) + b;
            },
            easeInOut: function (t, b, c, d) {
                if ((t /= d / 2) < 1) return c / 2 * t * t + b;
                return -c / 2 * ((--t) * (t - 2) - 1) + b;
            }
        },
        // ...
    };

    /*
     * 核心動(dòng)畫
     * @elem 要執(zhí)行動(dòng)畫的元素
     * @options left、top、opacity、width、height、border、marginLeft、marginRight、marginTop、marginBottom
     */
    function Anim(elem, options) {
        this.elem = elem;
        this.options = options;
        // 默認(rèn)樣式屬性
        this.defaults = {
        };
    }
    Anim.prototype = {
        constructor: Anim,
        // 初始化動(dòng)畫
        init: function() {
            this.isStart = false;
            this.isStop = false;
            this.isComplete = false;
            this.isBack = false;
            this.start();
        },
        // 初始化數(shù)據(jù)
        before: function() {
        },
        // 開始動(dòng)畫
        start: function() {
        },
        // 動(dòng)畫過(guò)程
        run: function() {
            this.before();
            // 動(dòng)畫參數(shù)匹配
            this.match();
            // 原路返回
            if (this.isBack) {
                // ...
            }
            if (this.isStart) {
                this.onStart.call(this.elem);
                // 計(jì)算動(dòng)畫
                this.count();
            }
        },
        // 匹配動(dòng)畫的參數(shù)
        match: function() {
        },
        // 計(jì)算動(dòng)畫
        count: function() {
        },
        // 原路返回
        back: function() {
        },
        // 停止動(dòng)畫
        stop: function() {
        },
        // 重置元素
        reset: function() {
        }
    };

    // 全局使用
    if (!window.util) {
        window.util = util;
    }
    if (!window.Anim) {
        window.Anim = Anim;
    }
    if (!window.Tween) {
        window.Tween = Tween;
    }

})(window);
    

?

Last

使用非常簡(jiǎn)單，初始化參數(shù)對(duì)象，然后調(diào)用構(gòu)造函數(shù)Anim即可：

      // 動(dòng)畫參數(shù)設(shè)置
var options = {
    duration: 2000, // 動(dòng)畫持續(xù)時(shí)間
    frequence: 30, // 幀頻
    tweenFunc: Tween.Linear, // 動(dòng)畫緩動(dòng)函數(shù)
    targetPos: {left: 400, top: 300}, // 元素目標(biāo)位置
    opacity: 40, // 透明度(可選)
    width: 80, // 寬度(可選)
    height: 80, // 高度(可選)
    // marginTop: 100, // 上邊距(可選)
    border: '2px solid red', // 邊框(可選)
    // 動(dòng)畫開始callback(可選)
    onStart: function() {
        // this指向當(dāng)前動(dòng)畫元素
    },
    // 動(dòng)畫停止callback(可選)
    onStop: function() {
        // this指向當(dāng)前動(dòng)畫元素
    },
    // 動(dòng)畫完成callback(可選)
    onComplete: function() {
        // this指向當(dāng)前動(dòng)畫元素
    }
};
var anim = new Anim(animElem, options);
    

?

?

最后附上 源代碼 以及easing算法函數(shù)的 demo 。

原文： http://www.cnblogs.com/cyStyle/p/4211783.html