Javascript實現完美的運動動畫框架

運動框架的實現思路

運動，其實就是在一段時間內改變top、bottom、left、right、width、height、opacity的值，到達目的地之後停止。

運動框架的實現代碼：

function getStyle(element, attr) {
	//IE寫法
	if (element.currentStyle) {
		return element.currentStyle[attr];
	} else {
		//標準
		return getComputedStyle(element, false)[attr];
	}
}
function startMove(element, json, time,func) {
    var flag = true; //假設所有運動到達終點.
    clearInterval(element.timer);
    element.timer = setInterval(function () {
        for (var attr in json) {
            //1.取當前的屬性值。
            var iCurrent = 0;
            if (attr === "opacity") { //爲透明度時執行。
                iCurrent = Math.round(parseFloat(getStyle(element, attr)) * 100);
            } else { //默認情況
                iCurrent = parseInt(getStyle(element, attr)); //實際樣式大小
            }
            //2.算運動速度,動畫緩衝效果
            var iSpeed = (json[attr] - iCurrent) / 10; //(目標值-當前值)/縮放係數=速度
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //速度取整

            //3.未到達目標值時，執行代碼 
            if (iCurrent != json[attr]) {
                flag = false; //終止條件
				if (attr === "opacity") { //爲透明度時，執行
					element.style.filter = "alpha(opacity:" + (iCurrent + iSpeed) + ")"; //IE
					element.style.opacity = (iCurrent + iSpeed) / 100; //標準
				} else { //默認
					element.style[attr] = iCurrent + iSpeed + "px";
				}
			} 
            //4. 運動終止，是否回調
            if (flag) {
                clearInterval(element.timer);
                if (func) {
                    func();
                }
            }
        }
    }, time);
}

運動框架的各個接口：

element:需要執行運動的對象

json:執行什麼運動，如{"width":"100"}就是寬度變爲100的運動，如做多個同時運動，請在括號內用 , 隔開

time：定時器，執行動畫持續的時間

func：回調函數，可執行鏈式運動

使用jQuery可以很輕鬆的實現：

如

<pre name="code" class="html">$(function(){
    $("執行運動動畫的對象").mouseenter(function(){
    $(this).animate({"top":"-25px","opacity":"0"},300,function(){//上移25像素，透明度變爲0
            $(this).animate({"top":"20px","opacity":"1"},200);//之後下移20像素，透明度變爲1
        })
    })
})；