使用CSS實現圖片幀動畫與曲線運動

本文首發於公衆號：符合預期的CoyPan

寫在前面

在前端開發中，提到動畫，咱們能夠：

1. 直接利用DOM實現動畫。
2. 利用canvas實現動畫。
3. 利用svg實現動畫。
4. 直接用一張gif動圖。
5. 利用圖片實現幀動畫。
6. ...

全部動畫的基本原理都是：在短期內連續依次展現對應的圖片，這樣在視覺上看起來就是'動'的了。

本文主要來講一說第4點和第5點。

圖片幀動畫

當咱們要實現的動畫效果比較複雜，並且開發排期比較緊的狀況下，用一張gif動圖來實現動畫是成本最低，效果也不錯的一種方案。好比下面這種動畫效果：

但是若是咱們想讓動效在某個時候暫停，隔一段時間後，再從斷點開始繼續播放動效，用gif圖就實現不了了。gif圖的動效是沒有辦法暫停的。這個時候，能夠考慮採用圖片幀動畫。

圖片幀動畫能夠看作是：把gif圖的原理在前端用代碼實現了一遍。

上面個那個動效，(假設)能夠分紅100幀，即100張圖片，而後用代碼控制100張圖片依次顯示。而且，能夠隨時在中途暫停。

爲了節省http請求，把100張圖片合成一張雪碧圖，而後用background-position去控制顯示哪一張圖。推薦一個很不錯的圖片生成工具：GKA

我把100張圖片生成了一個豎直的雪碧圖。

在代碼裏，只須要更新DOM元素的background-position便可實現動畫。

首先第一個點須要注意：background-position設置的是背景圖片相對於DOM元素的起始位置。

假設DOM元素和圖片寬高都是 100 * 200

--- css

#wrapper {
	width: 100px;
	height: 200px;
	background-image: url('雪碧圖.png');
	background-size: 100% 10000%; // 有100張圖， 100*100
	background-repeat: no-repeat;
}

--- js

var domEl = document.querySelector('#wrapper');
var n; // n：顯示雪碧圖中第幾張圖片，n >=0 && n<100
domEl.style.backgroundPosition = `0px ${-n*200}px`; // 注意這裏是負值
複製代碼

咱們只須要用js控制n的值就行，就能夠很容易實現隨時執行、暫停動效。

上面的例子中，dom元素寬高是固定的，若是不固定、想要自適應的話，須要根據圖片寬高比，經過padding-top來設置dom元素的寬高比。這個時候，在background-position中，也沒法使用具體的數值了，須要使用百分比。這裏有一個須要注意的地方：

background-position百分比取值時，很天然的覺得是直接用背景圖片寬高乘以百分比便可獲得最終偏移量，但其實不是的。計算公式以下：

x偏移量 = (元素寬度—背景圖片的寬度)*x百分比
y偏移量 = (元素高度—背景圖片的高度)*y百分比
複製代碼

換算一下：

x百分比 = x偏移量 / (元素寬度 - 背景圖片寬度)
y百分比 = y偏移量 / (元素高度 - 背景圖片高度)
複製代碼

具體到上面的例子中，就是：

// 假設每一張小圖片寬度爲w, 高度爲h, 當前須要展現第n張圖片，一共有100張圖，則
var xPercent = 0;
var yPercent = -hn / (h - 100h) * 100 =  n / 99 * 100;
domEl.style.backgroundPosition = `${xPercent}% ${yPercent}%`;
複製代碼

最終，咱們就能實現圖片幀動畫了。固然，若是不須要徹底控制動畫效果，能夠不借助js，直接用css便可。或者直接用gif動圖就好。

css曲線運動

曲線運動，使用svg，canvas是很不錯的選擇。可是在對曲線的路徑不那麼嚴格要求的時候，使用svg和canvas或許略微麻煩了。能夠直接用css來實現一個『看起來是曲線』的運動。以相似拋物線的一個運動爲例，大概是一個這樣的效果：

位移曲線上某點的切線就是速度，而速度能夠分解成x軸的速度和y軸的速度。也就是說，上面的運動能夠分解成水平方向x軸的運動和豎直方向y軸的運動。從感官上，不難看出，x軸的運動大概是勻速的，而y軸的運動是愈來愈快的。

另外，因爲運動分解成了兩個方向的運動，須要兩個DOM，分別寫動畫，才能實現最終的效果。

--- html

<div class='x-container'>
	<div class='y-container'></div>
</div>

--- css

.x-container {
    width: 50px;
    height: 50px;
    animation: xMove 2s linear;
}
.y-container {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #000;
    animation: yMove 2s cubic-bezier(.98,.03,.91,.77);
}
@keyframes xMove {
    0% {
    }
    100% {
      transform: translateX(400px);
    }
}
@keyframes yMove {
    0% {
    }
    100% {
      transform: translateY(400px);
    }
}
複製代碼

兩個方向的運動合起來，就是上面的效果了。關於animation屬性中的運動曲線，能夠參考下面這個網站：

cubic-bezier.com/

想要實現一個不那麼嚴格的曲線運動，直接使用css animation，也是一個不錯的選擇。

寫在後面

本文總結了依賴css實現圖片幀動畫和曲線運動的實例。在合適的場景下，使用這兩種方法，或許可以達到不錯的效果。符合預期。

---