摘要：通過剖析一個跑男動畫實例，來把中動畫相關的知識點抽絲剝繭，一網打盡。跑男的動畫其實可以拆分為兩個一個是交替擺腿另一個是位置移動。在使用改變雪碧圖時，得到效果這樣的平滑過度顯然不是我們想要的。所以，在切換雪碧圖背景的方案下，就要派上用場了。

作為一名真正的前端開發者，我們不能只關注前端邏輯部分。畢竟“水銀泄地”般的頁面設計和“炫酷逼真”的動畫效果，是我們區別于其他程序員所特有的優勢之一。

盡量百分之百的還原視覺稿，為UE設計靈感和用戶視覺享受架起一座橋梁：正所謂“晉帝時祭北郊，更祝版，工人削之，筆入木三分。”
借古書法形容我們的代碼，當真是恰當準確又自戀無比。

之前的一些文章大多都是分享JS相關內容。今天輕松一下，我來談談前端頁面的動畫部分。通過剖析一個“跑男”動畫實例，來把CSS3中動畫相關的知識點抽絲剝繭，一網打盡。如果讀者有自己的感想或者不一樣的見解，歡迎一起討論。

整個項目的Github地址可以參考這里。對比線上效果，這個倉庫進行了90%的刪減，但是更加適合練手和理解。感興趣的讀者歡迎拉下來自己玩一玩。里面只有一關動畫，您可以比葫蘆畫瓢進行調試練習。

這是一個運營活動頁面——"春季馬拉松大比拼"：用戶以闖關形式參加，并進行角色扮演。在滿足一定條件下，自己扮演的馬拉松選手會繞著跑道（非正規跑道形狀）前進，向終點發起沖擊。

部分頁面動畫效果如下：

當然，這個動畫并不完美。考慮到時間性價比，我只用了兩幀重復循環模擬擺腿動作。但也達到了運營和產品小妹的需求。如果在沒有上線壓力的情況下，我們完全可以拆分更多幀，把他打磨的更流暢順滑。

首先，我們來看一下它的具體實現方式吧。

這一系列的動畫設計，出于性能和簡單的考慮，我采用了純CSS3來實現。CSS3實現動畫，主要有兩種方式：transition屬性和animation屬性。
前者是用來“平滑的改變CSS的值”。一般對于需要特定幀處理的動畫，顯然是蒼白無力的，這里就不過多介紹了。重點介紹一下animation屬性。

animation屬性其實是一個簡寫屬性，就像我們更加熟悉的“background”一樣。它用于設置六個動畫屬性：

1）animation-name
2）animation-duration
3）animation-timing-function
4）animation-delay
5）animation-iteration-count
6）animation-direction

最重要的就是animation-name，它規定了需要綁定的keyframes名稱。keyframes，我們用來定義幾個關鍵節點幀。

具體我不會進行科普。如果初學者不了解，社區上關于這些的資料可是一大把。

回到具體的業務場景，我們進行分析。跑男的動畫其實可以拆分為兩個：
1）一個是交替擺腿；
2）另一個是位置移動。
這兩個動作要嚴絲合縫的結合。能把這個想清楚，那就基本思路理解了。

接著，如何讓這兩種動畫一起施加在“靜止的”跑男身上呢？

我采用了增加一個div標簽，作為父節點包裹的方式：

"man-wrapper"這個div與"man"這個div尺寸大小完全一致，視覺上絕對重合。父節點處理位移，子節點負責交替擺腿：

.man-wrapper {
    display: inline-block;
    width: 46px;
    height: 75px;
    position: absolute;
}
.man {
    display: inline-block;
    width: 46px;
    height: 75px;
    background: url(img/sprite.png);
    position: absolute;
    top: 0;
    left: 0;
}

當需要觸發位移，開啟跑步狀態時，父節點添"start-run"類：

$(".man-wrapper").addClass("start-run");

同時，子節點添加"running"類：

$("#man").addClass("running");

關于“start-run”位移的動畫設計，在跑道上直道部分相對簡單，我們思路是使用transform：translate3d。
但是視覺稿上存在不少于5處不規則彎道，在不改變原圖的基礎上，以及在不增加多余圖片的原則下，我們可以使用transform：rotate3d，使跑男進行側身。具體設計看下圖：

1）1-2和4-5，只需要改變transform：translate3d；
2）2-4部分，即2，3，4這三個階段是為了彎道準備的。當然，如果時間充足，我們完全可以拆分的更加細致，更加細分。
3）其中3是彎道中心的45度轉身：rotate3d(0,0,1,45deg);
4）其中4是已經完全轉身：rotate3d(0,0,1,90deg);

具體代碼：

.start-run {
    animation: start-run 5000ms; 
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
@keyframes start-run {
    0% {
        transform: translate3d(0, 0, 0);
    }
    35% {
        transform: translate3d(0, 155px, 0) rotate3d(0, 0, 1, 0deg);
    }
    50% {
        transform: translate3d(20px, 224px, 0) rotate3d(0, 0, 1, -45deg);
    }
    70% {
        transform: translate3d(80px, 242px, 0) rotate3d(0, 0, 1, -90deg);
    }
    100% {
        transform: translate3d(200px, 243px, 0) rotate3d(0, 0, 1, -90deg);
    }
}

為什么是35%，50%，70%呢？這個是我調試出來，相對能達到順暢效果。如果追求更嚴謹的話，完全可以列一個極坐標計算一下位移和時間。當然這樣子成本會比較大。

還有一點值得一提的是animation-timing-function: linear; 一般馬拉松中段，都近似于勻速跑吧～

解決完了位移的問題，我們來看擺腿動作。這個其實就是兩張圖片在交替播放。就是gif圖原理。我使用了改變background-position，來切換精靈圖片的方式處理：

.running {
    animation: running-man 1200ms steps(2) infinite;
}
@keyframes running-man {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 92px 0;
    }
}

千萬不要掃一眼代碼完事兒，這里還有一些最重要的細節要注意。首先是“infinite”的使用，這個應該沒什么意外吧。另外，你可曾注意了steps這個函數?

我們知道animation定義的關鍵幀之間是“平滑過渡”的。這個平滑過渡怎么理解呢？我做了一個“反例”示圖來說明。
在使用keyframes改變雪碧圖background-position時，得到效果：

這樣的"平滑過度"顯然不是我們想要的。

所以，在切換雪碧圖背景的方案下，steps()就要派上用場了。順便說一句，最近面試一些人，提到熟悉CSS3動畫，但是大部分都還不知道這個steps階躍函數。如果你還不清楚，可以參考這里。

借助steps()函數，我們實現了交替跑動的分解動畫：

做到這里，其實還沒有完全結束。有一些值得我們思考的問題。

1）真的有必要多一個標簽，來相互結合生成動畫嗎？
其實不是的，animation很神奇很強大的一點在于：它可以接受多個動畫屬性序列。比如上邊那種情況我們完全可以這樣實現：

.running {
    animation: start-run 5000ms forwards linear, running-man 1200ms steps(2) infinite
}

2) 如果刻意追求更佳完美的動畫，我們還需要哪些儲備？
不得不要說數學和物理知識了。比如，二次方曲線、三次方曲線、一直到五次方曲線，正弦余弦、圓弧、拋物線、反彈曲線、彈簧曲線等等。如果你對研究這些有興趣，這里安利一些：高性能動畫實現以及可視化1，可視化2。

除了數學公式以外，也需要我們掌握樣式預處理器函數使用。畢竟，那么多幀我們不可能自己手動實現。

流暢高效的動畫，絕非一朝一夕就能完成，需要各方面甚至跨領域的積累。如果你對此很感興趣，歡迎討論。

最后，這篇文章中截圖部分采用了我廠UE：許冬設計師的視覺稿，和PM：田小甜大小姐的交互設計。

PS：百度知識搜索部大前端繼續招兵買馬，有意向者火速聯系。。。