一、 什麼是動圖

動圖，顧名思義就是動态圖片，亦稱GIF圖片。官方解釋：它是一個可以将多幅圖像數據存于一起，并逐幀顯示到屏幕上，形成簡單動畫的圖像文件。

二、 動圖在生活中的應用

動圖多用在表情包，為平時的聊天增加樂趣（如下視圖）

小陳皮的表情-微信表情已上架

同時還有電商詳情頁展示，工作流程說明，活動頁、PPT報表等都可以用到動态圖片。

動态圖片具有非常強的趣味性和直觀性，在日常工作生活中扮演着非常重要的角色。本文筆者通過自身的經驗，帶大家去認識、了解和制作動态圖片。

三、 動圖的制作方法

上面我們說到，動圖是一個多幅圖像數據文件，其中應至少包含兩幅圖片（如下視圖）

這張信号幹擾圖片是6幅圖像循環播放組成的

當圖像越多時，動畫就越細膩（文件也越大）。當每秒超過24幀，即單幀時間低于0.04秒，這些連續播放的圖片就會連成視頻。

動态圖的制作方法比較多，軟件的話一般用PS制作較為常見和方便，方式可以由靜态圖片制作成動态，可以ps繪制，可以用視頻文件截取拼接成動圖(局部動圖就是這麼做的，也可以用3D文件制作動畫。（如下視圖）

（視頻截取的局部動圖）

（ps繪制動圖）

但凡是通過PS輸出的動圖，制作過程隻有兩種形式：幀動畫和視頻動畫（如下視圖）

幀動畫：通過每一幀的依次、循環播放形成動畫。制作時需要把每一幀的最終形态做出來。

優點是可控程度高，缺點是繁瑣，易出bug。（幀動畫可轉視頻動畫，視頻動畫轉幀動畫會丢失數據）。

視頻動畫：用關鍵幀，時間軸來控制元素的數據變化（位置、透明度、尺寸等）系統自動添加過度幀，通過關鍵幀之間的數據變化實現動畫。

優點是操作簡單，效果多變，可塑性強，很多優點，推薦使用。缺點是文件較大，對電腦配置要求較高。

進入主題

幀動畫

幀動畫常用的制作方式有：液化、變形、移動旋轉、鋼筆繪制

示例1：液化

通過液化，讓原圖形變形，新圖形和原圖切換播放産生動畫。（如下視圖）

示例2：變形

變形拉扯，可以很好的做運動類的動圖，結合塗抹模糊效果更好（如下視圖）

用網格變形加塗抹來模拟整個動畫過程

PS：制作動畫的時候首先要考慮物體的運動規則，這樣做出來才真實！

示例3：移動旋轉

飛行、奔跑、伸縮可以用移動來做，通過旋轉變形也可以做旋轉動畫，不過此類動畫用視頻動畫更加方便

示例4：鋼筆繪制

（如下視圖）

視頻動畫

視頻動畫可控參數有：位置、透明度、變換、樣式、蒙版位置和蒙版啟用（如下視圖）

制作視頻動畫之前，我們需要了解關鍵幀，點擊控制項前的圓圈即可激活關鍵幀，關鍵幀記錄着每個位置的參數，通過關鍵幀之間的均勻過度，形成動畫。

值得注意的是：圖層在未轉智能對象的時候不能記錄尺寸變換，轉智能對象之後，位置控件變成變換，這個時候變換可以記錄對象的位置和大小變化。

示例1：移動視頻動畫

移動是最基礎的動畫，配合蒙版可以制作出很nice的效果

PS：一個簡單的移動動畫，通過移動關鍵點的位置可以實現加速減速，如果開關移動過程中，背景的灰色和綠色有破綻，可以使用蒙版進行糾正。

示例2：變換視頻動畫

通過關鍵幀，可以很好的控制動畫的延展

PS:用變換給對應的旋轉角度打上關鍵幀，變換可以實現移動、縮放、旋轉、變形等動畫，感興趣可以自己摸索一下。

示例3：透明度視頻動畫

添加明度變化就可以制作消失和閃現的效果

PS：用變換做一個向右移動同時縮小的動畫，移動的同時再給它一個漸隐的變化。

示例4：樣式視頻動畫

light外發光樣式變化動畫

和之前的動畫原理一樣，這個是兩個圖層樣式之間的過度動畫。

示例5：蒙版視頻動畫

可以通過控制蒙版的位置來制作遮罩動畫，與上面類似，這裡不做重複！

四、 動畫的疊加和拼接

1、疊加

把元素（黑絲背景）濾色模式到需要動畫的文件中就可以了，動畫元素智能對象（特别注意，必須要是視頻動畫才能實現；可以把GIF圖轉換成視頻動畫！

用AE制作的飄雪素材（沒有可以網上下）疊加到背景圖片

2拼接也很好理解，這裡不做累贅複述了！

到這裡本案例就結束了，文章有涯而學無涯，一篇文章是沒辦法把所有知識點說透的，有疑問就私信我吧，關注我，不迷路！

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!