CSS3 animation – steps 函式詳解

佚名發表於2019-10-16
CSSS3函式

本文透過例項程式碼給大家介紹了CSS3 animation – steps 函式，程式碼簡單易懂，非常不錯，具有一定的參考借鑑價值

這幾天在看一些 css3 動畫的原始碼實現時，發現 css 程式碼的 animation 當中有一個比較陌生的單詞 steps ，在原始碼中是這麼寫的：

animation: thunder 2s steps(1, end) infinite;

查閱相關資料後發現 steps 函式是 animation-timing-function 屬性的一個值，那這個函式相較於其他值比如 ease ， linear 的區別在哪裡呢。

steps

在查閱相關資料後才發現自己之前對 animation-timing-function 瞭解不夠充分，實際上 animation-timing-function 的 function 指的是 steps() 和  cubic-bezier( ) 即貝塞爾曲線函式這兩個函式，像 linear ， ease 這些值其實是   cubic-bezier() 函式的特殊值， steps() 函式同樣也有兩個特殊值： step-start 和 step-end 。在瞭解這些前提後，下面來具體分析 steps 函式的作用。

實際上 steps 函式和   cubic-bezier 函式分別對應動畫的兩種形式：跳躍式和連貫式。回顧平常我們是怎麼使用  cubic-bezier 函式的：

div {
  animation: move 1s linear infinite alternate;
}
@keyframes move {
  0% {
    margin-left: 0;
  }
  30% {
    margin-left: 50px;
  }
  100% {
    margin-left: 100px;
  }
}

我們只需要在 @keyframes 中定義關鍵幀， cubic-bezier 函式會幫助我們在關鍵幀之間補幀使其成為流暢的動畫，但有時候我們不希望動畫連貫的播放，而是跳躍式的播放，那我們就需要藉助 steps 函式了。

steps函式接收兩個引數： number 和 position 。 number 是正整數， position 有兩個值： start 和 end 。前面我們提到 steps 的兩個特殊值： step-start 和 step-end ，實際上它們分別代表 steps(1, start) 和 steps(1, end) 。那這兩個引數分別代表什麼含義呢？

number： number 表示動畫被分成了多少段，比如上述例子表示 div 從 0px 移動到 100px 的這一整段過程一共被分成 4 段。

position： position 引數可選，預設為 end 。 start 與 end 的含義是什麼呢，我的理解是： number 會將整個動畫過程分成多段或者說多個週期， start 表示動畫的狀態會在每個週期的起始點瞬間完成變化，而 end 則表示動畫的狀態會在每個週期的結束點瞬間完成變化。這裡附上 W3C 官方文件上的一張圖片：

上圖的座標系中，x軸代表時間，y軸代表動畫的進度，在這張圖中我們需要注意的是實心圓點，實心圓點表示的是動畫所處的狀態。我們來看第一張圖，它表示的是 steps(1, start) 。根據前面的解釋，整段動畫將會作為一段也就是隻有一個週期，而指定了 start 引數使得動畫會在週期的起始點狀態發生改變，所以我們可以看到第一個實心圓點的座標為 (0,1) 。對於第二張圖片，由於指定了 end ，所以動畫的狀態會在週期的結束點突變，因此對應兩個實心圓點的座標為 (0,0) 和 (1,1) 。下面的 steps(3, start) 和 steps(3, end) 也是同樣的道理，這裡就不具體分析了。

接下來為了更加直觀的感受 steps 函式的作用，舉幾個例子來加深理解：

這裡先舉一個連貫動畫來作為參考，部分程式碼如下：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s linear;
}
@keyframes move {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: 200px;
  }
}

效果如下：

可以看到紅方塊是經過 2s 勻速運動到終點，然後回到起始位置

接下來是 steps(1, start) 的例子：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s step-start;
}

效果如下：

可以看到在我點選重新整理的一瞬間方塊就到達了終點，然後經過 2s 後回到起始位置

再來看看 steps(1, end) 的例子：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s step-end;
}

效果如下：

可以看到當點選重新整理時方塊並沒有運動，這是因為方塊會在 2s 後瞬間移動到 200px 的位置，然後動畫結束，回到起始位置，由於這個過程特別快，肉眼是看不到的，所以看上去就好像方塊沒有運動。如果想要停留在終點只需要給 div 加上 animation-fill-mode: forwards 即可。

我們再來看看分成多段的情況，首先 start 分成多段：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 4s steps(4, start);
}

效果如下：

上述例子我們將 4s 動畫分成 4 個週期，方塊會在每個週期起始點也就是 0s ，1s ，2s ，3s 處發生位移，從上述效果圖我們也可以看出，在我點選重新整理瞬間就完成了一次狀態變化，然後在 3s 後達到終點，在終點待了 1s 到動畫結束，回到起始位置。

再來看 end 分成多段的情況：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 4s steps(4, end);
}

效果如下：

指定 end 會使動畫狀態在每個週期的結束點發生變化，對應例子就是在 1s ，2s ，3s ，4s 處發生變化。從上述效果圖我們也可以看出方塊在我點選重新整理的 1s 後開始運動，在 4s 方塊移動到終點的瞬間由於動畫結束的原因又移動到起始位置，所以會產生方塊好像沒有移動到終點的錯覺。

總結

以上所述是小編給大家介紹的CSS3 animation – steps 函式詳解,希望對大家有所幫助

相關文章