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

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

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

大學學過一個月畫畫，但沒有這方面天賦，連簡單卡通動畫也畫不好，于是在國外網站找來如下動畫，利用它來做例子，并把這次用 css3 實作動畫的原理分享給大家~

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

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

1.跑步動畫可以應用在不同的場景

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

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

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

3.跑步動畫效果流暢

不會出現卡頓現象

GIF實作跑步

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

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

分析下gif動畫

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

缺點：隻适合簡單的動畫效果，不能動态控制動畫

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

CSS3實作跑步

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

跑步動畫的實作

方式一：通過切換 7 張圖檔來實作

@-webkit-keyframes charector-1{
    0% {background-image: url(charector_1.png);}
    14.3% {background-image: url(charector_2.png);}
    28.6% {background-image: url(charector_3.png);}
    42.9% {background-image: url(charector_4.png);}
    57.2% {background-image: url(charector_5.png);}
    71.5% {background-image: url(charector_6.png);}
    85.8% {background-image: url(charector_7.png);}
    100% {background-image: url(charector_1.png);}
}

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

@-webkit-keyframes charector-1{
    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;}
}

分析這2種方式

方式一：

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

7 張圖檔總大小為：50k

方式二：

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

雪碧圖大小為：37k

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

HTML:

<div class="charector"></div>

CSS：

.charector{
position: absolute;
width: 180px;
height: 300px;
background: url(../img/charector.png) 0 0 no-repeat;
-webkit-animation-name: charector-1;/* 動畫名稱 */
-webkit-animation-iteration-count: infinite;/* 動畫無限播放 */
-webkit-animation-timing-function: step-start;/* 馬上跳到動畫每一結束桢的狀态 */
-webkit-animation-duration: 950ms;/* 動畫運作的時間 */
}
@-webkit-keyframes charector-1{
    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;}
}

demo，這裡下載下傳(請使用 webkit 核心的浏覽器打開)

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

加快跑步速度：可以通過快速切換背景圖檔位置，animation-duration 可以控制動畫運作的時間，那麼減少動畫的時間可以提升跑步的速度，通過在父級動态加載不同的功能 class 來運作不同的動畫，進而改變跑步速度

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

<div class="charector-wrap " id="js_wrap">
    <div class="charector"></div>
</div>

<a class="run-xfast" href="#none">最快</a>
<a class="run-fast" href="#none">快</a>
<a class="run-normal" href="#none">正常</a>
<a class="run-slow" href="#none">慢</a>
<button class="btn-paused">暫停</button>

CSS:

.charector{
position: absolute;
width: 180px;
height:300px;
background: url(../img/charector.png) 0 0 no-repeat;
-webkit-animation-iteration-count: infinite;/* 動畫無限播放 */
-webkit-animation-timing-function:step-start;/* 馬上跳到動畫每一結束桢的狀态 */
}
/* 跑步動畫名稱 */
@-webkit-keyframes person-xfast{/* 超快 */
    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;}
}
@-webkit-keyframes person-fast{/* 快 */
    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;}
}
@-webkit-keyframes person-normal{/* 正常 */
    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;}
}
@-webkit-keyframes person-slow{/* 慢 */
    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;}
}
/* 跑步動作頻率控制 */
.xfast .charector{/* 超快 */
-webkit-animation-name: person-xfast;
-webkit-animation-duration: 500ms;
}
.fast .charector{/* 快 */
-webkit-animation-name: person-fast;
-webkit-animation-duration: 650ms;
}
.normal .charector{/* 正常 */
-webkit-animation-name: person-normal;
-webkit-animation-duration: 800ms;
}
.slow .charector{/* 慢 */
-webkit-animation-name: person-slow;
-webkit-animation-duration: 950ms;
}

暫停跑步：使用 animation-play-state:paused 可以暫停正在進行的動畫，并停留到目前的動作，那麼當使用者停止操作時，給父級加上功能 class 來停止動畫

/* 暫停動畫 */
.paused .charector{
-webkit-animation-play-state:paused;
}

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

jQuery:

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

最後界面：

總結：

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

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

ok~ 跑步動畫到此結束~

作者：白樹

出處：http://peunzhang.cnblogs.com/

您覺得本文不錯，可打賞部落客，或點選右下角【好文要頂】支援部落客。

很多人在看的文章

《pageResponse - 讓H5适配移動裝置全家》

《移動web資源整理》

《移動web點5像素的秘密》

《移動web使用css3實作跑步》

《移動web頁面使用字型的思考》

《高清顯示屏原理及設計方案》

《css實作兩端對齊的3種方法》

我要贊個

我要評論

我要收藏

傳回頂部

跳到底部

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

GIF實作跑步

CSS3實作跑步

跑步動畫的實作

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

總結：

繼續閱讀

Flex布局及屬性

第六章層的濾鏡

深入CSS vertical-align屬性

給背景圖檔添加超連結

Flash動畫學習指南十二: 形狀補間

去除div的滾動條但是依然可以滾動的方法

modern-normalize vs normalize.css

彈性web UI的核心：媒體查詢

CSS3 ---奔跑的小人

【CSS3】設定超連結樣式超連結樣式

分享幾個常用的css網站前言一、CSS 參考網站二、CSS 參考網站三、CSS集合，自由調節動畫參數，生成代碼片段：五、通過做飯，練習 CSS 選擇器六、送小青蛙回家，學習 flex 布局總結

Common Questions Of Gtk+

HTML CSS 的滑鼠懸浮，點選的樣式當滑鼠懸浮時：a:hover當滑鼠點選連結時：a:active

談談css的僞類和僞元素

十大酷炫屌的圖像懸停特效

vue3 transitionvue3 transition元件和vue2 transition元件