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
        })
    })
})；