用純 CSS 做定格動畫

用純 CSS 做定格動畫

什麼是定格動畫?簡單來說,是一種動畫技術,它的原理是將每幀不同的圖像快速播放,因人眼有視覺暫留,所以會產生動畫效果。小時候玩的手翻書就是以這樣的原理來達成動畫的效果!


事前準備

要用 CSS 完成定格動畫,首先需要有雪碧圖(Sprite)素材,當然,還需要會 CSS animation 的基本操作。

  • 雪碧圖(Sprite)
  • CSS animation

什麼是雪碧圖(Sprite)

將多張圖像整合為單一圖像,然後利用定位的方式顯示各部分圖的技術,早期網頁常以這種方式來減少圖片加載的次數,以便提高網頁顯示速度。


CSS animation

在 CSS animation 包含了以下幾種屬性,其中,若要做定格動畫,timing-function 的設定為關鍵,需要將 timing-function 設定為 steps

  • 動畫名稱 animation-name

  • 持續時間 animation-duration

  • 時間函數 animation-timing-function

    • ease (預設值)
    • ease-in
    • ease-in-out
    • ease-out
    • linear
    • steps(n, step position)
  • 延遲時間 animation-delay

  • 播放次數 animation-iteration-count

  • 播放方向 animation-direction

  • 前後狀態 animation-fill-mode

  • 運行停止 animation-play-state


steps(n, step position)

steps 第一個參數 n 為一正整數,至於第二個參數 step position,這裡僅介紹 startend(預設值) 兩個值。

  • n: 正整數

  • step position

    • start:動畫一開始就跳一階
    • end (預設值)

其他多數 timing-function 不一樣的是,step 像是階梯(step) 一樣,一階一階,而非完全連續型函數。

下圖左方為 start 的 timing-function,右方為 end 的 timing-function,若看不懂 timing-function 其實也沒關係,會用就好XD



用一個簡單的小範例可看出 startend 的差異。
若要做定格動畫,我們需要利用 end 的特性。



開始做定格動畫

有了一些預備知識之後,就可以來動手做定格動畫了!只要依照以下 3 個步驟就可以完成。


step1

確認雪碧圖有幾幀 ⇒ 決定 steps(n) 中的 n,完整寫法為 steps(n, end),可省略 end 不寫(因為是預設值)。

例如:
下方雪碧圖有 8 幀 ⇒ steps(8)。


step2

確認雪碧圖的總寬度(或總高度) ⇒ 決定總共要移動多少距離。

例如:下方雪碧圖的總寬度為 2880px ⇒ 圖片將移動(translateX) 2880px。


step3

計算每一幀的寬度或高度 ⇒ 決定容器元素的寬度或高度。

每一幀的寬度 = 總寬度 / 幀數

所以每一幀的寬度為 2280px / 8,等於 360px ⇒ 將容器元素寬度設定為 360px


實現結果

1
2
3
4
<div class="container">
<!-- 雪碧圖(總寬度 2880px,共 8 幀)-->
<img src="https://i.imgur.com/5aXROc2.png" alt=""/>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.container {
width: 360px; // 總寬度 2880px / 8幀
overflow: hidden;
animation: moveContainer 5s infinite linear;
}

img {
animation: run 0.5s infinite steps(8); // 8 幀
}

@keyframes run {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(-2880px); // 總寬度 2880px
}
}

// 移動 container,製造「向前跑」效果
@keyframes moveContainer {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(1600px);
}
}




可以在網路上找自己喜歡的雪碧圖素材,運用相同的原理,做出各種有趣的定格動畫。











參考資源:
CSS Easing Functions Level 1

MDN-timing-function

Commentaires

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×