css3實現逐幀動畫

小瑪麗在隔壁發表於2018-06-29
CSSS3動畫

例子

demo：你們要的小姐姐

解析

做css3逐幀動畫，你只需要一張類似sprite圖（雪碧圖），如下圖：

6幀圖

這張圖也不算標準，中間間隔沒有一致，因為網上隨便找的，大家將就看一下。

什麼是steps?

steps: specifies a stepping function, described above, taking two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value ‘start’ or ‘end’, and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value ‘end’.

大體翻譯一下就是：

steps：函式指定了一個階躍函式，如上所述，接收兩個引數。 第一個引數指定函式中的間隔數。它必須是一個正整數（大於0）。 第二個引數是可選的，可以是'開始'或'結束'值，並指定每個間隔的起點或是終點發生階躍變化。如果省略第二個引數，則給出值'end'。

  • steps-start: start是忽略動畫的第一幀，即0%和100%這2幀是重疊的。
  • steps-end: end是忽略動畫的最後一幀，即0%和100%這2幀也是重疊的。

小技巧

對於我們要做的這個sprite（雪碧圖）一般要在最後一幀留一個空白幀。 為什麼呢？你可以這樣理解，當你100% background-position跑到最後一幀這個位置時，瞬間回到0%最後一幀其實是沒看到的，所以一般多做一幀空白幀 這樣100%到空白幀時瞬間回到0%跟第一幀重疊。

catEat1

所以一般多做一幀空白幀，這樣100%到空白幀時瞬間回到0%跟第一幀重疊，這樣就不會出現漏幀的問題啦！

catEat2

詳細的解析請參考：CSS3 timing-function: steps() 詳解

講解了這麼多，大家都對steps有一定的瞭解了吧，接下來就上一下demo的程式碼：

.smile {
    background: url('http://eherry.test.upcdn.net/animation/statics/aa.jpg') no-repeat;
    width: 200px;
    height: 134px;
    background-position: 0 0;
    animation: smile 1s step-end infinite; // 這裡的step-end 相當於step(1, end);
    -webkit-animation: smile 1s step-end infinite;
  }
  
  // 6張動畫，對應6幀
  @keyframes smile {
    0%{ background-position: 0 0; }
    20%{ background-position: 0 20%; }
    40%{ background-position: 0 40%; }
    60%{ background-position: 0 60%; }
    80%{ background-position: 0 80%; }
    100%{ background-position: 0 100%; }
  }
複製程式碼

其實就是這麼簡單啦~今天就先分享到這裡吧，希望大家多提提建議~

相關文章