今年3月份，由于公司業(yè)務(wù)需要，我轉(zhuǎn)崗到微信產(chǎn)品部，離開(kāi)了TID團(tuán)隊(duì)，人都是有感情的動(dòng)物，更何況在一個(gè)團(tuán)隊(duì)呆了快 3 年，心中十分舍不得，鬼哥說(shuō)了“天下沒(méi)有不散的宴席...”，在我的世界里又多了一次離別的傷感(雖然還在隔壁工作)。加入了微信產(chǎn)品中心后，開(kāi)始新的團(tuán)隊(duì)生活，工作比以前忙多了，有時(shí)周六也要上班，需要更快更高效的完成任務(wù)，除了重構(gòu)頁(yè)面，需要主動(dòng)參與邊緣外的工作，承擔(dān)更多。最近比較忙，給自己敲個(gè)響鐘：注意身體。

說(shuō)完題外話，開(kāi)始近期的主題動(dòng)畫(huà)設(shè)計(jì)。雖然css3動(dòng)畫(huà)基礎(chǔ)知識(shí)學(xué)習(xí)過(guò)，但以前項(xiàng)目使用場(chǎng)景比較少，并沒(méi)有太多的實(shí)踐，加入新團(tuán)隊(duì)以來(lái)，做得幾個(gè)項(xiàng)目與動(dòng)畫(huà)有關(guān)，嘗試用css3來(lái)實(shí)現(xiàn)，過(guò)程中遇到了不少坑。

大學(xué)學(xué)過(guò)一個(gè)月畫(huà)畫(huà)，但沒(méi)有這方面天賦，連簡(jiǎn)單卡通動(dòng)畫(huà)也畫(huà)不好，于是在國(guó)外網(wǎng)站找來(lái)如下動(dòng)畫(huà)，利用它來(lái)做例子，并把這次用 css3 實(shí)現(xiàn)動(dòng)畫(huà)的原理分享給大家~

來(lái)自 dribbble 某位大師的作品，GIF圖中一個(gè)小女孩抱著一只貓?jiān)谂懿?#xff0c;非常可愛(ài)，動(dòng)作輕巧，過(guò)渡自然。

回到項(xiàng)目需求，要實(shí)現(xiàn)類(lèi)似上圖卡通人物跑步動(dòng)畫(huà)，分析結(jié)果如下：

1.跑步動(dòng)畫(huà)可以應(yīng)用在不同的場(chǎng)景

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

2.跑步動(dòng)畫(huà)運(yùn)動(dòng)速度與動(dòng)作成正比關(guān)系

人物跑步速度越快，身體動(dòng)作越快；人物跑步速度為零時(shí)，身體動(dòng)作馬上停止在當(dāng)前的狀態(tài)

3.跑步動(dòng)畫(huà)效果流暢

不會(huì)出現(xiàn)卡頓現(xiàn)象

GIF實(shí)現(xiàn)跑步

用PS打開(kāi)該大師的 GIF 圖，在時(shí)間軸窗口中有 24 張不同的圖片，通過(guò)一幀一幀的播放來(lái)實(shí)現(xiàn)跑步動(dòng)畫(huà)，很簡(jiǎn)單得說(shuō)明做一個(gè)精細(xì)的動(dòng)畫(huà)需要多費(fèi)點(diǎn)心思和勞動(dòng)力啊，向大師表示敬禮~

?

項(xiàng)目組要求的動(dòng)畫(huà)跟上圖人物大小差不多，一開(kāi)始跟交互和視覺(jué)的同事討論時(shí)，嘗試使用 gif 來(lái)實(shí)現(xiàn)動(dòng)畫(huà)，使用7張圖片輪播，間隔 0.2 秒可滿足的動(dòng)畫(huà)效果，簡(jiǎn)單實(shí)現(xiàn)如下：

分析下gif動(dòng)畫(huà)

好處：實(shí)現(xiàn)簡(jiǎn)單、可維護(hù)性高、工作成本低

缺點(diǎn)：只適合簡(jiǎn)單的動(dòng)畫(huà)效果，不能動(dòng)態(tài)控制動(dòng)畫(huà)

那么項(xiàng)目的硬性要求(控制動(dòng)畫(huà)的暫停、速度等)讓我放棄了對(duì)gif實(shí)現(xiàn)跑步的想法~

CSS3實(shí)現(xiàn)跑步

放棄了 gif，而 swf 也不是我們的選擇，canvas 實(shí)現(xiàn)也是可以的，這里不做介紹，本次主題是 css3 動(dòng)畫(huà)~

跑步動(dòng)畫(huà)的實(shí)現(xiàn)

方式一：通過(guò)切換 7 張圖片來(lái)實(shí)現(xiàn)

@-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 張，通過(guò)切換背景圖片位置來(lái)實(shí)現(xiàn)

@-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種方式

方式一：

實(shí)現(xiàn)起來(lái)會(huì)比較簡(jiǎn)單，但帶來(lái)額外的 7 個(gè)請(qǐng)求數(shù)

7 張圖片總大小為：50k

方式二：

需要設(shè)計(jì)雪碧圖，并量取背景位置，請(qǐng)求數(shù)少

雪碧圖大小為：37k

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

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;/* 動(dòng)畫(huà)名稱(chēng) */ -webkit-animation-iteration-count: infinite;/* 動(dòng)畫(huà)無(wú)限播放 */ -webkit-animation-timing-function: step-start;/* 馬上跳到動(dòng)畫(huà)每一結(jié)束楨的狀態(tài) */ -webkit-animation-duration: 950ms;/* 動(dòng)畫(huà)運(yùn)行的時(shí)間 */ } @-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，這里下載(請(qǐng)使用 webkit 內(nèi)核的瀏覽器打開(kāi))

加快跑步速度、暫停跑步的實(shí)現(xiàn)

加快跑步速度：可以通過(guò)快速切換背景圖片位置，animation-duration 可以控制動(dòng)畫(huà)運(yùn)行的時(shí)間，那么減少動(dòng)畫(huà)的時(shí)間可以提升跑步的速度，通過(guò)在父級(jí)動(dòng)態(tài)加載不同的功能 class 來(lái)運(yùn)行不同的動(dòng)畫(huà)，從而改變跑步速度

詳細(xì)內(nèi)容請(qǐng)看代碼，留意注釋

HTML:

<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;/* 動(dòng)畫(huà)無(wú)限播放 */ -webkit-animation-timing-function:step-start;/* 馬上跳到動(dòng)畫(huà)每一結(jié)束楨的狀態(tài) */ } /* 跑步動(dòng)畫(huà)名稱(chēng) */ @-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;} } /* 跑步動(dòng)作頻率控制 */ .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 可以暫停正在進(jìn)行的動(dòng)畫(huà)，并停留到當(dāng)前的動(dòng)作，那么當(dāng)用戶(hù)停止操作時(shí)，給父級(jí)加上功能 class 來(lái)停止動(dòng)畫(huà)

CSS:

/* 暫停動(dòng)畫(huà) */ .paused .charector{ -webkit-animation-play-state:paused; }

最后再通過(guò) 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");})})

最后界面：

demo，這里下載(請(qǐng)使用 webkit 內(nèi)核的瀏覽器打開(kāi))

總結(jié)：

animation?適合相對(duì)簡(jiǎn)單的動(dòng)畫(huà)，使用起來(lái)比較靈活，如支持切換不同的動(dòng)畫(huà)名、暫定動(dòng)畫(huà)等

animation-timing-function 的 step-start?屬性等不完全支持 android 2.1~4.3 、ios 4.3 系統(tǒng)

?

ok~ 跑步動(dòng)畫(huà)到此結(jié)束~

?

轉(zhuǎn)載于:https://www.cnblogs.com/PeunZhang/p/3685980.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的【原】移动web动画设计的一点心得——css3实现跑步的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。