日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
OpenWeb新功能探索-CSS3Animations入門

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. 
  
  
  
  
    3. 
  
  
  
  
  3.     
    4. 
  
  
  
  
  4.         
    5. 
  
  
  
  
  5.          
    6. 
  
  
  
  
  6.         CSS3 Animation Demo1
    7. 
  
  
  
  
  7.     
    8. 
  
  
  
  
  8.     
    9. 
  
  
  
  
  9.         
  •     

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

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

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

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

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

    上述代碼定義了一個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. 
  
  
  
  
    2. 
  
  
  
  
    3.     
      4. 
  
  
  
  
    4.         
      5. 
  
  
  
  
    5.     
      6. 
  
  
  
  
    6.     
      7. 
  
  
  
  
    7.     CSS3 Animation Demo 1
      8. 
  
  
  
  
    8.     
      9. 
  
  
  
  
    9.     
      10. 
  
  
  
  
    10.         
  •     

  • 你也可以點擊這里查看在線演示版本。借著上面的這第一個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. 
  
  
  
  
      3. 
  
  
  
  
    3.     
      4. 
  
  
  
  
    4.         
      5. 
  
  
  
  
    5.     
      6. 
  
  
  
  
    6.     
      7. 
  
  
  
  
    7.     CSS3 Animation Demo 1
      8. 
  
  
  
  
    8.     
      9. 
  
  
  
  
    9.     
      10. 
  
  
  
  
    10.         
  •     

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

     
 
 
 
      
  
  
  
  
    1. 
  
  
  
  
      3. 
  
  
  
  
    3.     
      4. 
  
  
  
  
    4.         
      5. 
  
  
  
  
    5.     
      6. 
  
  
  
  
    6.     
      7. 
  
  
  
  
    7.     CSS3 Animation - Finger Demo
      8. 
  
  
  
  
    8.     
      9. 
  
  
  
  
    9.     
      10. 
  
  
  
  
    10.         
      11. 
  
  
  
  
    11.     
      12. 
  
  
  
  
    12.

    點擊這里可以查看第二個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會員獲?。篽ttp://t.cn/zY88XhT

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


    網(wǎng)頁標題：OpenWeb新功能探索-CSS3Animations入門
    文章鏈接：http://www.5511xx.com/article/cohsdoc.html