javascript與css3動畫結合小結_javascript技巧

當Html5,css3已漸漸成為主流的時候，我還非常習慣的用js去做一些簡單的動畫。因為在桌面瀏覽器上， 並非所有的都支援css3。使用者也倒是很奇怪，使用者習慣並不是每個使用者都可以被培養。總有不少人會覺得win7.win8沒xp好用。但手機方面就大不一樣了，手機瀏覽器對html5和css3的支援還是很不錯的。但手機硬體處理能力卻又十分有限。在四核心、八核心手機橫行的今天，依然有像我這樣使用雙核心或單核心手機的。 js雖好，單奈何接觸不多，調不好那種感覺。一個簡單的頁面滑動，在i7的pc上運行十分流暢，可是，在我的雙核手機上就卡、頓、卡、頓。令人十分鬱悶。為此，我也是尋找了很久很久，看了很多很多。終於在不就之前，找到了一個還算簡單的方法：使用css3去執行動畫。

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

　　首先，setTimeout,setInterval 這貨並非你設定0ms它就能一直一直的去執行。曾經在iscroll裡調試的時候無意中發現了這個秘密。原來Timer延遲的計算依靠的是瀏覽器的內建時鐘，而時鐘的精確度又取決於時鐘更新的頻率。 IE8及其之前的IE版本更新間隔為15.6毫秒。完了，我想它10ms執行1px位移，它還不能準時的干這事。

　　而卡片又是怎麼回事呢？卡，因為程式碼寫的不好。畢竟js是單線程的，一旦有耗時的動作那麼UI就可能不會回應了。雖然我們使用了setTimeout，但正是因為setTimeout讓我們看上去介面沒死可動作卻又不流暢了。因為這次setTimeout執行之後，在下次執行前，中間這個間隔裡很可能遇到另一個耗時的動作，那麼，setTimeout的執行就無限後延。然後呢？卡！然而，卡片還能有下一個原因，改變原始屬性時不小心觸發瀏覽器Layout（即：重佈局）。這個問題說它不耗時呢，卻又耗時，說它耗時呢，很多時候卻又可以忽略。但很多時候其實是不能忽略的。

　　除了上面這兩段，還有一個問題，就是在很多手機上總感覺是一幀一幀的，而且還可能是一幀長一幀短。這真是能把人都搞廢的節奏。為何會這樣呢，依然和settimeout的延遲有一定的關係。丟幀。這個問題有涉及到顯示器的刷新頻率問題。實在太複雜了。

　　最後選擇了CSS3，js動態的改變元素的屬性，使用transition來控制動畫執行時間。舉例：

複製程式碼 程式碼如下:

js:

複製程式碼 程式碼如下:

$("#test").width(200);

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

　　最後附上一些常用的變更時會觸發重佈局的屬性： 
 　　

複製程式碼 程式碼如下:

　　 width
 　　height
 　　padding
 　　margin
 　　display
 　　border-width
 　　border
 　　min-height

以上就是本文所述的全部內容了，希望對大家學習javascript和CSS3能夠有所幫助，同時不足之處煩請補充，諒解。