定格動畫

定格動畫

用你的滑鼠摸他，他就不可能不動！ ！

 

這就是定格動畫，只播放關鍵影格。就像以前的老電影一樣，只有一張張底片，然後燈光打在底片上，移動底片，動畫的感覺就會跑出來。

別問我排版為什麼這麼醜

其中用到的關鍵字是steps()和精靈

例如：

<span style="color: #800000;">element{<br>　　background: url() no-repeat; //the-source-of-picture<br>　　animation: spirit-animation 4s steps(9);<br>}<br>@keyframes{<br>　　from{<br>　　　　background-position: ;//the-start-of-picture<br>　　}<br>　　to{<br>　　　　background-position: ;//the-end-of-picture<br>　　}<br>}</span>

這個動畫會在4秒種播放第一個關鍵影格和後面的9個關鍵影格。

下面說一下關鍵影格。當你在玩LOL(league of legends)的時候，你電腦顯示卡配置又脫離了年代，你可能會抱怨說，他媽的在放幻燈片。這張張的幻燈片就是關鍵影格了。當一定的時間內數量夠大的時候，你就感覺不出是在放幻燈片(人眼中光停留的時間是xx秒，當下一個光在上一束停留時進入眼中，你就不會感覺到卡頓)。

我們平常用的animation預設是補間動畫。

那問題來了，什麼​​又是補間動畫。這就得抱怨下取名詞的專家了，一大堆簡寫的名詞，完全摳不動。

補間動畫，英文tween animation、shape animation，上一個畫面平滑過渡到下一個畫面，在其間我可以截任意時刻的畫面。關鍵影格就辦不到了，他只有設定的那麼多畫面。

那麼精靈呢？

一個物件一組動作的集合。

that`s all.