<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>變速運動</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 0px;
left: 0px;
opacity: 1;
filter: alpha(opacity=100);
}
</style>
</head>
<body>
<script src="js/Tween.js" type="text/javascript" charset="utf-8"></script>
<div id="box"></div>
<script type="text/javascript">
var oBox = document.getElementById("box");
//調用函數，傳參
animate( oBox , {'width':300,'height':250,'top':300,'left':200,'opacity':0.4} , 2000 , 'linear' ,function(){
animate( oBox , {'width':100,'height':50,'top':100,'left':100,'opacity':0.8} , 2000 , 'linear');
} );
function animate( obj , Json , time , ev , fn ){
//判斷缺省參數，最好把參數都放到一個json中，可以隨意傳參
if( typeof time == 'undefined' )
{
time = 1000;
ev = 'linear';
}
else if( typeof time == 'string' )
{
fn = ev;
ev = time;
time = 1000;
}
else if( typeof ev == 'function' )
{
fn = ev;
ev = 'linear';
}
else if( typeof time == 'function' )
{
fn = time;
ev = 'linear';
time = 1000;
}
ev = ev || event;
//定義一個json oB來存儲運動前的初始狀態下的屬性值，即運動的初始位置
var oB = {};
for( attr in Json )
{
oB[attr] = parseInt( getStyle( obj , attr ) );
}
//定義一個json oC來存儲運動結束位置與當前位置的差值
var oC = {};
for( attr in Json )
{
oC[attr] = Json[attr] - parseInt( getStyle( obj , attr ) );
}
//獲取當前開始時間
var startTime = new Date().getTime();
clearInterval(obj.timer);
//定時器，控制運動時間，時間到，清除
obj.timer = setInterval( function(){
//獲取當前時間
var nowTime = new Date().getTime();
//獲取運動過程的時間，如果超過設置的運動時間就停止
var oT = Math.min( nowTime - startTime , time );
//獲取需要運動的每個屬性
for( attr in Json )
{
//屬性為透明度時
if( attr == 'opacity' )
{
var iCon = Tween[ ev ]( oT , oB[attr] , oC[attr] , time );
if( isNaN( iCon ) ){
iCon = 1;
};
obj.style.opacity = iCon;
obj.style.filter = 'alpha(opacity = '+parseInt( (iCon*100) )+')';
}
//屬性不為透明度時
else{
obj.style[attr] = Tween[ ev ]( oT , oB[attr] , oC[attr] , time ) + 'px';
}
}
//設置時間到，清除定時器，執行回調函數
if( oT == time )
{
clearInterval( obj.timer );
fn && fn();
}
},30 )
}
//兼容獲取屬性的屬性值
function getStyle( obj , attr ){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle( obj , false )[attr];
}
</script>
</body>
</html>
