js運動動畫的八個知識點_javascript技巧

今天簡單的學了一下js運動動畫，記錄一下自己的心得體會，分享給大家。

      以下是我整理出來的結果。

知識點一：速度動畫。

      1.首先第一步實現速度運動動畫，封裝一個函數，用到的知識是setInterval(function(){

複製程式碼 程式碼如下:

　　　　oDiv.style.left=oDiv.offsetLeft 10 "px";
　　},30).

　　對於這裡為什麼要用到offsetLeft，我特意百度了一下，我得到的有用資訊是：

　　a.offsetLeft和left的相同之處都是表示子節點相對於父節點的左位置。
　　b.但是left是既可以讀又可以寫的，而offsetLeft是只讀的；
　　c.且offsetLeft是沒有單位的，取得子節點位置的時候後面不帶px。

　　這裡在引申一下其他的知識，感謝這位博主，http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201372885729561/。

　　2.讓運動的節點停止下來，這裡我們用if語句做一個驗證，如果offsetLeft==0，clearInterval（timer），這裡的timer應該事先初始化=null，然後將之前的那個運動動畫賦值給它。

　　3.這裡有一個問題，如果在運動結束之前再次觸發的運動，那麼運動的速度會累加，這裡，只要在整個運動開始之前，clearInterval（timer）就可以了。

　　4.設定移入移除效果，給運動設定參數，一個是速度speed，一個是目標位置iTarget，我們發現速度也是可以透過ITarget的位置來判斷的，所以只需要一個參數即可。

知識點二：透明度漸層

　　1.其實，跟剛剛是差不多的，只不過ITarget的值為透明度而已，流程還是清除定時器再開一個定時器判斷等等。

　　2.定義一個參數alpha=透明度，注意定時器裡面要這樣寫：

複製程式碼 程式碼如下:

　　alpha =speed；
　　oDiv.style.filter='alpha(opacity:' alpha ')';         //這是非常重要的一種方法，並注意是這樣寫的
　　oDiv.style.opacity=alpha/100;            //注意不要忘記除以100

　　3.以上都是行內樣式。

知識點三：緩衝運動

　　1.緩衝運動就是距離越大，速度就愈大，距離越小，速度就越小，即速度與距離有關。

　　2.根據上面的說法，對速度進行重新的定義，一開始速度為0，而現在：

複製程式碼 程式碼如下:

　　var speed=iTarget-oDiv.offsetLeft;

　　重新定義定時器：

複製程式碼 程式碼如下:

　　oDiv.style.left=oDiv.offsetLeft speed 'px';

　　此時我們發現速度太大了，可以這樣：

複製程式碼 程式碼如下:

　　var speed=(iTarget-oDiv.offsetLeft)/10;

　　3.此時會有一個嚴重的問題，因為螢幕的最小單位為px，所以會出現最終的left值為小數，而不為目標的iTarget,可以透過判斷來解決，這裡要引入Math. floor（），這是向下取整，同樣還有Math.ceil()，這是向上取整。在定義speed後我們這樣寫：

複製程式碼 程式碼如下:

　　speed=speed>0?Math.ceil(speed):Math.floor(speed);           

　　這樣就可以完全保證速度都是整數，並且在臨界值上都為0。

知識點四：多物體運動　　

　　1.先取得所有的物體，形成一個數組，然後再用for循環來做（這種方法多麼經典呀！），在for循環中加入節點事件，在函數中可以用this代替當前的節點，eg：startMove（this，iTarget）,定義函數時startMove（obj，iTarget）.

　　2.取目前寬度offsetWidth的時候就要用obj的值了。

　　3.當滑鼠移動特別快的時候，節點的寬度未能恢復原狀，這是因為定時器是大家公用的定時器，上一個節點還未恢復原狀下一個節點就已經清除定時器了，解決的方法就是在每個節點加上一個index，就是在上面的for迴圈中加上aDiv[i].timer=null;然後再定義函數中用obj.timer取代timer。由此我們要注意共用定時器會出事的。

　　4.透明度的運動中，alpha代替了speed，但是即使定時器不共用，多物體的運動也會出現問題，這是因為alpha公用的原因，導致各物體相互撕扯，解決辦法就是可以像timer那樣在for迴圈中給每個節點都分配alpha。

      總結：解決衝突問題，要麼初始化，要麼個人化。

知識點五.取得樣式

　　1.在改變節點寬度（移入大，移除小）的定時器中，如果給節點添加一個border邊框，那麼在移入的時候比目標節點小，移出的時候比目標節點大。注意width padding scrollbar（捲軸） border，所以原因就是每次offset都會增加border*2-（定時器中每次減少的數值）。

　　2.解決以上問題的辦法就是在行內寫入width，並且使用parseInt(oDiv.style.width)代替offsetLeft，但是並不能總是寫在行內，所以我們定義一個函數，獲取鏈入樣式：

複製程式碼 程式碼如下:

　　function getStyle(obj,attr){
　　　　if(obj.currentStyle){
　　　　　　return obj.currentStyle[attr];　　　                             　　　　}
　　　　else{
　　　　　　return getComputerStyle(obj,false)[attr];          //其他瀏覽器
　　　　}
　　}

　　3.對於font-size這種，在js裡只有fontSize這一種寫法。

知識點六：任意屬性值

　　1.所有的offset-的都會有小bug，要用getStyle函數，這個函數經常和parseInt（）一起用，並且通常用變數保存。

　　2.寫style.width的時候，也可以寫成style['width']。　　

　　3.對於多物體的屬性值調整，可以將樣式作為參數封裝一下，這樣多物體屬性的函數就包括了（obj,attr,iTarget）這三個屬性值。

　　4.以上的這個運動框架是不適合於透明度變化的，因為透明度都是小數的，因為兩個原因，第一是parseInt，第二是attr=... px，這裡我們可以用一個if判讀來對透明度進行單獨處理，將parseInt換成parseFloat，去掉px。

　　5.計算機本身是有一個bug的，0.07*100並不等於7，所以我們引入一個函數是Math.round()，這是一個四捨五入的值。

知識點七：鍊式運動

　　1.引入move.js框架。

　　2.傳入一個回呼函數fn（），用if判斷，如果有fn（），那麼執行fn（）。

知識點八：同時運動

　　1.如果寫兩個運動函數來控制同時運動，會發生函數覆蓋。

　　2.使用json這個知識點，json的循環是使用for（i in json)，運動函數的參數為obj，json，fn。

　　3.沒有iTarget這個值了，取而代之的是json[attr].

　　寫到這裡，就已經完全結束了，希望大家能夠喜歡。也希望對大家學習js運動動畫能有所幫助。