當(dāng)Html5,css3已漸漸成為主流的時(shí)候，我還非常習(xí)慣的用js去做一些簡(jiǎn)單的動(dòng)畫(huà)。因?yàn)樵谧烂鏋g覽器上， 并非所有的都支持css3。用戶(hù)也倒是很奇怪，用戶(hù)習(xí)慣并不是每個(gè)用戶(hù)都可以被培養(yǎng)。總有不少人會(huì)覺(jué)得win7.win8沒(méi)xp好用。但手機(jī)方面就大不一樣了，手機(jī)瀏覽器對(duì)html5和css3的支持還是很不錯(cuò)的。但手機(jī)硬件處理能力卻又十分有限。在四核、八核手機(jī)橫行的今天，依然有像我這樣使用雙核或單核手機(jī)的。js雖好，單奈何接觸不多，調(diào)不好那種感覺(jué)。一個(gè)簡(jiǎn)單的頁(yè)面滑動(dòng)，在i7的pc上運(yùn)行十分流暢，可是，在我的雙核手機(jī)上就卡、頓、卡、頓。令人十分郁悶。為此，我也是尋找了很久很久，看了很多很多。終于在不就之前，找到了一種還算簡(jiǎn)單的方法：使用css3去執(zhí)行動(dòng)畫(huà)。

　　在以前，對(duì)于動(dòng)畫(huà)除了Jquery的animate等動(dòng)畫(huà)函數(shù)外，更多的是使用setTimeout,setInterval，這樣循環(huán)的去改變一個(gè)元素的margin、width、top等屬性。也正是如此，才有了我的困惑。

　　首先，setTimeout,setInterval 這貨并非你設(shè)置0ms它就能一直一直的去執(zhí)行。曾經(jīng)在iscroll里調(diào)試的時(shí)候無(wú)意中發(fā)現(xiàn)了這個(gè)秘密。原來(lái)Timer延時(shí)的計(jì)算依靠的是瀏覽器的內(nèi)置時(shí)鐘，而時(shí)鐘的精確度又取決于時(shí)鐘更新的頻率。IE8及其之前的IE版本更新間隔為15.6毫秒。完了，我想它10ms執(zhí)行1px位移，它還不能準(zhǔn)時(shí)的干這事。

　　而卡又是怎么回事呢？卡，因?yàn)榇a寫(xiě)的不好。畢竟js是單線程的，一旦有耗時(shí)的動(dòng)作那么UI就可能不響應(yīng)了。雖然我們使用了setTimeout，但正是因?yàn)閟etTimeout讓我們看上去界面沒(méi)死可動(dòng)作卻又不流暢了。因?yàn)檫@次setTimeout執(zhí)行之后，在下次執(zhí)行前，中間這個(gè)間隔里很可能遇到另一個(gè)耗時(shí)的動(dòng)作，那么，setTimeout的執(zhí)行就無(wú)限后延。然后呢？卡！然而，卡還能有下一個(gè)原因，改變?cè)紝傩詴r(shí)不小心觸發(fā)瀏覽器Layout（即：重布局）。這個(gè)問(wèn)題說(shuō)它不耗時(shí)呢，卻又耗時(shí)，說(shuō)它耗時(shí)呢，很多時(shí)候卻又可以忽略。但很多時(shí)候其實(shí)是不能忽略的。

　　除了上面這兩段，還有一個(gè)問(wèn)題，就是在很多手機(jī)上總感覺(jué)是一幀一幀的，而且還可能是一幀長(zhǎng)一幀短。這真是能把人都搞廢的節(jié)奏。為何會(huì)這樣呢，依然和settimeout的推遲有一定的關(guān)系。丟幀。這個(gè)問(wèn)題有涉及到顯示器的刷新頻率問(wèn)題。實(shí)在太復(fù)雜了。

　　最后選擇了CSS3，js動(dòng)態(tài)的改變?cè)氐膶傩?，使用transition來(lái)控制動(dòng)畫(huà)執(zhí)行時(shí)間。舉個(gè)例子：

js:

　　這樣1秒之后這個(gè)div的寬度會(huì)變成200px。不是孫悟空變桃子一樣瞬間變大，慢慢的趕腳，不卡不頓。而且使用css動(dòng)畫(huà)有個(gè)好處，它不受耗時(shí)js的影響。雖然瀏覽器中UI線程與js線程是互斥，但這一點(diǎn)對(duì)css動(dòng)畫(huà)不成立，并且很多瀏覽器還能啟用硬件加速（比如：Chrome）。雖然瀏覽器重布局普通情況下感覺(jué)不是很明顯，但還是應(yīng)該盡量避免大面積的重布局。so在動(dòng)畫(huà)元素上加上-webkit-transform: translateZ(0);或者-webkit-transform: translate3d(0,0,0);這樣瀏覽器會(huì)獨(dú)立渲染這一層。即便是重布局無(wú)法避免，這樣面積也小些。而使用translate取代margin也確實(shí)是一個(gè)十分明智的決定。

　　最后附上一些常用的改變時(shí)會(huì)觸發(fā)重布局的屬性： 
 　　

以上就是本文所述的全部?jī)?nèi)容了，希望對(duì)大家學(xué)習(xí)javascript和CSS3能夠有所幫助，同時(shí)不足之處煩請(qǐng)補(bǔ)充，諒解。

最新評(píng)論