JavaScript “完美運動架構”

標籤：

/* “完美運動架構”，所謂“完美”，就是可以實現多個參數，多個物體運動互不影響的一個運動函數move()。 * 大致結構如下：運動架構 EXP： move(obj,{width:200,height:200},fnEnd) *         obj： 運動物體 *         json： 運動屬性和運動目標值的json集合，{‘width‘:200,‘height‘:200} *         sv： 運動的速度，speed-value,值越小速度越大 *         fnEnd： 運動結束後的回呼函數 */function move(obj, json, sv, fnEnd) {    //取CSS樣式值    function getStyle(obj, attr) {            if (obj.currentStyle) {                return obj.currentStyle[attr];            } else {                return getComputedStyle(obj, false)[attr];            }        }        //運動開始              clearInterval(obj.timer);    obj.timer = setInterval(function() {        var isAllCompleted = true; //假設全部運動都完成了        for (attr in json) {            var attrValue = 0;            switch (attr) {                case ‘opacity‘:                    attrValue = Math.round(parseFloat(getStyle(obj, attr)) * 100);                    break;                default:                    attrValue = parseInt(getStyle(obj, attr));            }            //如果沒有傳入sv，則為4            var speed = (json[attr] - attrValue) / (sv || 4);            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);            //如果迴圈過程中存在尚未結束的運動，isAllCompleted為假            if (attrValue != json[attr]) isAllCompleted = false;            switch (attr) {                case ‘opacity‘:                    {                        obj.style.filter = "alpha(opacity=" + (attrValue + speed) + ")";                        obj.style.opacity = (attrValue + speed) / 100;                    };                    break;                default:                    obj.style[attr] = attrValue + speed + ‘px‘;            }        } //for in end!        //所有迴圈結束後，只有當全部運動結束後（isAllCompleted=true）時才關閉定時器        if (isAllCompleted) {            clearInterval(obj.timer);            if (fnEnd) fnEnd();        }    }, 30);} //move() end !

來自 <http://www.tangbc.com/blog/#frontends/104> 

JavaScript “完美運動架構”