本文給大家分享的是個人在學習js運動動畫的過程中總結的我們需要注意的8個知識點,分別是速度動畫、透明度漸變、緩沖運動、多物體運動、獲取樣式、任意屬性值、鏈式運動和同時運動,非常的詳細,推薦給小伙伴們。
今天簡單的學了一下js運動動畫,記錄一下自己的心得體會,分享給大家。
下面是我整理出來的結果。
知識點一:速度動畫。
1.首先第一步實現速度運動動畫,封裝一個函數,用到的知識是setInterval(function(){
代碼如下:
對於這裡為什麼要用到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=透明度,注意定時器裡面應該這樣寫:
代碼如下:
3.以上都是行內樣式。
知識點三:緩沖運動
1.緩沖運動就是距離越大,速度就愈大,距離越小,速度就越小,即速度與距離有關。
2.根據上面的說法,對速度進行重新的定義,一開始速度為0,而現在:
代碼如下:
重新定義定時器:
代碼如下:
此時我們發現速度太大了,可以這樣:
代碼如下:
3.此時會有一個嚴重的問題,因為屏幕的最小單位為px,所以會出現最終的left值為小數,而不為目標的iTarget,可以通過判斷來解決,這裡要引入Math.floor(),這是向下取整,同樣還有Math.ceil(),這是向上取整。在定義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,但是並不能總是寫在行內,所以我們定義一個函數,獲取鏈入樣式:
代碼如下:
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運動動畫能夠有所幫助。