CSS3動畫之補間動畫
04-08
註:本文最初發表於凹凸實驗室·拇指期刊第8期-CSS3動畫開發指南。前7期請移步往期回顧(第7期可見專欄過往文章)。
第二,CSS3 Transition。
區別於animation,transition只能設定初始和結束時刻的兩個關鍵幀狀態。第三,利用JavaScript實現動畫,例如JavaScript動畫庫或框架,著名的TweenJS,它是CreateJS的其中一個套件。另外,在Flash業界久負盛名的GreenSock推出的GSAP(GreenSock Animation Platform)也新引入了對Javascript動畫的支持。第四,SVG 動畫。基於移動端對SVG技術的友好的支持性,利用SVG技術實現動畫也是一種可行的方案。對於利用Transition實現的動畫而言,是有一定局限的。引述阮一峰老師的文章里的總結,transition的優點在於簡單易用,但是它有幾個很大的局限。
(1)transition需要事件觸發,所以沒法在網頁載入時自動發生。(2)transition是一次性的,不能重複發生,除非一再觸發。(3)transition只能定義開始狀態和結束狀態,不能定義中間狀態,也就是說只有兩個狀態。
(4)一條transition規則,只能定義一個屬性的變化,不能涉及多個屬性。
囿於這樣的局限,在觸屏頁面中很少見到Transition動畫的身影,但是並不意味著沒有,譬如翻頁動畫的實現可以利用Javascript腳本配合transition與transform屬性來實現。
(案例來源於《京東:2015JDC燃爆事件》)(Chrome調試代碼截圖)所以,利用CSS3實現動畫的重頭戲都在於Animation的運用。然而想寫好CSS3 Animation 動畫,則是看似簡單實則需要把握好細節的活兒,第一,動畫過程要預先規劃好,不是敲敲腦殼就能碼出來的事兒。可以是一張把與設計師溝通的結果加之分析輸出一張動畫屬性分解表。整個案例處處都非常生動自然、利落感滿滿,令人讚歎。
如果你想了解怎麼去實現才能夠符合十二法則,可以進一步閱讀《The Guide To CSS Animation: Principles and Examples》這篇文章喔,不謝。另外,在把控十二法則時為了動畫更加自然,時間函數(animation-timing-function)的設計絕對是舉足輕重的一環,因為動畫可以說是一種關於時間函數的運動演變過程。要碼好動畫,這篇關注介紹緩動函數的《讓界面動畫更自然》說不定能夠助你一臂之力。碼好了動畫,做好了頁面,以為就此結束了嗎?不要太天真,移動端對性能的要求也是一道需要邁過的坎兒。Google在有關動畫性能渲染優化的文章(對不起,這裡有道牆)中提出建議,避免為開銷大的屬性設置動畫,要讓每次在設置動畫時必須注意保持 60fps。那麼,哪些是開銷大的屬性呢?(下面是科普環節,清楚的童鞋可以跳過)。頁面渲染的一般過程為JS / CSS > 計算樣式 > 布局 > 繪製 > 渲染層合併。其中,Layout(重排)和Paint(重繪)是整個環節中最為耗時的兩環,所以我們盡量避免著這兩個環節。從性能方面考慮,最理想的渲染流水線是沒有布局和繪製環節的,只需要做渲染層的合併即可。那怎麼知道哪些CSS屬性的改變是會影響這兩個環節的呢?諾,下面就是各CSS屬性與其影響的環節。
這裡截取部分,更為詳細地翻牆去CSS Triggers拿吧在實際的應用里,最為簡單的一個注意點就是,觸發動畫的開始不要用diaplay:none屬性值,因為它會引起Layout、Paint環節,通過切換類名就已經是一種很好的辦法。還有就是,translate屬性值來替換top/left/right/bottom的切換,scale屬性值替換width/height,opacity屬性替換display/visibility等等。除此之外,對動畫渲染的優化還有其他方式,上面貼出Google文章鏈接就有一系列的文章解讀,小編就不賣弄按下不表了,這裡順便拋出前輩對這方面相關的總結:(總結來源於@登平登平的《H5動畫60fps之路》)最後總結下要點就是,事先做好規劃,碼的時候注意十二法則,謹記避免導致layout/paint的屬性,搞定!最後的最後,由於本文主推的是CSS3 Animation,其餘的實現方式不在討論範圍內:P,拜拜,下次再見。
(小編:Tin)--------------------------------------------------------------------------------------------------------------拇指期刊·第8期·CSS3動畫開發手冊《CSS3動畫之補間動畫》《CSS3動畫之逐幀動畫》《CSS3動畫之3D動畫》
推薦閱讀:
※如何通過html和css完成下拉菜單的製作?
※手機頁面a標籤無效?
※CSS3動畫之逐幀動畫
※css3動畫如何讓元素一開始是隱藏的?
※為什麼input不支持偽元素(:after,:before)?