首頁電商視覺設(shè)計(jì)技術(shù)文章正文

UI培訓(xùn)之用animation制作小動(dòng)畫

更新時(shí)間:2016年03月14日17時(shí)40分來源:傳智播客UI培訓(xùn)學(xué)院瀏覽次數(shù):

今天，我們學(xué)習(xí)一個(gè)動(dòng)畫制作，注意，不是flash，也不是用AE等這些動(dòng)畫軟件喲??！而是強(qiáng)大的css3里面的animation喲。

讀者：不就是讓一個(gè)東西從一個(gè)地方到另外一個(gè)地方，很簡單么。

小編：答對(duì)了一半。在位置的改變過程中我們還可以讓這個(gè)元素自身同時(shí)做動(dòng)畫。這聽起來有點(diǎn)拗口，什么意思呢，直接上效果看

因?yàn)槭莿?dòng)畫，所以有多個(gè)圖才能有效果：

簡而言之，就是這只小鳥在從左往右走的時(shí)候還能煽動(dòng)翅膀，是不是很有玩呢，而真正的代碼只有20行就夠了，并且還是css代碼！

可以animation的用法對(duì)于我們來說基本都已經(jīng)沒什么太大的問題，如果animation還不知道童鞋可以去W3C上看一下，很簡單?。≡谶@里我就簡單的說一下

我們知道animation分為兩個(gè)部分，一個(gè)是設(shè)置動(dòng)畫部分，一個(gè)是自定義動(dòng)畫部分

設(shè)置的部分的語法為：animation ：自定義動(dòng)畫名動(dòng)畫所需時(shí)間動(dòng)畫運(yùn)動(dòng)曲線，動(dòng)畫何時(shí)開始動(dòng)畫是否逆序播放動(dòng)畫運(yùn)動(dòng)的次數(shù) 動(dòng)畫是否運(yùn)行動(dòng)畫運(yùn)行后的狀態(tài)

例如：animation: donghua 1s linear 0s normal 1 running Both;

一共有八個(gè)參數(shù)，具體根據(jù)你的需求有選擇性的用參數(shù)，當(dāng)然，你全部寫上也沒有任何問題，只是我們?cè)诠ぷ髦幸话愣际呛唽?/div>

自定義動(dòng)畫部分 @keyframes 自定義動(dòng)畫名{

0%{

// 這里書寫css樣式

}

100%{

// 這里書寫css樣式

}

百分比可以自己去調(diào)節(jié)，你也可以在加上50%，看你自己的需求，想要了解更詳細(xì)的同學(xué)可以去W3C自主學(xué)習(xí)一下，我相信半個(gè)小時(shí)就能搞定它！

好了，言歸正傳，在我們?cè)O(shè)置動(dòng)畫里面有一個(gè)動(dòng)畫運(yùn)動(dòng)曲線，在W3C的網(wǎng)站上只有l(wèi)inear，ease等等這種讓動(dòng)畫看上更加有緩動(dòng)性的取值。但是它的取值還可以是steps(); 意思就是說讓動(dòng)畫以幀動(dòng)畫的形式播放，簡單點(diǎn)說就是這個(gè)動(dòng)畫分成多少步去執(zhí)行！映射到我們這個(gè)案例里面的就是拍翅膀這個(gè)過程有多少幀（有多少步）。

在這里，我們需要運(yùn)用到一張圖

我們利用這一張圖完成小鳥拍翅膀的過程，這是一張精靈圖，我們只需要?jiǎng)討B(tài)改變background-position的值就能實(shí)現(xiàn)圖片切換咯。直接上代碼：

這樣，我們就能實(shí)現(xiàn)了小鳥不停的在原地煽動(dòng)翅膀了，其實(shí)原理就是這個(gè)圖片的bacnground-position的值不斷在發(fā)生變化，并且速度很快，呈現(xiàn)給我們的視覺效果就是這樣小鳥在不停的扇動(dòng)翅膀了。

那么我們?nèi)绾巫屗吷縿?dòng)翅膀邊往前走呢，很簡單，我們只需要在加上一組從左往右運(yùn)動(dòng)的動(dòng)畫就夠了。

就是這么簡單，是不是心動(dòng)了呢，趕緊自己去制作一下吧（友情提示：相關(guān)的素材直接百度幀動(dòng)畫素材就有很多喲）

本文版權(quán)歸傳智播客UI培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！
作者：傳智播客UI培訓(xùn)學(xué)院
首發(fā)：