今天簡單的學(xué)了一下js運動動畫，記錄一下自己的心得體會，分享給大家。
下面是我整理出來的結(jié)果。
知識點一：速度動畫。
1.首先第一步實現(xiàn)速度運動動畫，封裝一個函數(shù)，用到的知識是setInterval(function(){
oDiv.style.left=oDiv.offsetLeft+10+"px";
},30).
對于這里為什么要用到offsetLeft，我特意百度了一下，我得到的有用信息是：
a.offsetLeft和left的相同之處都是表示子節(jié)點相對于父節(jié)點的左位置。
b.但是left是既可以讀又可以寫的，而offsetLeft是只讀的；
c.并且offsetLeft是沒有單位的，獲取子節(jié)點位置的時候后面不帶px。
這里在引申一下其他的知識，感謝這位博主，http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201372885729561/。
2.讓運動的節(jié)點停止下來，這里我們用if語句做一個驗證，如果offsetLeft==0，clearInterval（timer），這里的timer應(yīng)該事先初始化=null，然后將之前的那個運動動畫賦值給它。
3.這里有一個問題，如果在運動結(jié)束之前再次觸發(fā)的運動，那么運動的速度會累加，這里，只要在整個運動開始之前，clearInterval（timer）就可以了。
4.設(shè)置移入移除效果，給運動設(shè)置參數(shù)，一個是速度speed，一個是目標(biāo)位置iTarget，我們發(fā)現(xiàn)速度也是可以通過ITarget的位置來判斷的，所以只需要一個參數(shù)即可。
知識點二：透明度漸變
1.其實，跟剛剛是差不多的，只不過ITarget的值為透明度而已，流程還是清除定時器再開一個定時器判斷等等。
2.定義一個參數(shù)alpha=透明度，注意定時器里面應(yīng)該這樣寫：
alpha+=speed；
oDiv.style.filter='alpha(opacity:'+alpha+')'; //這是非常重要的一種方法，注意是這樣寫的
oDiv.style.opacity=alpha/100; //注意不要忘記除以100
3.以上都是行內(nèi)樣式。
知識點三：緩沖運動
1.緩沖運動就是距離越大，速度就愈大，距離越小，速度就越小，即速度與距離有關(guān)。
2.根據(jù)上面的說法，對速度進(jìn)行重新的定義，一開始速度為0，而現(xiàn)在：
var speed=iTarget-oDiv.offsetLeft;
重新定義定時器：
oDiv.style.left=oDiv.offsetLeft+speed+'px';
此時我們發(fā)現(xiàn)速度太大了，可以這樣：
var speed=(iTarget-oDiv.offsetLeft)/10;
3.此時會有一個嚴(yán)重的問題，因為屏幕的最小單位為px，所以會出現(xiàn)最終的left值為小數(shù)，而不為目標(biāo)的iTarget,可以通過判斷來解決，這里要引入Math.floor（），這是向下取整，同樣還有Math.ceil()，這是向上取整。在定義speed后我們這樣寫：
speed=speed>0?Math.ceil(speed):Math.floor(speed);
這樣就可以完全保證速度都是整數(shù)，并且在臨界值上都為0。
知識點四：多物體運動
1.先獲取所有的物體，形成一個數(shù)組，然后再用for循環(huán)來做（這種方法多么經(jīng)典呀！），在for循環(huán)中添加節(jié)點事件，在函數(shù)中可以用this代替當(dāng)前的節(jié)點，eg：startMove（this，iTarget）,定義函數(shù)時startMove（obj，iTarget）.
2.取當(dāng)前寬度offsetWidth的時候就要用obj的值了。
3.當(dāng)鼠標(biāo)移動特別快的時候，節(jié)點的寬度未能恢復(fù)原狀，這是因為定時器是大家公用的定時器，上一個節(jié)點還未恢復(fù)原狀下一個節(jié)點就已經(jīng)清除定時器了，解決的辦法就是給每一個節(jié)點加一個index，就是在上面的for循環(huán)中加上aDiv[i].timer=null;然后再定義函數(shù)中用obj.timer替換timer。由此我們要注意共用定時器會出事的。
4.透明度的運動中，alpha代替了speed，但是即使定時器不共用，多物體的運動也會出現(xiàn)問題，這是因為alpha公用的原因，導(dǎo)致各物體相互撕扯，解決辦法就是可以像timer那樣在for循環(huán)中給每個節(jié)點都分配alpha。
總結(jié)：解決沖突問題，要么初始化，要么個性化。
知識點五.獲取樣式
1.在改變節(jié)點寬度（移入大，移除小）的定時器中，如果給節(jié)點添加一個border邊框，那么在移入的時候比目標(biāo)節(jié)點小，移出的時候比目標(biāo)節(jié)點大。注意width+padding+scrollbar（滾動條）+border，所以原因就是每次offset都會增加border*2-（定時器中每次減少的數(shù)值）。
2.解決以上問題的辦法就是在行內(nèi)寫入width，并且使用parseInt(oDiv.style.width)代替offsetLeft，但是并不能總是寫在行內(nèi)，所以我們定義一個函數(shù)，獲取鏈入樣式：
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]; //ie瀏覽器
}
else{
return getComputerStyle(obj,false)[attr]; //其他瀏覽器
}
}
3.對于font-size這種，在js里只有fontSize這一種寫法。
知識點六：任意屬性值
1.所有的offset-的都會有小bug，要用getStyle函數(shù)，這個函數(shù)經(jīng)常和parseInt（）一起用，并通常用變量保存。
2.在寫style.width的時候，也可以寫成style['width']。
3.對于多物體的屬性值調(diào)整，可以將樣式作為參數(shù)封裝一下，這樣多物體屬性的函數(shù)就包括了（obj,attr,iTarget）這三個屬性值。
4.以上的這個運動框架是不適合于透明度變化的，因為透明度都是小數(shù)的，因為兩個原因，第一是parseInt，第二是attr=...+px，這里我們可以用一個if判讀來對透明度進(jìn)行單獨處理，將parseInt換成parseFloat，去掉px。
5.計算機本身是有一個bug的，0.07*100并不等于7，所以我們引入一個函數(shù)是Math.round()，這是一個四舍五入的值。
知識點七：鏈?zhǔn)竭\動
1.引入move.js框架。
2.傳入一個回調(diào)函數(shù)fn（），用if判斷，如果有fn（），那么執(zhí)行fn（）。
知識點八：同時運動
1.如果寫兩個運動函數(shù)來控制同時運動，會發(fā)生函數(shù)覆蓋。
2.使用json這個知識點，json的循環(huán)是使用for（i in json)，運動函數(shù)的參數(shù)為obj，json，fn。
3.沒有iTarget這個值了，取而代之的是json[attr].
寫到這里，就已經(jīng)完全結(jié)束了，希望大家能夠喜歡。也希望對大家學(xué)習(xí)js運動動畫能夠有所幫助。
