自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Open Web新功能探索 - CSS3 Animations入門

原創(chuàng)
作者：董龍飛
移動開發(fā) Android
CSS3已經(jīng)成為當今Open Web技術環(huán)境下的開發(fā)者必然選擇的一門技術，這些年從CSS2.1一路走來升級到全新版本的CSS3在各個技術公司和社區(qū)的合作下，也有了很多創(chuàng)新。CSS3 Animations Module被作為一種關鍵幀動畫控制的功能手段被引入CSS3的規(guī)范草案中。

CSS3已經(jīng)成為當今Open Web技術環(huán)境下的開發(fā)者必然選擇的一門技術，這些年從CSS2.1一路走來升級到全新版本的CSS3在各個技術公司和社區(qū)的合作下，也有了很多創(chuàng)新。CSS3 Animation Module（URL：http://www.w3.org/TR/css3-animations/）就是目前這兩年W3C在CSS3規(guī)范定義上的一個創(chuàng)新規(guī)范草案，該草案目前W3C的工作進度是今年2月份最新的Draft 19。Web前端交互開發(fā)者原本可以通過CSS Transitions對CSS屬性值的插入完成當他們需要修改屬性結果時所實現(xiàn)的簡單動畫需求，但是這種簡單的動畫只在開始和結束狀態(tài)上才可以通過已經(jīng)定義好的CSS屬性值來控制，而動畫變化的整個過程中，創(chuàng)作者基本不可能實現(xiàn)控制。因此，CSS3 Animations Module被作為一種關鍵幀動畫控制的功能手段被引入CSS3的規(guī)范草案中。

在開始講解CSS3 Animation的正式分析之前，我認為我們有必要先看一組數(shù)據(jù)統(tǒng)計，它來自Caniuse.com上對于瀏覽器器支持CSS3 Animation的百分比，如圖1所示。

圖1.目前各大主流瀏覽器不同版本對于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的各個Build都能支持CSS3 Animation;Opera Mini不支持;Android瀏覽器從2.1到3.0是部分支持CSS3 Animation,4.0+的版本均支持;BB Browser是7.0開始支持CSS3 Animation。全球主流瀏覽器各個版本支持CSS3 Animation的比率已經(jīng)從2012年初的53.91%提升到66.56%，經(jīng)過2012年一年的努力，CSS3 Animation的支持百分比率上升了近13個百分點。這一系列的數(shù)據(jù)可以給前端在是否使用CSS3 Animation于生產(chǎn)項目時非常關鍵的數(shù)據(jù)決策支持。另一方面來看，從CSS3 Animation的進步幅度而言，它是現(xiàn)今前端交互設計師值得投入學習的一項技術。

前端交互設計師和開發(fā)者對于CSS3 Animation的使用，將可以在跨設備的瀏覽器上實現(xiàn)平滑的，基于關鍵幀的可編程維護的CSS動畫，這個實現(xiàn)并不需要瀏覽器額外提供第三方控件支持，這一點非常重要。例如可以使用CSS3 Animation在iOS設備(iPhone,iPad等）的safari瀏覽器上實現(xiàn)CSS動畫功能。

學習CSS3 Animation需要注意以下幾個規(guī)則。第一，CSS Animation會對屬性值產(chǎn)生影響，當動畫在執(zhí)行過程中，被計算出的CSS屬性值會被動畫來控制，它會覆蓋原來頁面中已經(jīng)指定的樣式屬性值，比如物件的位置坐標，色彩等，會隨著動畫，值不斷變動覆蓋這些對象的最初屬性值。CSS3 Animation會覆蓋所有標準Style規(guī)則，但是會被標記為!important的規(guī)則覆蓋。第二，如果在某個時間某個點上有多個動畫作用于一個屬性至上，那么該點上最后一個觸發(fā)“animation-name”的值會覆蓋其他的值。第三，動畫不會影響進入動畫前的計算出的屬性值，不會影響動畫delay期前的屬性值，不會影響動畫結束后的屬性值。我們引用W3C上的標準圖示來解釋上面的話，如圖2所示。

圖2 CSS3 Animation對于計算CSS屬性值在動畫不同階段的影響

接下來我們可以通過示例來明確對CSS3 Animation的操作方法。第一個示例一定是一個簡單的示例，比如，我們想讓一個色塊以關鍵幀的方式左右運動。要完成這個動畫，從CSS3的設計角度出發(fā)，我們要有以下幾步的處理方法：

• 定義一個HTML頁面，里面有個區(qū)域用于放置一個色塊。

• 通過CSS3定義這個色塊的基礎屬性。

• 用CSS3來適當修飾這個色塊。

• 用CSS3 Animation的語法來定義這個色塊的關鍵幀動畫

通過以上4步思路，我們認定可以完成這個CSS3 Animation中堪稱最簡單的動畫。接著就是落實在實現(xiàn)每一步上。首先，我們需要一個空白的HTML5頁面，這一步太簡單了，我直接貼代碼好了，沒什么可解釋的。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.     <head> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5.         <meta charset="utf-8">  
  6.         <title>CSS3 Animation Demo1</title> 
  7.     </head> 
  8.     <body> 
  9.         <div class="box"></div> 
  10.     </body> 
  11. </html> 

其次，是對名稱為box的div屬性定義其代表的色彩區(qū)域，這里就要用到CSS3的代碼，這段代碼放在<style>標簽對內。

  1. <style> 
  2. .box{ 
  3.     width:200px; 
  4.     height:200px; 
  5.     background:rgba(255,0,0,0.5); 
  6.     border-radius:10px; 
  7.     position:absolute; 
  8.     top:100px; 
  9.     left:50%; 
  10.     margin-left:-100px; 
  11. } 
  12. </style> 

如果此時打開瀏覽器，會看到瀏覽器頁面中央偏上部分有一個紅色色塊，如圖3所示。

圖3.用CSS3定義出來的一個紅色色塊

你完全可以把上面的色塊更深度的定制，比如把border-radius的值設定為100，你可以試試看色塊變成了什么形狀。本文就不在CSS3的其他屬性設定上花費太多的時間，想深入學習CSS3整個體系的，現(xiàn)在的網(wǎng)絡資源和書籍簡直多如牛毛。對于最后一步，用CSS3 Animation來定義色塊的關鍵幀動畫，我們來看下面這段代碼：

  1. @-webkit-keyframes movebox{ 
  2.             0% {left:10%;} 
  3.             50% {left:90%;border-radius:100px;} 
  4.             100% {left:10%;} 
  5. }  

上述代碼定義了一個CSS關鍵幀動畫，-webkit-keyframes是指該CSS3動畫定義是針對以webkit為核心的瀏覽器，比如Google Chrome，如果以-moz-keyframes出現(xiàn)，則定義是針對Mozilla Firefox的，這種CSS3加不同前綴適應不同瀏覽器兼容性的方式，已經(jīng)非常常見，本文將不再贅述，后面的例子都以-webkit-為主。movebox是這個示例動畫的名稱定義，調用該動畫時會使用該名稱。0%，50%，100%是該動畫的3個關鍵幀，分別表示動畫開始，中間，結束，當然，我們還可以在0%-100%之間加入更多若干的關鍵幀。50%{left:90%;border-radius:100px;}是表示動畫中間關鍵幀，調用該動畫的CSS3對象的位置將會移動到距離瀏覽器viewport左邊相對90%的位置，邊緣圓角半徑變?yōu)?00px,由于定義色塊的寬度是200px，那么你將在50%位置的動畫關鍵幀處看到有趣的變化。

   那么上述animation1.html的整體代碼是如下的部分：

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5.     <meta charset="utf-8"> 
  6.     <style> 
  7.         .box{ 
  8.             width:200px; 
  9.             height:200px; 
  10.             background:rgba(255,0,0,0.5); 
  11.             border-radius:10px; 
  12.             position:absolute; 
  13.             top:100px; 
  14.             left:50%; 
  15.             margin-left:-100px; 
  16.             -webkit-animation:movebox 0s 5s infinite; 
  17.         } 
  18.             @-webkit-keyframes movebox{ 
  19.                     0% {left:10%;} 
  20.                     50% {left:90%;border-radius:100px;} 
  21.                     100% {left:10%;} 
  22.             } 
  23.     </style> 
  24.     <title>CSS3 Animation Demo 1</title> 
  25.     </head> 
  26.     <body> 
  27.         <div class="box"></div> 
  28.     </body> 
  29. </html> 

你也可以點擊這里查看在線演示版本。借著上面的這第一個Demo，我們可以了解了CSS3 Animation的基本處理原理。CSS3定義的關鍵幀動畫和Flash的關鍵幀動畫處理機制幾乎一樣，只需要開發(fā)者定義關鍵幀即可，而關鍵幀之間的變化，則完全依靠瀏覽器的補間計算能力來完成。CSS3 Animation在-webkit-animation屬性值的定義上也有其他一些設定你可以嘗試，-webkit-animation的屬性值有如下主要參數(shù)：

• -webkit-animation-name: 動畫名稱

• -webkit-animation-iteration-count:循環(huán)次數(shù)，infinite表示無限

• -webkit-animation-timing-function:linear,ease(默認）,ease-in,ease-out等

• -webkit-animation-duration:動畫時長(單位:s)

• -webkit-animation-delay:動畫延時(單位:s)

• 更多參數(shù)定義，參考http://www.w3.org/TR/css3-animations/

那么我們將第一個CSS3的Demo的語法改動的更加規(guī)范一些，就變成下面的代碼：

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.     <head> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5.     <meta charset="utf-8"> 
  6.     <style> 
  7.         #box{ 
  8.             width:200px; 
  9.             height:200px; 
  10.             background:rgba(255,0,0,0.5); 
  11.             border-radius:10px; 
  12.             position:absolute; 
  13.             top:100px; 
  14.             left:50%; 
  15.             margin-left:-100px; 
  16.         } 
  17.             #box.animate{ 
  18.                     -webkit-animation-name:movebox; 
  19.                     -webkit-animation-duration:5s; 
  20.                     -webkit-animation-timing-function:ease; 
  21.                     -webkit-animation-iteration-count:infinite; 
  22.             } 
  23.             @-webkit-keyframes movebox{ 
  24.                     0% {left:10%;} 
  25.                     50% {left:90%;border-radius:100px;} 
  26.                     100% {left:10%;} 
  27.             } 
  28.     </style> 
  29.     <title>CSS3 Animation Demo 1</title> 
  30.     </head> 
  31.     <body> 
  32.         <div id="box" class="target animate"></div> 
  33.     </body> 
  34. </html> 

   接下來我們通過第二個Demo來鞏固一下CSS3 Animation的理解，下面是第二個Demo - 旋轉的手指。代碼如下：

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.     <head> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5.     <meta charset="utf-8"> 
  6.     <style> 
  7.         .finger { 
  8.             opacity: 0.5; 
  9.             -webkit-animation: ring; 
  10.             -webkit-animation-duration: 4s; 
  11.             -webkit-animation-iteration-count: infinite; 
  12.             -webkit-animation-timing-function: ease-in-out; 
  13.             -webkit-transform-origin: 50% 50%; 
  14.         } 
  15.         @-webkit-keyframes ring { 
  16.             from { -webkit-transform: rotate(0deg); } 
  17.             to { -webkit-transform: rotate(360deg); } 
  18.      } 
  19.     </style> 
  20.     <title>CSS3 Animation - Finger Demo</title> 
  21.     </head> 
  22.     <body> 
  23.         <img class="finger" src="finger.png"> 
  24.     </body> 
  25. </html> 

點擊這里可以查看第二個Demo的效果。這個Demo主要是通過CSS3 Animation來操作一個png圖片，通過定義from開始和to結束的兩個關鍵幀狀態(tài)的屬性值，瀏覽器完成動畫的渲染播放。

下面本人就CSS3 Animation可能被使用的用例場景做一個描述，CSS3 Animation可以通過瀏覽器執(zhí)行CSS3代碼來渲染關鍵幀動畫，但是它也有一定的限制：

1. CSS3 Animation處理動畫仍然是瀏覽器調用CPU處理，複雜的動畫不適用于現(xiàn)在的CSS3 Animation.

2. CSS3 Animation動畫如果由多個并行的動畫組成，那么他們之間存在層次覆蓋關系，如果用opacity來解決層次透明的話，動畫用在移動設備上將會有更多性能開銷。

3. CSS3 Animation不能高效的支持逐幀動畫和sprite sheet，當有sprite sheet動畫需求時，可以使用JS框架例如CreateJS加載PNG序列來完成，或者使用更優(yōu)秀的頁游成熟的Flash starling stage3D處理sprite的方案。

4. 對于老式瀏覽器不支持CSS3 Animation，可以考慮用JS操作DOM的方式來處理類似的動畫需求。

對于一個前端交互人員，這幾步的思路都不難理解，當然CSS3 Animation的工作流離Flash關鍵幀動畫的制作流程的先進程度還差的很遠很遠，但是對于一項新鮮的技術，我們要抱有寬容理解的心態(tài)看待它的進化。各位看到這里已經(jīng)可以基本了解CSS3 Animation的操作方式，如果對CSS3 Animation有學習的興趣，可以通過以下的資源來獲取更多信息：

• W3C CSS3 Animation 規(guī)范： http://www.w3.org/TR/css3-animations/

• Adobe CSS3 Animation 演示：http://beta.theexpressiveweb.com/#!/css3-animations

• 如何通過modernizer框架檢測瀏覽器是否支持CSS3 Animation:http://modernizr.com/docs/

• 一個更加複雜的CSS3動畫教程：http://www.impressivewebs.com/demo-files/css3-animated-scene/

• 編寫CSS3 Animation的工具，Adobe Dreamweaver CS6和Adobe Edge Code（免費），可以通過注冊Adobe Creative Cloud會員獲?。?a >http://t.cn/zY88XhT

• 本文章的示例代碼獲取。

 

責任編輯：徐川 來源： 51CTO
Open WebHTML5CSS3Animation
相關推薦

2010-12-10 14:57:41

IE9CSS3

2010-09-01 13:23:52

CSS3

2013-03-04 14:13:13

HTML5CSS3響應式

2023-06-15 10:21:48

CSS前端

2009-06-01 14:59:50

css3.0css3

2023-04-14 16:45:21

CSS前端CSS3

2012-01-12 11:05:05

響應式Web設計

2010-07-23 11:21:39

iPhoneCSS3Media Queri

2012-09-18 10:23:48

2010-03-22 08:56:12

2010-09-07 16:04:02

CSS

2013-03-04 13:14:00

Adobe Edge HTML5

2019-09-23 12:40:45

Android 10GoogleAndroid

2013-01-30 15:59:29

adobeCSS3HTML5

2012-09-13 09:24:31

CSSJSjQ

2024-04-28 08:31:47

CSS3Clamp()函數(shù)響應式設計工具

2012-04-10 10:31:07

2012-02-29 09:27:36

ibmdw

2024-05-31 00:00:01

2022-07-28 21:17:46

福布斯數(shù)字化Web3
點贊
收藏

51CTO技術棧公眾號