封裝一個簡單初級的animate運動框架
一、思路分析
1.需要獲取起點（當前位置）和終點（目標位置），得到變化量以及步長。
信號量JSON samaphoerJSON，即現在的狀態，時刻變化的
終點信號量JSON targetJSON
步長信號量JSON stepJSON
2.代碼編寫步驟
（1）函數設置 function animate(elem,targetJSON,time,callback) {} 並聲明信號量對象
（2）給信號量對象添加屬性，與終點信號量屬性一致 （計算後樣式輪子運用）
（3）聲明步長信號量，獲取步長，根據運動時間time以及運動時間間隔interval計算運動總次數，然後獲取步長。
（4）定時器設置。
二、需要注意的問題
兼容性問題，即針對高級瀏覽器和ie瀏覽器不同的代碼寫法（時間間隔、透明度）。
三、代碼
function animate(elem,targetJSON,time,callback) {
//動畫間隔時間 根據不同瀏覽器來設置
if( window.navigator.userAgent.indexOf("MSIE") != -1 ) {
var interval = 50;
}else{
var interval = 10;
}
//需要當前狀態作爲信號量 信號量對象，所有要變化的屬性的集合
var semaphoreJSON = {};
//添加屬性
for (var k in targetJSON) {
semaphoreJSON[k] = parseFloat(fecthComputedStyle(elem,k));//計算後樣式
}
//獲取步長
//動畫總時長time 動畫每interval執行一次 則總執行次數
var maxcount = time/interval;
var count = 0;
//步長對象
var stepJSON = {};
for (var k in targetJSON) {
targetJSON[k] = parseFloat(targetJSON[k]);
stepJSON[k] = (targetJSON[k] - semaphoreJSON[k])/maxcount;
}
//信號量JSON samaphoerJSON
//終點信號量JSON targetJSON
//步長信號量JSON stepJSON
//定時器
var timer = setInterval(function(){
//讓所有信號量都發生變化
for (var k in semaphoreJSON) {
semaphoreJSON[k] += stepJSON[k];
//根據是不是opacity來設置單位
if (k != "opacity") {
elem.style[k] = semaphoreJSON[k] + "px";
}else{
elem.style[k] = semaphoreJSON[k];
elem.style.filter = "alpha(opacity=" + semaphoreJSON[k] *100 + ")";
}
}
count++;
if(count == maxcount){
if (k != "opacity") {
elem.style[k] = semaphoreJSON[k] + "px";
}else{
elem.style[k] = semaphoreJSON[k];
elem.style.filter = "alpha(opacity=" + semaphoreJSON[k] *100 + ")";
}
clearInterval(timer);
callback();//調用回調函數
}
},interval);
//封裝一個函數 獲取計算後樣式
function fecthComputedStyle(obj,property) {
if (window.getComputedStyle) {
property = property.replace(/([A-Z])/g,function(match,$1){
return "-" + $1.toLowerCase();
});
return window.getComputedStyle(obj)[property];
}else{
property = property.replace(/\-([a-z])/g,function(match,$1){
return $1.toUpperCase();
});
return obj.currentStyle[property];
}
}
}