H5頁(yè)面中實(shí)現(xiàn)動(dòng)畫(huà)有哪些方式

  
    
    
      #animate {
        width: 200px;
        height: 200px;
        background: #ccc;
      }
    
  
  
    

Jquery的animate()方法就是這種方式實(shí)現(xiàn)的。

缺點(diǎn)：javascript 實(shí)現(xiàn)動(dòng)畫(huà)通常會(huì)導(dǎo)致頁(yè)面頻繁性重排重繪，消耗性能，一般應(yīng)該在桌面端瀏覽器。在移動(dòng)端上使用會(huì)有明顯的卡頓

16ms 的問(wèn)題：一般認(rèn)為人眼能辨識(shí)的流暢動(dòng)畫(huà)為每秒 60 幀，這里 16ms 比(1000ms/60)幀略小一些，但是一般可仍為該動(dòng)畫(huà)是流暢的。 在很多移動(dòng)端動(dòng)畫(huà)性能優(yōu)化時(shí)，一般使用 16ms 來(lái)進(jìn)行節(jié)流處理連續(xù)觸發(fā)的瀏覽器事件。例如對(duì)touchmove、scroll事件進(jìn)行節(jié)流等。通過(guò)這種方式減少持續(xù)事件的觸發(fā)頻率，可以大大提升動(dòng)畫(huà)的流暢性。

四、SMIL

SMIL 特性： 程序以開(kāi)始，以結(jié)束，整個(gè)程序由body和head兩個(gè)部分組成，SMIL要求其標(biāo)記和標(biāo)記的屬性必須小寫(xiě)！有些標(biāo)記必須有一斜杠作為結(jié)束標(biāo)記，屬性值必須用雙引號(hào)括起來(lái)，SMIL文件的拓展名為*.smil或者*.smi。

嵌入 html

向標(biāo)簽添加命名空間定義，添加一個(gè)元素，以導(dǎo)入"time"命名空間，添加一個(gè)定義"time"類(lèi)的                                      

缺點(diǎn)：一看就知道只支持 IE。沒(méi)啥好說(shuō)的

五、APNG

APNG, 全稱(chēng)是“Animated Portable Network Graphics”, 是PNG的位圖動(dòng)畫(huà)擴(kuò)展，他和 gif 的區(qū)別在于：圖片質(zhì)量,gif最多支持 256 種顏色，不支持Alpha透明通道?？梢苑Q(chēng)之為色彩豐富支持Alpha透明通道體積大小和 gif 甚至更小的 gif。 2007 年 4 月 20日，PNG組織投票以 10:8 否決APNG進(jìn)入官方標(biāo)準(zhǔn)。也就是PNG不認(rèn)可他。

缺點(diǎn)：Chrome 59 之后，只有 IE 不支持。

APNG的制作：http://littlesvr.ca/apng/

六、Javascript + SVG

SVG的動(dòng)畫(huà)元素是和SMIL開(kāi)發(fā)組合作開(kāi)發(fā)的。SMIL開(kāi)發(fā)組和SVG開(kāi)發(fā)組合作開(kāi)發(fā)了SMIL動(dòng)畫(huà)規(guī)范，在規(guī)范中制定了一個(gè)基本的XML動(dòng)畫(huà)特征集合。SVG吸收了SMIL動(dòng)畫(huà)規(guī)范當(dāng)中的動(dòng)畫(huà)優(yōu)點(diǎn)，并提供了一些SVG繼承實(shí)現(xiàn)。

特性

• SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)

• SVG 用來(lái)定義用于網(wǎng)絡(luò)的基于矢量的圖形

• SVG 使用 XML 格式定義圖形

• SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有所損失

• SVG 是萬(wàn)維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)

• SVG 與諸如 DOM 和 XSL 之類(lèi)的 W3C 標(biāo)準(zhǔn)是一個(gè)整體

SVG animation最強(qiáng)大的地方在于：? 只要在頁(yè)面放幾個(gè)animate元素，沒(méi)有任何CSS, 沒(méi)有任何JS，頁(yè)面上的元素就像是沒(méi)吃草的馬兒一樣，愉快地跑起來(lái)了。你會(huì)發(fā)現(xiàn)，我勒個(gè)去，原來(lái)要實(shí)現(xiàn)個(gè)動(dòng)畫(huà)效果這么簡(jiǎn)單。什么CSS3動(dòng)畫(huà)，哪邊涼快哪邊呆著吧！

  
    
      哈哈
    
    
  

元素

此元素沒(méi)有動(dòng)畫(huà)效果,可以在特定時(shí)間之后修改某個(gè)屬性值（也可以是CSS屬性值）

  
    
      測(cè)試
      
      
    
  

基礎(chǔ)動(dòng)畫(huà)元素。實(shí)現(xiàn)單屬性的動(dòng)畫(huà)過(guò)渡效果

  
    
      測(cè)試
      
      
    
  

顏色動(dòng)畫(huà)，因?yàn)?animate 能實(shí)現(xiàn)其功能，所以被廢棄了。逝者已矣...

實(shí)現(xiàn) transform 變換動(dòng)畫(huà)效果的,與 CSS3 的 transform 變換是一個(gè)套路

  
    
      測(cè)試
    
    
    
  

元素可以讓 SVG 各種圖形沿著特定的 path 路徑運(yùn)動(dòng)~

  
    動(dòng)
    
    
  
  

展示的時(shí)候是這個(gè)樣子的

暫停和播放

// svg指當(dāng)前svg DOM元素
// 暫停
svg.pauseAnimations();

// 重啟動(dòng)
svg.unpauseAnimations();

關(guān)于 svg 的之后再寫(xiě)文章詳細(xì)介紹吧

七、Video

是HTML 5的新標(biāo)簽

  您的瀏覽器不支持 video 標(biāo)簽。

相關(guān)屬性

八、Javascript + Canvas

canvas作為H5新增元素，是借助Web API來(lái)實(shí)現(xiàn)動(dòng)畫(huà)的。 結(jié)合setInterval或者requestAnimationFrame可以實(shí)現(xiàn)各種樣的動(dòng)畫(huà)，下面的例子展示了一個(gè) 7 色圓的顏色過(guò)度

復(fù)制下面鏈接在線看demo：

https://jsbin.com/piwihur/edit?html,js,output

cavans有些復(fù)雜，一時(shí)半會(huì)消化不了。之后再寫(xiě)詳細(xì)的文章研究。Canvas主要優(yōu)勢(shì)是可以應(yīng)對(duì)頁(yè)面中多個(gè)動(dòng)畫(huà)元素渲染較慢的情況，完全通過(guò)javascript來(lái)渲染控制動(dòng)畫(huà)的執(zhí)行?？捎糜趯?shí)現(xiàn)較復(fù)雜動(dòng)畫(huà)

九、CSS3 transition/animation

transition

transition是過(guò)度動(dòng)畫(huà)。但是transition并不能實(shí)現(xiàn)獨(dú)立的動(dòng)畫(huà)，只能在某個(gè)標(biāo)簽元素樣式或狀態(tài)改變時(shí)進(jìn)行平滑的動(dòng)畫(huà)效果過(guò)渡，而不是馬上改變。

在移動(dòng)端開(kāi)發(fā)中，直接使用transition動(dòng)畫(huà)會(huì)讓頁(yè)面變慢甚至卡頓。所以我們通常添加transform:translate3D(0,0,0)或transform:translateZ(0)來(lái)開(kāi)啟移動(dòng)端動(dòng)畫(huà)的GPU加速，讓動(dòng)畫(huà)過(guò)程更加流暢。

animation

animation算是真正意義上的CSS3動(dòng)畫(huà)。通過(guò)對(duì)關(guān)鍵幀和循環(huán)次數(shù)的控制，頁(yè)面標(biāo)簽元素會(huì)根據(jù)設(shè)定好的樣式改變進(jìn)行平滑過(guò)渡。而且關(guān)鍵幀狀態(tài)的控制是通過(guò)百分比來(lái)控制的。

CSS3最大的優(yōu)勢(shì)是擺脫了js的控制，并且能利用硬件加速以及實(shí)現(xiàn)復(fù)雜動(dòng)畫(huà)效果。

有一篇文章做了簡(jiǎn)單的介紹，點(diǎn)這里

假如用CSS3來(lái)實(shí)現(xiàn)上面的Canvas7 彩顏色過(guò)渡的話，就非常簡(jiǎn)單了

@keyframes color {
  0% {
    background-color: red;
  }
  7% {
    background-color: orange;
  }
  17% {
    background-color: yellow;
  }
  22% {
    background-color: green;
  }
  42% {
    background-color: cyan;
  }
  82% {
    background-color: blue;
  }
  90% {
    background-color: purple;
  }
}

當(dāng)然并不是用CSS3做動(dòng)畫(huà)比Canvas牛逼，只是使用場(chǎng)景不一樣吧。 知道的就這些了，之后再補(bǔ)充吧。

以上是“H5頁(yè)面中實(shí)現(xiàn)動(dòng)畫(huà)有哪些方式”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！