快捷導(dǎo)航

js運(yùn)動(dòng)動(dòng)畫的八個(gè)知識(shí)點(diǎn)

更新時(shí)間：2015年03月12日 09:22:54 投稿：hebedich

本文給大家分享的是個(gè)人在學(xué)習(xí)js運(yùn)動(dòng)動(dòng)畫的過程中總結(jié)的我們需要注意的8個(gè)知識(shí)點(diǎn)，分別是速度動(dòng)畫、透明度漸變、緩沖運(yùn)動(dòng)、多物體運(yùn)動(dòng)、獲取樣式、任意屬性值、鏈?zhǔn)竭\(yùn)動(dòng)和同時(shí)運(yùn)動(dòng)，非常的詳細(xì)，推薦給小伙伴們。

今天簡(jiǎn)單的學(xué)了一下js運(yùn)動(dòng)動(dòng)畫，記錄一下自己的心得體會(huì)，分享給大家。

下面是我整理出來(lái)的結(jié)果。

知識(shí)點(diǎn)一：速度動(dòng)畫。

1.首先第一步實(shí)現(xiàn)速度運(yùn)動(dòng)動(dòng)畫，封裝一個(gè)函數(shù)，用到的知識(shí)是setInterval(function(){

復(fù)制代碼代碼如下:

　　　　oDiv.style.left=oDiv.offsetLeft+10+"px";

　　},30).

　　對(duì)于這里為什么要用到offsetLeft，我特意百度了一下，我得到的有用信息是：

　　a.offsetLeft和left的相同之處都是表示子節(jié)點(diǎn)相對(duì)于父節(jié)點(diǎn)的左位置。
　　b.但是left是既可以讀又可以寫的，而offsetLeft是只讀的；
　　c.并且offsetLeft是沒有單位的，獲取子節(jié)點(diǎn)位置的時(shí)候后面不帶px。

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

　　2.讓運(yùn)動(dòng)的節(jié)點(diǎn)停止下來(lái)，這里我們用if語(yǔ)句做一個(gè)驗(yàn)證，如果offsetLeft==0，clearInterval（timer），這里的timer應(yīng)該事先初始化=null，然后將之前的那個(gè)運(yùn)動(dòng)動(dòng)畫賦值給它。

　　3.這里有一個(gè)問題，如果在運(yùn)動(dòng)結(jié)束之前再次觸發(fā)的運(yùn)動(dòng)，那么運(yùn)動(dòng)的速度會(huì)累加，這里，只要在整個(gè)運(yùn)動(dòng)開始之前，clearInterval（timer）就可以了。

　　4.設(shè)置移入移除效果，給運(yùn)動(dòng)設(shè)置參數(shù)，一個(gè)是速度speed，一個(gè)是目標(biāo)位置iTarget，我們發(fā)現(xiàn)速度也是可以通過ITarget的位置來(lái)判斷的，所以只需要一個(gè)參數(shù)即可。

知識(shí)點(diǎn)二：透明度漸變

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

　　2.定義一個(gè)參數(shù)alpha=透明度，注意定時(shí)器里面應(yīng)該這樣寫：

復(fù)制代碼代碼如下:

　　alpha+=speed；

　　oDiv.style.filter='alpha(opacity:'+alpha+')';         //這是非常重要的一種方法，注意是這樣寫的

　　oDiv.style.opacity=alpha/100;            //注意不要忘記除以100

　　3.以上都是行內(nèi)樣式。

知識(shí)點(diǎn)三：緩沖運(yùn)動(dòng)

　　1.緩沖運(yùn)動(dòng)就是距離越大，速度就愈大，距離越小，速度就越小，即速度與距離有關(guān)。

　　2.根據(jù)上面的說法，對(duì)速度進(jìn)行重新的定義，一開始速度為0，而現(xiàn)在：

復(fù)制代碼代碼如下:

　　var speed=iTarget-oDiv.offsetLeft;

　　重新定義定時(shí)器：

復(fù)制代碼代碼如下:

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

　　此時(shí)我們發(fā)現(xiàn)速度太大了，可以這樣：

復(fù)制代碼代碼如下:

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

　　3.此時(shí)會(huì)有一個(gè)嚴(yán)重的問題，因?yàn)槠聊坏淖钚挝粸閜x，所以會(huì)出現(xiàn)最終的left值為小數(shù)，而不為目標(biāo)的iTarget,可以通過判斷來(lái)解決，這里要引入Math.floor（），這是向下取整，同樣還有Math.ceil()，這是向上取整。在定義speed后我們這樣寫：

復(fù)制代碼代碼如下:

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

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

知識(shí)點(diǎn)四：多物體運(yùn)動(dòng)　　

　　1.先獲取所有的物體，形成一個(gè)數(shù)組，然后再用for循環(huán)來(lái)做（這種方法多么經(jīng)典呀?。趂or循環(huán)中添加節(jié)點(diǎn)事件，在函數(shù)中可以用this代替當(dāng)前的節(jié)點(diǎn)，eg：startMove（this，iTarget）,定義函數(shù)時(shí)startMove（obj，iTarget）.

　　2.取當(dāng)前寬度offsetWidth的時(shí)候就要用obj的值了。

　　3.當(dāng)鼠標(biāo)移動(dòng)特別快的時(shí)候，節(jié)點(diǎn)的寬度未能恢復(fù)原狀，這是因?yàn)槎〞r(shí)器是大家公用的定時(shí)器，上一個(gè)節(jié)點(diǎn)還未恢復(fù)原狀下一個(gè)節(jié)點(diǎn)就已經(jīng)清除定時(shí)器了，解決的辦法就是給每一個(gè)節(jié)點(diǎn)加一個(gè)index，就是在上面的for循環(huán)中加上aDiv[i].timer=null;然后再定義函數(shù)中用obj.timer替換timer。由此我們要注意共用定時(shí)器會(huì)出事的。

　　4.透明度的運(yùn)動(dòng)中，alpha代替了speed，但是即使定時(shí)器不共用，多物體的運(yùn)動(dòng)也會(huì)出現(xiàn)問題，這是因?yàn)閍lpha公用的原因，導(dǎo)致各物體相互撕扯，解決辦法就是可以像timer那樣在for循環(huán)中給每個(gè)節(jié)點(diǎn)都分配alpha。

總結(jié)：解決沖突問題，要么初始化，要么個(gè)性化。

知識(shí)點(diǎn)五.獲取樣式

　　1.在改變節(jié)點(diǎn)寬度（移入大，移除小）的定時(shí)器中，如果給節(jié)點(diǎn)添加一個(gè)border邊框，那么在移入的時(shí)候比目標(biāo)節(jié)點(diǎn)小，移出的時(shí)候比目標(biāo)節(jié)點(diǎn)大。注意width+padding+scrollbar（滾動(dòng)條）+border，所以原因就是每次offset都會(huì)增加border*2-（定時(shí)器中每次減少的數(shù)值）。

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

復(fù)制代碼代碼如下:

　　function getStyle(obj,attr){

　　　　if(obj.currentStyle){

　　　　　　return obj.currentStyle[attr];　　　                    //ie瀏覽器　

　　　　}

　　　　else{

　　　　　　return getComputerStyle(obj,false)[attr];          //其他瀏覽器

　　　　}

　　}

　　3.對(duì)于font-size這種，在js里只有fontSize這一種寫法。

知識(shí)點(diǎn)六：任意屬性值

　　1.所有的offset-的都會(huì)有小bug，要用getStyle函數(shù)，這個(gè)函數(shù)經(jīng)常和parseInt（）一起用，并通常用變量保存。

　　2.在寫style.width的時(shí)候，也可以寫成style['width']?！　?/p>

　　3.對(duì)于多物體的屬性值調(diào)整，可以將樣式作為參數(shù)封裝一下，這樣多物體屬性的函數(shù)就包括了（obj,attr,iTarget）這三個(gè)屬性值。

　　4.以上的這個(gè)運(yùn)動(dòng)框架是不適合于透明度變化的，因?yàn)橥该鞫榷际切?shù)的，因?yàn)閮蓚€(gè)原因，第一是parseInt，第二是attr=...+px，這里我們可以用一個(gè)if判讀來(lái)對(duì)透明度進(jìn)行單獨(dú)處理，將parseInt換成parseFloat，去掉px。

　　5.計(jì)算機(jī)本身是有一個(gè)bug的，0.07*100并不等于7，所以我們引入一個(gè)函數(shù)是Math.round()，這是一個(gè)四舍五入的值。

知識(shí)點(diǎn)七：鏈?zhǔn)竭\(yùn)動(dòng)

　　1.引入move.js框架。

　　2.傳入一個(gè)回調(diào)函數(shù)fn（），用if判斷，如果有fn（），那么執(zhí)行fn（）。

知識(shí)點(diǎn)八：同時(shí)運(yùn)動(dòng)

　　1.如果寫兩個(gè)運(yùn)動(dòng)函數(shù)來(lái)控制同時(shí)運(yùn)動(dòng)，會(huì)發(fā)生函數(shù)覆蓋。

　　2.使用json這個(gè)知識(shí)點(diǎn)，json的循環(huán)是使用for（i in json)，運(yùn)動(dòng)函數(shù)的參數(shù)為obj，json，fn。

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

　　寫到這里，就已經(jīng)完全結(jié)束了，希望大家能夠喜歡。也希望對(duì)大家學(xué)習(xí)js運(yùn)動(dòng)動(dòng)畫能夠有所幫助。

您可能感興趣的文章: