js運(yùn)動(dòng)動(dòng)畫(huà)的八個(gè)知識(shí)點(diǎn)
今天簡(jiǎn)單的學(xué)了一下js運(yùn)動(dòng)動(dòng)畫(huà),記錄一下自己的心得體會(huì),分享給大家。
下面是我整理出來(lái)的結(jié)果。
知識(shí)點(diǎn)一:速度動(dòng)畫(huà)。
1.首先第一步實(shí)現(xiàn)速度運(yùn)動(dòng)動(dòng)畫(huà),封裝一個(gè)函數(shù),用到的知識(shí)是setInterval(function(){
oDiv.style.left=oDiv.offsetLeft+10+"px";
},30).
對(duì)于這里為什么要用到offsetLeft,我特意百度了一下,我得到的有用信息是:
a.offsetLeft和left的相同之處都是表示子節(jié)點(diǎn)相對(duì)于父節(jié)點(diǎn)的左位置。
b.但是left是既可以讀又可以寫(xiě)的,而offsetLeft是只讀的;
c.并且offsetLeft是沒(méi)有單位的,獲取子節(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)畫(huà)賦值給它。
3.這里有一個(gè)問(wèn)題,如果在運(yùn)動(dòng)結(jié)束之前再次觸發(fā)的運(yùn)動(dòng),那么運(yùn)動(dòng)的速度會(huì)累加,這里,只要在整個(gè)運(yùn)動(dòng)開(kāi)始之前,clearInterval(timer)就可以了。
4.設(shè)置移入移除效果,給運(yùn)動(dòng)設(shè)置參數(shù),一個(gè)是速度speed,一個(gè)是目標(biāo)位置iTarget,我們發(fā)現(xiàn)速度也是可以通過(guò)ITarget的位置來(lái)判斷的,所以只需要一個(gè)參數(shù)即可。
知識(shí)點(diǎn)二:透明度漸變
1.其實(shí),跟剛剛是差不多的,只不過(guò)ITarget的值為透明度而已,流程還是清除定時(shí)器再開(kāi)一個(gè)定時(shí)器判斷等等。
2.定義一個(gè)參數(shù)alpha=透明度,注意定時(shí)器里面應(yīng)該這樣寫(xiě):
alpha+=speed;
oDiv.style.filter='alpha(opacity:'+alpha+')'; //這是非常重要的一種方法,注意是這樣寫(xiě)的
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ù)上面的說(shuō)法,對(duì)速度進(jìn)行重新的定義,一開(kāi)始速度為0,而現(xiàn)在:
var speed=iTarget-oDiv.offsetLeft;
重新定義定時(shí)器:
oDiv.style.left=oDiv.offsetLeft+speed+'px';
此時(shí)我們發(fā)現(xiàn)速度太大了,可以這樣:
var speed=(iTarget-oDiv.offsetLeft)/10;
3.此時(shí)會(huì)有一個(gè)嚴(yán)重的問(wèn)題,因?yàn)槠聊坏淖钚挝粸閜x,所以會(huì)出現(xiàn)最終的left值為小數(shù),而不為目標(biāo)的iTarget,可以通過(guò)判斷來(lái)解決,這里要引入Math.floor(),這是向下取整,同樣還有Math.ceil(),這是向上取整。在定義speed后我們這樣寫(xiě):
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)典呀!),在for循環(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)問(wèn)題,這是因?yàn)閍lpha公用的原因,導(dǎo)致各物體相互撕扯,解決辦法就是可以像timer那樣在for循環(huán)中給每個(gè)節(jié)點(diǎn)都分配alpha。
總結(jié):解決沖突問(wèn)題,要么初始化,要么個(gè)性化。
知識(shí)點(diǎn)五.獲取樣式
1.在改變節(jié)點(diǎn)寬度(移入大,移除?。┑亩〞r(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.解決以上問(wèn)題的辦法就是在行內(nèi)寫(xiě)入width,并且使用parseInt(oDiv.style.width)代替offsetLeft,但是并不能總是寫(xiě)在行內(nèi),所以我們定義一個(gè)函數(shù),獲取鏈入樣式:
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]; //ie瀏覽器
}
else{
return getComputerStyle(obj,false)[attr]; //其他瀏覽器
}
}
3.對(duì)于font-size這種,在js里只有fontSize這一種寫(xiě)法。
知識(shí)點(diǎn)六:任意屬性值
1.所有的offset-的都會(huì)有小bug,要用getStyle函數(shù),這個(gè)函數(shù)經(jīng)常和parseInt()一起用,并通常用變量保存。
2.在寫(xiě)style.width的時(shí)候,也可以寫(xiě)成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.如果寫(xiě)兩個(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.沒(méi)有iTarget這個(gè)值了,取而代之的是json[attr].
寫(xiě)到這里,就已經(jīng)完全結(jié)束了,希望大家能夠喜歡。也希望對(duì)大家學(xué)習(xí)js運(yùn)動(dòng)動(dòng)畫(huà)能夠有所幫助。
相關(guān)文章
javascript檢測(cè)移動(dòng)設(shè)備橫豎屏
移動(dòng)端的開(kāi)發(fā)過(guò)程中,免不了要判斷橫豎屏,然后在執(zhí)行其他操作,比如分別加載不同樣式,橫屏顯示某些內(nèi)容,豎屏顯示其他內(nèi)容等等。2016-05-05input標(biāo)簽內(nèi)容改變的觸發(fā)事件介紹
onchange事件在內(nèi)容改變(兩次內(nèi)容有可能相等)且失去焦點(diǎn)時(shí)觸發(fā);onpropertychange事件是實(shí)時(shí)觸發(fā),每增加或刪除一個(gè)字符就會(huì)觸發(fā)2014-06-06小程序Scroll-view上拉滾動(dòng)刷新數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了小程序Scroll-view上拉滾動(dòng)刷新數(shù)據(jù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06基于javascript實(shí)現(xiàn)的購(gòu)物商城商品倒計(jì)時(shí)實(shí)例
本文主要介紹了基于javascript實(shí)現(xiàn)的購(gòu)物商城商品倒計(jì)時(shí)實(shí)例,代碼詳細(xì),可直接復(fù)制試試看效果。需要的朋友可以參考借鑒2016-12-12微信小程序?qū)崿F(xiàn)星星評(píng)價(jià)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星星評(píng)價(jià)效果,支持多個(gè)條目評(píng)價(jià),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11解決微信瀏覽器Javascript無(wú)法使用window.location.reload()刷新頁(yè)面
這篇文章主要介紹在微信瀏覽器Javascript無(wú)法使用window.location.reload()刷新頁(yè)面的解決方法,比較實(shí)用,需要的朋友可以參考下。2016-06-06