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

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

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

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

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

　　最后選擇了CSS3，js動態(tài)的改變元素的屬性，使用transition來控制動畫執(zhí)行時(shí)間。舉個(gè)例子：

js:

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

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

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

最新評論