CSS3動畫幀數科學計算法http://tid.tenpay.com/?p=5983

 總結都濃縮在這個工具裏了，想知道工具的地址或想窺探工具誕生的趣事請往下看 。
 

—————————————————————–     華麗麗的開篇     —————————————————————-

 

本篇文章來自騰訊內部飯卡充值改版項目的CSS3動畫經驗總結。雖然大家訪問不到咱們的飯卡站點，不過能夠小窺一下咱們的動畫示例喲。

（請使用chrome、safari或firefox瀏覽器看效果，效果地址）

實現上面「嘀卡萌風騷亂舞」的動畫，比較麻煩的是，要憑感受本身算參數寫代碼，重複試個千百回，才能達到最終滿意的效果。

好比這個動畫：

我曾經，這麼幹過

還這麼幹過

step1, 動做1在0%上，動做停留20幀

@keyframes anim-name{   0%, 20%{ /* 動做1 */ }  ... }

step2,  動做之間過渡5幀，動做1結束幀在20%，20+5=25, 動做2在25%幀，動做停留20幀

@keyframes anim-name{   0%, 20%{ /* 動做1 */ }  25%, 45%{ /* 動做2 */ }  ... }

……

通過一番計算後

@keyframes anim-name{   0%, 20%{ /* 動做1 */ }  25%, 45%{ /* 動做2 */ }  50%, 70%{ /* 動做3 */ }  75%, 95%{ /* 動做4 */ }  100%, 120%{ /* 動做5 */ } }

艾瑪，幀數超出100%了>_<

從新計算了一番，動做數5，動做過渡幀數5%，動做停留幀數16%

@-webkit-keyframes anim-name{     0%, 16%{  /* 動做1 */  }     21%, 37%{  /* 動做2 */  }     42%, 58%{  /* 動做3 */  }     63%, 79%{  /* 動做4 */  }     84%, 100%{  /* 動做5 */  } }

感謝人民感謝黨，最後一幀加起來恰好100%

刷新頁面看效果以後……（動做過渡有點快，動做停留有點長）

效果不對，重算!

效果不對，重算!

……

就這樣被折騰地體無完膚，深入感悟咱們是用生命在作動畫，啊…..多麼痛的領悟悟悟~~（有共鳴的，請默默的點個贊，謝謝）

因此，咱們今天來探討如何更科學的計算幀數?

文章主要研究循環動畫，各個動做之間的過渡有規律性。

 

好比嘀卡萌跳舞動畫

 走路動畫

還有跑步動畫

（該動畫的實現，可 查看 白樹同窗的分享）

動做過渡有規律性，從代碼層面也可理解爲各動做之間的過渡幀數是同樣的。

如上面白樹同窗實現的跑步動畫，各動做之間的過渡幀約14.3幀，代碼爲

@keyframes anim-name{     0% {background-position: 0 0;}     14.3% {background-position: -180px 0;}     28.6% {background-position: -360px 0;}     42.9% {background-position: -540px 0;}     57.2% {background-position: -720px 0;}     71.5% {background-position: -900px 0;}     85.8% {background-position: -1080px 0;}     100% {background-position: 0 0;} }

好，下面讓咱們愉快的進入主題吧

循環動畫按循環方式能夠分爲：

用CSS代碼的方式表示，就是：

單向循環：  animation-iteration-count: infinite; animation-direction: normal;

雙向循環：  animation-iteration-count: infinite; animation-direction: alternate;

 

先看看作一個動畫須要哪些條件

總幀數：100 （已知參數）

CSS3幀動畫的幀數設置是從0%~100%，數值能夠帶小數位，0%能夠用from關鍵詞替代，100%能夠用to關鍵詞替代

動做數：n （已知參數）

動畫中的幾個關鍵動做

動做停留幀數：x （未知參數）

在當前動做停留的幀數

動做過渡幀數：y （未知參數）

上一個動做過渡到下一個動做須要用的幀數

咱們用示例來講明它們之間的關係。

 

單向循環動畫

示例要求：實現一個3個動做的單向循環動畫

爲了方便理解，以線段圖示法來展現

Step1，滿幀100%

0%　　　　　　　　　　　　　　　　　　　　　　　　　　　100%

└─────────────────────────────────────────┘

Step2，添加動做節點(總節點數 = 動做數)

0%　　　　　　　　　　　　　？%　　　　　　　　　　　　100%

過渡y幀　　　　　　　　　　　過渡y幀

└────────────────────┴────────────────────┘

動做1　　　　　　　　　　　　動做2　　　　　　　　　　　　動做3

這個時候，咱們很輕易的算出動做2的keyframes幀數是50%

實際上，不少時候咱們須要讓每一個動做停頓一會，而不會閃動太快。如「嘀卡萌風騷亂舞」的動畫，每一個動做都須要定格一會，這個時候咱們須要給每一個動做分配一些停留幀數。

Step3，添加停留幀 (總節點數 = 動做數 * 2)

0%　　　　?%　　　　　?%　　　　　?%　　　　 ?%　　　　100%

停留x幀　　過渡y幀　　　停留x幀　　過渡y幀　　　停留x幀

└───────┴────────┴────────┴───────┴───────┘

動做1　　　 　　　　　　動做2　　　　　　　　　　動做3

這下就複雜了，不過咱們仔細分析，會發現它們之間有必定的規律。

3x + 2y = 100

動做個數 = 3       停留幀個數 = 3      過渡幀個數 = 2

設動做個數爲n，則

動做個數 = n       停留幀個數 = n      過渡幀個數 = n-1

而後，咱們能夠得出一個公式

nx + (n-1)y = 100

接下來咱們能夠有規則性的嘗試動畫參數了，咱們嘗試讓每一個動做停留20幀，經過公式求得動做過渡幀數y也等於20，因而得出咱們的幀數代碼

.demo{animation:anim-name 1s infinite;}  /* 單向循環 */  @keyframes anim-name{     0%, 20%{  /* 動做1 */  }     40%, 60%{  /* 動做2 */  }     80%, 100%{  /* 動做3 */  } }

有了公式，咱們就不用瞎嘗試啦，能夠少死點腦細胞了

 

雙向循環動畫

示例要求：實現一個3個動做的雙向循環動畫

複製上面的動畫代碼，加個 animation-direction: alternate; 屬性不就行了？

(哦，不對，按照心理學反推論，若是這麼簡單，做者有必要另起篇幅嗎？確定有陰謀！)

不用猜了，我就是有陰謀！

繼續線段圖示，當咱們加入 animation-direction: alternate; 屬性以後的效果是

問題：首尾動做從第二遍播放開始會重複停留時間！

這個並非咱們指望看到的效果，不過解決方法也很簡單

經過線段圖分析

2x + 2y = 100

動做個數 = 3       停留幀個數 = 2         過渡幀個數 = 2

設動做個數爲n，則

動做個數 = n       停留幀個數 = n-1     過渡幀個數 = n-1

而後，咱們能夠得出一個公式

(n-1)(x+y) = 100

接下來咱們仍是嘗試讓每一個動做停留20幀，經過公式求得動做過渡幀數y等於30，因而得出咱們的幀數代碼

.demo{animation:anim-name 1s infinite alternate;} /* 雙向循環 */  @keyframes anim-name{     0%, 10%{  /* 動做1 */  }     40%, 60%{  /* 動做2 */  }     90%, 100%{  /* 動做3 */  } }

注意：雙向循環動畫，首尾動做停留幀要各減一半，示例的首尾動做停留幀爲10 (20/2=10)

細心的同窗會發現，其實這裏還有點小瑕疵，那就是

問題：第一次播放的第一個動做只停了一半時間！

有時咱們作動做銜接，必定要全部動做時間都保持一致。解決辦法也不是沒有，能夠給動畫加個延遲時間 animation-delay 屬性，時長等於動做停留時間的一半，如何計算時長後面會講到。

除了加延時解決這個問題以外，還有一個僞方法，請繼續往下看

 

模擬雙向循環動畫

示例要求：實現一個3個動做的雙向循環動畫

模擬雙向循環動畫就是不使用 animation-direction: alternate; 屬性實現雙向循環的效果。

有點繞，上線段圖

經過線段圖分析

4x + 4y = 100

動做個數 = 5       停留幀個數 = 4         過渡幀個數 = 4

設動做個數爲n，則

動做個數 = n       停留幀個數 = n-1     過渡幀個數 = n-1

而後，咱們能夠得出一個公式

(n-1)(x+y) = 100

但動做個數5包含了重複動做，不符合咱們的計算習慣，不包含重複動做個數3才符合咱們的計算習慣。那麼設

（不含重複）動做個數爲 m

（含重複）動做個數爲 n，則 n = 2m-1，將 2m-1 帶入上面的公式得出公式

(2m-1-1)(x+y) = 100

將m統一換成n表示，再簡化公式後獲得最終公式

(2n-2)(x+y) = 100

接下來咱們再次嘗試讓每一個動做停留20幀，經過公式求得動做過渡幀數y等於5，因而得出咱們的幀數代碼

.demo{animation:anim-name 1s infinite;} /* 模擬雙向循環 */  @-webkit-keyframes anim-name{     0%{  /* 動做1 */  }     20%{  /* 動做1 */  }     25%{  /* 動做2 */  }     45%{  /* 動做2 */  }     50%{  /* 動做3 */  }     70%{  /* 動做3 */  }     75%{  /* 動做2 */  }     95%{  /* 動做2 */  }     100%{  /* 動做1 */  } }

縮寫版代碼

.demo{animation:anim-name 1s infinite;} /* 模擬雙向循環 */  @keyframes anim-name{     0%, 20%, 100%{  /* 動做1 */  }     25%, 45%, 75%, 95%{  /* 動做2 */  }     50%, 70%{  /* 動做3 */  } }

模擬雙向循環的方法可讓全部動做的停留時間都保持一致，缺點就是代碼比較多，幀數也算得麻煩，不過也不失爲一種解決方法。通常狀況下，仍是建議你們使用雙向循環+延遲播放的方案。

提到延遲播放，跟時間有關係，這個延遲時長該怎麼定？若是以上方案，每一個動做咱們要固定它的過渡時間，好比動做之間過渡0.4秒，那過渡幀數又該怎麼定？接下來咱們再挖掘一下，幀數如何跟時間結合。

 

時間模式計算幀數

咱們在作動畫的時候須要設置一個 animation-duration 動畫持續時間的屬性，知道持續播放時間咱們就能夠很輕易的計算出播放速度，還記得咱們小學學的速度公式嗎？

設，總幀數爲s(100幀)，播放時間爲t，播放速度爲v，得出公式

v = s / t

繼續用示例來加深理解。

示例要求：實現一個3個動做的單向循環動畫，播放時間2秒，每一個動做的過渡時間爲0.4秒

經過播放速度公式，咱們能夠計算出過渡幀數。

播放速度：  100幀 / 2秒 = 50幀/秒
過渡幀數：  50幀/秒 * 0.4秒 = 20幀

得出過渡幀數，接下來套用單向循環動畫的幀數公式，計算出停留幀數，參考上面總結的公式  nx + (n-1)y = 100  ，推導公式得出停留幀數 x = (100-(n-1)y) / n

動做個數(n)：  3

過渡幀數(y)： 20
停留幀數：  (100-(3-1)*20)/3 = 20幀

因而得出咱們的幀數代碼

.demo{animation:anim-name 2s infinite;}  /* 單向循環 */  @keyframes anim-name{     0%, 20%{  /* 動做1 */  }     40%, 60%{  /* 動做2 */  }     80%, 100%{  /* 動做3 */  } }

 

這麼多公式，眼都花了更別說記了。彆着急，公式是給機器記的，這種破事就交給咱們的機器去算。下面是一個簡易的CSS3動畫幀數計算器，能夠幫咱們省去一些計算的煩惱。

CSS3動畫幀數計算器：http://tid.tenpay.com/labs/css3_keyframes_calculator.html

以白樹同窗的跑步動畫爲示例

動畫是單向循環，有7個關鍵動做，動做須要使用逐幀過渡效果 animation-timing-function:step-start 實現，因此動做個數須要額外加1，即有8個動做。使用 step-start 後會自動平分動做停留時間，因此keyframes咱們就不用加動做停留幀數了。

打開工具頁面，選擇 [單向循環動畫] -> [不停頓] -> [動做個數8] -> [生成代碼]

最後……就沒有最後了，歡迎你們一塊兒交流探討。

原文地址：http://tid.tenpay.com/?p=5983