教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

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

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

今天，我們學(xué)習(xí)一個動畫制作，注意，不是flash，也不是用AE等這些動畫軟件喲！！而是強大的css3里面的animation喲。
讀者：不就是讓一個東西從一個地方到另外一個地方，很簡單么。
小編：答對了一半。在位置的改變過程中我們還可以讓這個元素自身同時做動畫。這聽起來有點拗口，什么意思呢，直接上效果看
因為是動畫，所以有多個圖才能有效果：
      
    
簡而言之，就是這只小鳥在從左往右走的時候還能煽動翅膀，是不是很有玩呢，而真正的代碼只有20行就夠了，并且還是css代碼！
可以animation的用法對于我們來說基本都已經(jīng)沒什么太大的問題，如果animation還不知道童鞋可以去W3C上看一下，很簡單！！在這里我就簡單的說一下
我們知道animation分為兩個部分，一個是設(shè)置動畫部分，一個是自定義動畫部分
設(shè)置的部分的語法為：animation ：自定義動畫名 動畫所需時間 動畫運動曲線，動畫何時開始 動畫是否逆序播放 動畫運動的次數(shù) 動畫是否運行 動畫運行后的狀態(tài)
例如：animation: donghua  1s  linear  0s  normal  1  running  Both;
一共有八個參數(shù)，具體根據(jù)你的需求有選擇性的用參數(shù)，當(dāng)然，你全部寫上也沒有任何問題，只是我們在工作中一般都是簡寫
自定義動畫部分 @keyframes 自定義動畫名{
0%{
// 這里書寫css樣式
}
100%{
// 這里書寫css樣式
}
}
百分比可以自己去調(diào)節(jié)，你也可以在加上50%，看你自己的需求，想要了解更詳細(xì)的同學(xué)可以去W3C自主學(xué)習(xí)一下，我相信半個小時就能搞定它！
好了，言歸正傳，在我們設(shè)置動畫里面有一個動畫運動曲線，在W3C的網(wǎng)站上只有l(wèi)inear，ease等等這種讓動畫看上更加有緩動性的取值。但是它的取值還可以是steps(); 意思就是說讓動畫以幀動畫的形式播放，簡單點說就是這個動畫分成多少步去執(zhí)行！映射到我們這個案例里面的就是拍翅膀這個過程有多少幀（有多少步）。
在這里，我們需要運用到一張圖

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

這樣，我們就能實現(xiàn)了小鳥不停的在原地煽動翅膀了，其實原理就是這個圖片的bacnground-position的值不斷在發(fā)生變化，并且速度很快，呈現(xiàn)給我們的視覺效果就是這樣小鳥在不停的扇動翅膀了。
那么我們?nèi)绾巫屗吷縿映岚蜻呁白吣?，很簡單，我們只需要在加上一組從左往右運動的動畫就夠了。
就是這么簡單，是不是心動了呢，趕緊自己去制作一下吧（友情提示：相關(guān)的素材直接百度幀動畫素材就有很多喲）


本文版權(quán)歸傳智播客UI培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處。謝謝！
作者：傳智播客UI培訓(xùn)學(xué)院
首發(fā)：http://m.fskzgqt.cn/ui 
0 分享到：
和我們在線交談！