css3逐幀動畫

寫css3動畫的時候，咱們常常用到animation來實現，默認狀況下，animation是屬於連貫性的ease動畫。咱們熟悉的animation動畫有ease、ease-in、ease-out、linear、cubic-bezier等補間過段函數，固然還有咱們可能不是很熟悉的steps跳幀函數。咱們在作一些特殊的動畫，好比一個飄動的旗子、一個奔跑的小人，這些動畫不須要補間，這時候須要的是跳幀steps。

逐幀動畫實現方法：

一、把動畫幀切圖合併在一塊兒

二、經過CSS3的animation控制background-position

方法很簡單，這裏使用到的就是前面提到的過分函數steps

steps使用：

steps 函數指定了一個階躍函數，第一個參數指定了時間函數中的間隔數量（必須是正整數）；第二個參數可選，接受 start 和 end 兩個值，指定在每一個間隔的起點或是終點發生階躍變化，默認爲 end

好比：steps(1,start)、steps(1,end)或者steps(1)

這樣講很抽象，即便記住了，真正在作動畫的時候也可能搞混

逐幀動畫實例：

下面經過一個數字（1—5）變化動畫來看看到底start和end兩個會有什麼不一樣的效果：

一、steps(1,start)效果

先看下背景合併圖：

代碼（這裏只寫webkit的前綴，其它的兼容前綴在實際項目中本身補全）：

.ani 1 {      height : 200px ;      width : 200px ;      background : url (img/bg.png)  no-repeat  0  0 ;      -webkit-animation:num_ani  2 s steps( 1 ,start) infinite; /*效果1*/ } .ani 2 {      height : 200px ;      width : 200px ;      background : url (img/bg.png)  no-repeat  0  0 ;      -webkit-animation:num_ani  2 s steps( 1 ) infinite; /*效果2*/ }   @-webkit-keyframes num_ani{      0%  {          background-position : 0 ;      }      20%  {         background-position : -200px  0 ;      }      40%  {         background-position : -400px  0 ;      }      60%  {         background-position : -600px  0 ;      }      80%  {         background-position : -800px  0 ;      }      100%  {         background-position : -1000px  0 ;      } }

效果gif截圖：

分析：效果一里面的數字‘1’沒有顯示出來，並且後面那個邊空白了，效果二達到預期效果。

經過上面的栗子，相信已經明白了steps的第二個參數的區別了。再看看上面keyframes的設置，咱們要的效果實際上是5個變化，可是咱們寫了6幀的時間點。咱們的第五個數字的背景是 background-position:-800px 0，爲何上面的幀要寫到background-position:-1000px 0;

一開始，咱們可能按照之前連貫的動畫寫法，可是這裏是以跳幀的形式運行動畫的。好比說，咱們要見到數字1（也是0%-20%之間），那麼咱們應該顯示0到-200px之間的背景。也就是說咱們的逐幀動畫的幀數應該加1的。

點擊在線demo：

css3逐幀動畫DEMO》》》

旗子飄動例子：

細心的童鞋能夠看到，上面例子的steps的第一個參數都是取值1，取值爲1的意思是指動畫在一步完成，而後具體的跳幀是須要咱們本身在keyframes裏面設置。

旗子飄動代碼：

.ani 3 {      height : 55px ;      width : 60px ;      margin : 100px ;      background : url (images/flag.png)  no-repeat  0  0 ;      -webkit-animation:flag_ani  0.8 s steps( 5 ) infinite; }   @-webkit-keyframes flag_ani{      100%  {         background-position : 0  -282px ;      } }

從上面能夠看到，keyframes代碼比數字變化的動畫寫法簡單了不少，這是由於用了steps(5)，整個旗子的變化由5張圖組成，下面是背景圖的雪碧圖：

steps裏面指定動畫的步數，而後在keyframes裏面指定整個背景的position，像上面的旗子雪碧圖的高度就是282px，而後steps函數就會把他平均分紅5份，也就是282/5。平均這個詞很重要，也是他和前面steps(1)的主要區別。前面咱們把整個動畫看作一步完成，而後在keyframes裏面具體的定義各個幀。而steps(5)是代碼幫你平均分，若是你的雪碧圖合拼的間距不一致，會出現動畫錯位的問題。

 

效果gif截圖：

點擊在線demo：

css3逐幀動畫DEMO》》》