【原】移動web動畫設計的一點心得——css3實現跑步

今年3月份，由於公司業務需要，我轉崗到產品部，離開了TID團隊，人都是有感情的動物，更何況在一個團隊呆了快 3 年，心中十分捨不得，鬼哥說了“天下沒有不散的宴席...”，在我的世界裡又多了一次離別的傷感。加入了產品中心後，開始新的團隊生活，工作比以前忙多了，有時周六也要上班，需要更快更高效的完成任務，除了重構頁面，需要主動參與邊緣外的工作，承擔更多。最近比較忙，給自己敲個響鐘：注意身體。

說完題外話，開始近期的主題動畫設計。雖然css3動畫基礎知識學習過，但以前項目使用情境比較少，並沒有太多的實踐，加入新團隊以來，做得幾個項目與動畫有關，嘗試用css3來實現，過程中遇到了不少坑。

~

來自 dribbble 某位大師的作品，GIF圖中一個小女孩抱著一隻貓在跑步，非常可愛，動作輕巧，過渡自然。

回到項目需求，要實作類別似卡通人物跑步動畫，分析結果如下：

1.跑步動畫可以應用在不同的情境

要求人物的背景是透明的；人物圖片邊緣保證高清，避免雜邊。

2.跑步動畫運動速度與動作成正比關係

人物跑步速度越快，身體動作越快；人物跑步速度為零時，身體動作馬上停止在當前的狀態。

3.跑步動畫效果流暢

不會出現卡頓現象

GIF實現跑步

用PS開啟該大師的 GIF 圖，在時間軸視窗中有 24 張不同的圖片，通過一幀一幀的播放來實現跑步動畫，很簡單得說明做一個精細的動畫需要多費點心思和勞動力啊，向大師表示敬禮~

 

項目組要求的動畫跟人物大小差不多，一開始跟互動和視覺的同事討論時，嘗試使用 gif 來實現動畫，使用7張圖片輪播，間隔 0.2 秒可滿足的動畫效果，簡單實現如下：

分析下gif動畫

好處：實現簡單、可維護性高、工作成本低

缺點：只適合簡單的動畫效果，不能動態控制動畫

那麼項目的硬性要求(控制動畫的暫停、速度等)讓我放棄了對gif實現跑步的想法~

CSS3實現跑步

放棄了 gif，而 swf 也不是我們的選擇，canvas 實現也是可以的，這裡不做介紹，本次主題是 css3 動畫~

跑步動畫的實現

方式一：通過切換 7 張圖片來實現

{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}

方式二：7 張圖片合成 1 張，通過切換背景圖片位置來實現

{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}

方式一：

實現起來會比較簡單，但帶來額外的 7 個請求數

7 張圖片總大小為：50k

方式二：

需要設計雪碧圖，並量取背景位置，請求數少

雪碧圖大小為：37k

可以看出多張圖片合成的雪碧圖比 7 張圖片還少 13k 外，還可以減少 7 個HTTP請求，那麼切換背景位置方式是比較好的，代碼如下：

HTML:

{:;:;:;:;:;:;:;:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}

這裡下載

加快跑步速度、暫停跑步的實現

加快跑步速度：可以通過快速切換背景圖片位置，animation-duration 可以控制動畫啟動並執行時間，那麼減少動畫的時間可以提升跑步的速度，通過在

詳細內容請看代碼，留意注釋

HTML:

    最快快正常慢暫停

{:;:;:;:;:;:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;}{:;:;}{:;:;}{:;:;}{:;:;}

給父級加上功能 class 來停止動畫

{:;}

最後再通過 js 控制不同的跑步速度。

jQuery:

$(document).ready("a").on("click","#js_wrap").find(".charector-wrap").removeClass("paused""#js_wrap").attr("class","charector-wrap " + $(e.target).attr("class").split("-")[1".btn-paused").click("#js_wrap").addClass("paused"

最後介面：

demo，這裡下載

總結：

animation 適合相對簡單的動畫，使用起來比較靈活，如支援切換不同的動畫名、暫訂動畫等

animation-timing-function 的 step-start 屬性等不完全支援 android 2.1~4.3 、ios4.3 系統

 

ok~ 跑步動畫到此結束，下期來個拆信封的動畫，敬請期待~