Open Web新功能探索 - CSS3 Animations入門
原創(chuàng)CSS3已經(jīng)成為當(dāng)今Open Web技術(shù)環(huán)境下的開發(fā)者必然選擇的一門技術(shù)，這些年從CSS2.1一路走來升級(jí)到全新版本的CSS3在各個(gè)技術(shù)公司和社區(qū)的合作下，也有了很多創(chuàng)新。CSS3 Animation Module（URL：http://www.w3.org/TR/css3-animations/）就是目前這兩年W3C在CSS3規(guī)范定義上的一個(gè)創(chuàng)新規(guī)范草案，該草案目前W3C的工作進(jìn)度是今年2月份最新的Draft 19。Web前端交互開發(fā)者原本可以通過CSS Transitions對(duì)CSS屬性值的插入完成當(dāng)他們需要修改屬性結(jié)果時(shí)所實(shí)現(xiàn)的簡(jiǎn)單動(dòng)畫需求，但是這種簡(jiǎn)單的動(dòng)畫只在開始和結(jié)束狀態(tài)上才可以通過已經(jīng)定義好的CSS屬性值來控制，而動(dòng)畫變化的整個(gè)過程中，創(chuàng)作者基本不可能實(shí)現(xiàn)控制。因此，CSS3 Animations Module被作為一種關(guān)鍵幀動(dòng)畫控制的功能手段被引入CSS3的規(guī)范草案中。
在開始講解CSS3 Animation的正式分析之前，我認(rèn)為我們有必要先看一組數(shù)據(jù)統(tǒng)計(jì)，它來自Caniuse.com上對(duì)于瀏覽器器支持CSS3 Animation的百分比，如圖1所示。
圖1.目前各大主流瀏覽器不同版本對(duì)于CSS3 Animation的支持率
從圖1中我們可以得到這樣的信息，IE瀏覽器的7,8,9版本均無法支持CSS3 Animation，IE10可以支持；Firefox從16.0以后的版本可以支持；Chrome瀏覽器從23.0以后可以支持；Safari瀏覽器則是5.1+的版本可以支持；Opera是12.1+的版本支持；值得高興的是，iOS Safari從3.2到6.0的各個(gè)Build都能支持CSS3 Animation;Opera Mini不支持;Android瀏覽器從2.1到3.0是部分支持CSS3 Animation,4.0+的版本均支持;BB Browser是7.0開始支持CSS3 Animation。全球主流瀏覽器各個(gè)版本支持CSS3 Animation的比率已經(jīng)從2012年初的53.91%提升到66.56%，經(jīng)過2012年一年的努力，CSS3 Animation的支持百分比率上升了近13個(gè)百分點(diǎn)。這一系列的數(shù)據(jù)可以給前端在是否使用CSS3 Animation于生產(chǎn)項(xiàng)目時(shí)非常關(guān)鍵的數(shù)據(jù)決策支持。另一方面來看，從CSS3 Animation的進(jìn)步幅度而言，它是現(xiàn)今前端交互設(shè)計(jì)師值得投入學(xué)習(xí)的一項(xiàng)技術(shù)。
前端交互設(shè)計(jì)師和開發(fā)者對(duì)于CSS3 Animation的使用，將可以在跨設(shè)備的瀏覽器上實(shí)現(xiàn)平滑的，基于關(guān)鍵幀的可編程維護(hù)的CSS動(dòng)畫，這個(gè)實(shí)現(xiàn)并不需要瀏覽器額外提供第三方控件支持，這一點(diǎn)非常重要。例如可以使用CSS3 Animation在iOS設(shè)備(iPhone,iPad等）的safari瀏覽器上實(shí)現(xiàn)CSS動(dòng)畫功能。
學(xué)習(xí)CSS3 Animation需要注意以下幾個(gè)規(guī)則。第一，CSS Animation會(huì)對(duì)屬性值產(chǎn)生影響，當(dāng)動(dòng)畫在執(zhí)行過程中，被計(jì)算出的CSS屬性值會(huì)被動(dòng)畫來控制，它會(huì)覆蓋原來頁(yè)面中已經(jīng)指定的樣式屬性值，比如物件的位置坐標(biāo)，色彩等，會(huì)隨著動(dòng)畫，值不斷變動(dòng)覆蓋這些對(duì)象的最初屬性值。CSS3 Animation會(huì)覆蓋所有標(biāo)準(zhǔn)Style規(guī)則，但是會(huì)被標(biāo)記為!important的規(guī)則覆蓋。第二，如果在某個(gè)時(shí)間某個(gè)點(diǎn)上有多個(gè)動(dòng)畫作用于一個(gè)屬性至上，那么該點(diǎn)上最后一個(gè)觸發(fā)“animation-name”的值會(huì)覆蓋其他的值。第三，動(dòng)畫不會(huì)影響進(jìn)入動(dòng)畫前的計(jì)算出的屬性值，不會(huì)影響動(dòng)畫delay期前的屬性值，不會(huì)影響動(dòng)畫結(jié)束后的屬性值。我們引用W3C上的標(biāo)準(zhǔn)圖示來解釋上面的話，如圖2所示。
圖2 CSS3 Animation對(duì)于計(jì)算CSS屬性值在動(dòng)畫不同階段的影響
接下來我們可以通過示例來明確對(duì)CSS3 Animation的操作方法。第一個(gè)示例一定是一個(gè)簡(jiǎn)單的示例，比如，我們想讓一個(gè)色塊以關(guān)鍵幀的方式左右運(yùn)動(dòng)。要完成這個(gè)動(dòng)畫，從CSS3的設(shè)計(jì)角度出發(fā)，我們要有以下幾步的處理方法：
• 定義一個(gè)HTML頁(yè)面，里面有個(gè)區(qū)域用于放置一個(gè)色塊。
• 通過CSS3定義這個(gè)色塊的基礎(chǔ)屬性。
• 用CSS3來適當(dāng)修飾這個(gè)色塊。
• 用CSS3 Animation的語法來定義這個(gè)色塊的關(guān)鍵幀動(dòng)畫
通過以上4步思路，我們認(rèn)定可以完成這個(gè)CSS3 Animation中堪稱最簡(jiǎn)單的動(dòng)畫。接著就是落實(shí)在實(shí)現(xiàn)每一步上。首先，我們需要一個(gè)空白的HTML5頁(yè)面，這一步太簡(jiǎn)單了，我直接貼代碼好了，沒什么可解釋的。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta charset="utf-8">
- <title>CSS3 Animation Demo1</title>
- </head>
- <body>
- <div class="box"></div>
- </body>
- </html>
其次，是對(duì)名稱為box的div屬性定義其代表的色彩區(qū)域，這里就要用到CSS3的代碼，這段代碼放在<style>標(biāo)簽對(duì)內(nèi)。
- <style>
- .box{
- width:200px;
- height:200px;
- background:rgba(255,0,0,0.5);
- border-radius:10px;
- position:absolute;
- top:100px;
- left:50%;
- margin-left:-100px;
- }
- </style>
如果此時(shí)打開瀏覽器，會(huì)看到瀏覽器頁(yè)面中央偏上部分有一個(gè)紅色色塊，如圖3所示。
圖3.用CSS3定義出來的一個(gè)紅色色塊
你完全可以把上面的色塊更深度的定制，比如把border-radius的值設(shè)定為100，你可以試試看色塊變成了什么形狀。本文就不在CSS3的其他屬性設(shè)定上花費(fèi)太多的時(shí)間，想深入學(xué)習(xí)CSS3整個(gè)體系的，現(xiàn)在的網(wǎng)絡(luò)資源和書籍簡(jiǎn)直多如牛毛。對(duì)于最后一步，用CSS3 Animation來定義色塊的關(guān)鍵幀動(dòng)畫，我們來看下面這段代碼：
- @-webkit-keyframes movebox{
- 0% {left:10%;}
- 50% {left:90%;border-radius:100px;}
- 100% {left:10%;}
- }
上述代碼定義了一個(gè)CSS關(guān)鍵幀動(dòng)畫，-webkit-keyframes是指該CSS3動(dòng)畫定義是針對(duì)以webkit為核心的瀏覽器，比如Google Chrome，如果以-moz-keyframes出現(xiàn)，則定義是針對(duì)Mozilla Firefox的，這種CSS3加不同前綴適應(yīng)不同瀏覽器兼容性的方式，已經(jīng)非常常見，本文將不再贅述，后面的例子都以-webkit-為主。movebox是這個(gè)示例動(dòng)畫的名稱定義，調(diào)用該動(dòng)畫時(shí)會(huì)使用該名稱。0%，50%，100%是該動(dòng)畫的3個(gè)關(guān)鍵幀，分別表示動(dòng)畫開始，中間，結(jié)束，當(dāng)然，我們還可以在0%-100%之間加入更多若干的關(guān)鍵幀。50%{left:90%;border-radius:100px;}是表示動(dòng)畫中間關(guān)鍵幀，調(diào)用該動(dòng)畫的CSS3對(duì)象的位置將會(huì)移動(dòng)到距離瀏覽器viewport左邊相對(duì)90%的位置，邊緣圓角半徑變?yōu)?00px,由于定義色塊的寬度是200px，那么你將在50%位置的動(dòng)畫關(guān)鍵幀處看到有趣的變化。
那么上述animation1.html的整體代碼是如下的部分：
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta charset="utf-8">
- <style>
- .box{
- width:200px;
- height:200px;
- background:rgba(255,0,0,0.5);
- border-radius:10px;
- position:absolute;
- top:100px;
- left:50%;
- margin-left:-100px;
- -webkit-animation:movebox 0s 5s infinite;
- }
- @-webkit-keyframes movebox{
- 0% {left:10%;}
- 50% {left:90%;border-radius:100px;}
- 100% {left:10%;}
- }
- </style>
- <title>CSS3 Animation Demo 1</title>
- </head>
- <body>
- <div class="box"></div>
- </body>
- </html>
你也可以點(diǎn)擊這里查看在線演示版本。借著上面的這第一個(gè)Demo，我們可以了解了CSS3 Animation的基本處理原理。CSS3定義的關(guān)鍵幀動(dòng)畫和Flash的關(guān)鍵幀動(dòng)畫處理機(jī)制幾乎一樣，只需要開發(fā)者定義關(guān)鍵幀即可，而關(guān)鍵幀之間的變化，則完全依靠瀏覽器的補(bǔ)間計(jì)算能力來完成。CSS3 Animation在-webkit-animation屬性值的定義上也有其他一些設(shè)定你可以嘗試，-webkit-animation的屬性值有如下主要參數(shù)：
• -webkit-animation-name: 動(dòng)畫名稱
• -webkit-animation-iteration-count:循環(huán)次數(shù)，infinite表示無限
• -webkit-animation-timing-function:linear,ease(默認(rèn)）,ease-in,ease-out等
• -webkit-animation-duration:動(dòng)畫時(shí)長(zhǎng)(單位:s)
• -webkit-animation-delay:動(dòng)畫延時(shí)(單位:s)
• 更多參數(shù)定義，參考http://www.w3.org/TR/css3-animations/
那么我們將第一個(gè)CSS3的Demo的語法改動(dòng)的更加規(guī)范一些，就變成下面的代碼：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta charset="utf-8">
- <style>
- #box{
- width:200px;
- height:200px;
- background:rgba(255,0,0,0.5);
- border-radius:10px;
- position:absolute;
- top:100px;
- left:50%;
- margin-left:-100px;
- }
- #box.animate{
- -webkit-animation-name:movebox;
- -webkit-animation-duration:5s;
- -webkit-animation-timing-function:ease;
- -webkit-animation-iteration-count:infinite;
- }
- @-webkit-keyframes movebox{
- 0% {left:10%;}
- 50% {left:90%;border-radius:100px;}
- 100% {left:10%;}
- }
- </style>
- <title>CSS3 Animation Demo 1</title>
- </head>
- <body>
- <div id="box" class="target animate"></div>
- </body>
- </html>
接下來我們通過第二個(gè)Demo來鞏固一下CSS3 Animation的理解，下面是第二個(gè)Demo - 旋轉(zhuǎn)的手指。代碼如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta charset="utf-8">
- <style>
- .finger {
- opacity: 0.5;
- -webkit-animation: ring;
- -webkit-animation-duration: 4s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-timing-function: ease-in-out;
- -webkit-transform-origin: 50% 50%;
- }
- @-webkit-keyframes ring {
- from { -webkit-transform: rotate(0deg); }
- to { -webkit-transform: rotate(360deg); }
- }
- </style>
- <title>CSS3 Animation - Finger Demo</title>
- </head>
- <body>
- <img class="finger" src="finger.png">
- </body>
- </html>
點(diǎn)擊這里可以查看第二個(gè)Demo的效果。這個(gè)Demo主要是通過CSS3 Animation來操作一個(gè)png圖片，通過定義from開始和to結(jié)束的兩個(gè)關(guān)鍵幀狀態(tài)的屬性值，瀏覽器完成動(dòng)畫的渲染播放。
下面本人就CSS3 Animation可能被使用的用例場(chǎng)景做一個(gè)描述，CSS3 Animation可以通過瀏覽器執(zhí)行CSS3代碼來渲染關(guān)鍵幀動(dòng)畫，但是它也有一定的限制：
1. CSS3 Animation處理動(dòng)畫仍然是瀏覽器調(diào)用CPU處理，複雜的動(dòng)畫不適用于現(xiàn)在的CSS3 Animation.
2. CSS3 Animation動(dòng)畫如果由多個(gè)并行的動(dòng)畫組成，那么他們之間存在層次覆蓋關(guān)系，如果用opacity來解決層次透明的話，動(dòng)畫用在移動(dòng)設(shè)備上將會(huì)有更多性能開銷。
3. CSS3 Animation不能高效的支持逐幀動(dòng)畫和sprite sheet，當(dāng)有sprite sheet動(dòng)畫需求時(shí)，可以使用JS框架例如CreateJS加載PNG序列來完成，或者使用更優(yōu)秀的頁(yè)游成熟的Flash starling stage3D處理sprite的方案。
4. 對(duì)于老式瀏覽器不支持CSS3 Animation，可以考慮用JS操作DOM的方式來處理類似的動(dòng)畫需求。
對(duì)于一個(gè)前端交互人員，這幾步的思路都不難理解，當(dāng)然CSS3 Animation的工作流離Flash關(guān)鍵幀動(dòng)畫的制作流程的先進(jìn)程度還差的很遠(yuǎn)很遠(yuǎn)，但是對(duì)于一項(xiàng)新鮮的技術(shù)，我們要抱有寬容理解的心態(tài)看待它的進(jìn)化。各位看到這里已經(jīng)可以基本了解CSS3 Animation的操作方式，如果對(duì)CSS3 Animation有學(xué)習(xí)的興趣，可以通過以下的資源來獲取更多信息：
• W3C CSS3 Animation 規(guī)范： http://www.w3.org/TR/css3-animations/
• Adobe CSS3 Animation 演示：http://beta.theexpressiveweb.com/#!/css3-animations
• 如何通過modernizer框架檢測(cè)瀏覽器是否支持CSS3 Animation:http://modernizr.com/docs/
• 一個(gè)更加複雜的CSS3動(dòng)畫教程：http://www.impressivewebs.com/demo-files/css3-animated-scene/
• 編寫CSS3 Animation的工具，Adobe Dreamweaver CS6和Adobe Edge Code（免費(fèi)），可以通過注冊(cè)Adobe Creative Cloud會(huì)員獲?。?a >http://t.cn/zY88XhT
• 本文章的示例代碼獲取。
