前言
自從上次出了一篇關於用Sketch製作自定義的APP下拉刷新GIF動畫後，有不少小夥伴說期待出一篇關於Sketch製作GIF動畫的詳細教程。由於前段時間都在忙於私人的家事，一直都沒有及時的更新文章。正好現在有時間為大家走一波，獻上大家期待已久的一篇文章。
使用sketch不僅能夠製作靜態的UI圖，也能製作炫酷的GIF動圖。這功勞還是要仰仗強大的AnimateMate插件。這邊文章講述了AnimateMate插件的安裝和使用，並結合實踐講述了常用動畫的基本使用，目的就是為了能讓大家快速上手。下一遍文章將會講述更高級的動畫實現。
AnimateMate插件的安裝sketch有兩種安裝插件的方法，一種是傳統的安裝方式，即將插件解壓後放到Plugins文件目錄下，重啟sketch即可。但是這種安裝方法需要一個個的去找插件，非常麻煩。
我這裡給大家介紹第二種安裝插件的方法，就是先下載一個sketch插件管理工具sktch toolbox，通過sketch toolbox可以很方便的對插件進行安裝和卸載，就像xcode下的Alcatraz一樣。這裡貼上sketch toolbox的下載地址。下載並安裝後即可使用。打開sketch toolbox，然後搜索AimateMate插件，點擊install即可安裝，是不是很簡單。
插件的功能還是比較簡單明了的，AnimateMate總共提供了三種創建動畫的方式，分別是Create Animateion（基本動畫），Offect Animation（偏移動畫），Random Animation（隨機動畫）。這裡我們只講解基本動畫的使用，剩下兩種會在接下來的進階篇中進行講解。
Create Animation：創建基本動畫，包括Postion，Size，Transform，Opacity等屬性的動畫。
Edit Animation：編輯動畫，對動畫的屬性值進行編輯。
Delete Animation：刪除動畫，如果動畫不需要了，可以通過該功能進行刪除。
Retrun Keyframe：返回某一刻的關鍵幀layer的狀態，比如一個矩形第0個關鍵幀的橫坐標為10，第10個關鍵幀的橫坐標為100，那麼我們返回這個矩形第0個關鍵幀的狀態，此刻該矩形就會回到橫坐標為10的位置。這樣一個功能的好處就是方便查看各個關鍵幀的狀態。
Reverse Keyframe：反轉一個範圍內關鍵幀的動畫。比如從0到10這10個關鍵幀中一個矩形的動畫是從橫坐標為10變為100。那麼反轉這個矩形0到10關鍵幀之間的動畫之後，該矩形的動畫就變成了從橫坐標為100變為10。一般這個功能比較少用到。
Export Animation：導出動畫，選擇對應的畫板把動畫導出。導出動畫如果選擇單個圖層來導出，那麼將只會導出這個圖層的動畫效果，其他圖層的動畫將被忽略，所以我們一般選擇對應的畫板來導出整個畫板的動畫。導出動畫可以既可以導出png圖片集合也可以導出gif動畫。
2. 創建動畫原理AnimateMate創建基本動畫只需要設置三個值，分別是Properties（屬性值）、Keyframe Number（關鍵幀個數）、Easing Type（動畫過度效果）。
Properties：屬性的變化。AnimateMate支持Position（x和y）、Size（Width和Height）、Trasform（Rotate）、Opacity等屬性的動畫。
Keyframe Number：Keyframe Number即為關鍵幀的個數。關鍵幀的個數決定著動畫執行的長短。
Easing Type：Easing Type即為動畫過度效果。Easing是jQuery自定義動畫用來設置動畫過度效果的一個參數，在jQuery Easing Plugin中提供了像linearEase、easeOutExpo、easeOutBounce等30多種效果。AnimateMate插件同樣也提供了所有的效果供大家使用，大家可以點擊這裡去看每一種easing的演示效果。
AnimateMate實踐演示1. Position動畫1.1 position動畫最終實現的效果
position動畫效果.gif
1.2 首先創建一個200x200的畫板，命名為position，然後畫一個大小為140x140的圓，命名為out_layer，填充顏色為#F6F6F6；Borders大小為6，顏色為#F4F7F8。再畫一個大小為26x26大小的圓，命名為in_layer，填充顏色為白色。
創建畫板和圖層.png
1.3 選擇in_layer，設置橫坐標和縱坐標都為60，然後選擇Plugins->AnimateMate->Create Animation
設置屬性創建動畫.png
1.4 創建第0幀的動畫。keyframe Number為0，Easing Type保持默認值linearEase。
設置屬性創建動畫.png
1.5 選擇in_layer，設置橫坐標為114，縱坐標都為60，然後選擇Plugins->AnimateMate->Create Animation
設置屬性創建動畫.png
1.6 創建第10幀的動畫（我總共設置了40幀動畫，每一次轉折為10個幀，如果你覺得10個幀運動太快，可以添加關鍵幀的個數）。keyframe Number為10，Easing Type保持默認值linearEase。
設置屬性創建動畫.png
1.7 選擇in_layer，設置橫坐標和縱坐標都為114，然後選擇Plugins->AnimateMate->Create Animation
設置屬性創建動畫.png
1.8 創建第20幀的動畫。keyframe Number為20，Easing Type保持默認值linearEase。
設置屬性創建動畫.png
1.9 選擇in_layer，設置橫坐標為60，縱坐標為114，然後選擇Plugins->AnimateMate->Create Animation
設置屬性創建動畫.png
1.10 創建第30幀的動畫。keyframe Number為30，Easing Type保持默認值linearEase。
設置屬性創建動畫.png
1.11 選擇in_layer，設置橫坐標和縱坐標都為60，然後選擇Plugins->AnimateMate->Create Animation
設置屬性創建動畫.png
1.12 創建第40幀的動畫。keyframe Number為40，Easing Type保持默認值linearEase。
設置屬性創建動畫.png
1.13 選中position畫板，選擇Plugins->AnimateMate->Export Animation導出動畫即可。
2. Size動畫2.1 size動畫最終實現的效果
size動畫的實現效果.gif
2.2 copy一份position畫板，並命名為size。
copy畫板並命名.png
2.3 選中in_layer，選擇Plugins->AnimateMate->Delete Animation刪除in_layer上的動畫效果。
設置屬性創建動畫.png
2.4 選擇in_layer，設置in_layer的大小為26x26。選擇Plugins->AnimateMate->Create Animation。
設置屬性創建動畫.png
2.5 創建第0幀的動畫。keyframe Number為0，Easing Type保持默認值linearEase。
設置屬性創建動畫.png
2.6 選擇in_layer，設置in_layer的大小為75x75。選擇Plugins->AnimateMate->Create Animation。
設置屬性創建動畫.png
2.7 創建第30幀的動畫。keyframe Number為30，Easing Type保持默認值linearEase。
設置屬性創建動畫.png
2.8 選中size畫板，選擇Plugins->AnimateMate->Export Animation導出動畫即可。
3. Transform動畫3.1 transform動畫最終實現效果
transform動畫實現效果.gif
3.2 copy一份position畫板，命名為transform。
copy畫板並命名.png
3.3 選中in_layer和out_layer建成組Group。
設置屬性創建動畫.png
3.4 選中Group，設置Rorate為0°，選擇Plugins->AnimateMate->Create Animation。
設置屬性創建動畫.png
3.5 創建第0幀的動畫。keyframe Number為0，Easing Type保持默認值linearEase。
設置屬性創建動畫.png
3.6 選中Group，設置Rorate為359°，選擇Plugins->AnimateMate->Create Animation。
設置屬性創建動畫.png
3.7 創建第40幀的動畫。keyframe Number為40，Easing Type保持默認值linearEase。
設置屬性創建動畫.png
3.8 選中transform畫板，選擇Plugins->AnimateMate->Export Animation導出動畫即可。
4. Opacity動畫4.1 opacity動畫最終實現效果
opacity動畫實現效果.gif
4.2 copy一份size畫板，命名為opacity。
copy畫板並命名.png
4.3 選中in_layer，設置其Opacity為100%，選擇Plugins->AnimateMate->Create Animation。
設置屬性創建動畫.png
4.4 創建第0幀的動畫。keyframe Number為0，Easing Type保持默認值linearEase。
設置屬性創建動畫.png
4.5 選中in_layer，設置其Opacity為20%，選擇Plugins->AnimateMate->Create Animation。
設置屬性創建動畫.png
4.6 創建第30幀的動畫。keyframe Number為30，Easing Type保持默認值linearEase。
設置屬性創建動畫.png
4.7 選中opacity畫板，選擇Plugins->AnimateMate->Export Animation導出動畫即可。
5. 組合動畫以上所有的動畫中都是單個圖層在進行動畫，那麼問題來了，當我們要設置多個圖層一起進行動畫該如何處理。
有兩種情況，一種是多個圖層之間做的動畫是相同的；一種是多個圖層之間做的動畫是不同的。
當多個圖層所做的動畫是相同的時候，那麼我們在設置動畫的時候可以同時選中多個圖層。當多個圖層所做的動畫不相同時，比如我要讓兩個圓一個做放大動畫一個做縮小動畫，那麼我們就可以分別對這兩個圓設置動畫即可。
5.1 group動畫的最終實現效果
group動畫實現效果.gif
5.2 copy一份position畫板，命名為group。將in_layer放到中間位置，設置其填充顏色為紅色。
copy畫板並命名.png
5.3 選擇in_layer，設置其大小為26x26，選擇Plugins->AnimateMate->Create Animation。
設置屬性創建動畫.png
5.4 創建in_layer的第0幀的動畫。keyframe Number為0，Easing Type保持默認值linearEase。
設置屬性創建動畫.png
5.5 選擇in_layer，設置其大小為70x70，選擇Plugins->AnimateMate->Create Animation。
設置屬性創建動畫.png
5.6 創建in_layer的第20幀的動畫。keyframe Number為20，Easing Type保持默認值linearEase。
設置屬性創建動畫.png
5.7 選擇out_layer，設置其大小為140x140，選擇Plugins->AnimateMate->Create Animation。
設置屬性創建動畫.png
5.8 創建out_layer的第0幀的動畫。keyframe Number為0，Easing Type保持默認值linearEase。
設置屬性創建動畫.png
5.9 選擇out_layer，設置其大小為78x78，選擇Plugins->AnimateMate->Create Animation。
設置屬性創建動畫.png
5.10 創建out_layer的第20幀的動畫。keyframe Number為20，Easing Type保持默認值linearEase。
設置屬性創建動畫.png
5.11 選中group畫板，選擇Plugins->AnimateMate->Export Animation導出動畫即可。
6. Easing Type的使用給我們的動畫設置合理的easing type可以讓我們的動畫更富有新意，更接近真實。比如我們要製作一個彈簧的動畫，那麼單單只靠線性過度效果是無法實現的，藉助easing type中的easeOutElastic過度效果則可以輕鬆實現。
6.1 easing動畫的最終實現效果
easing動畫實現效果.gif
6.2 copy一份position畫板，命名為easing。將in_layer放到中間位置。
copy畫板並命名.png
6.3 選擇in_layer，設置其大小為26x26，選擇Plugins->AnimateMate->Create Animation。
設置屬性創建動畫.png
6.4 創建第0幀的動畫。keyframe Number為0，Easing Type設置為easeOutElastic。
設置屬性創建動畫.png
6.5 選擇in_layer，設置其大小為75x75，選擇Plugins->AnimateMate->Create Animation。
設置屬性創建動畫.png
6.6 創建第30幀的動畫。keyframe Number為30，Easing Type這裡可以隨意設置。
設置屬性創建動畫.png
6.7 選中easing畫板，選擇Plugins->AnimateMate->Export Animation導出動畫即可。
總結本篇文章講述了AnimateMate插件製作GIF動畫的原理和功能介紹，並結合實際講述了常見屬性動畫的實現和Easing Type的使用，目的是讓大家能夠快速上手。記住一點，動畫的製作方法是很簡單的，缺乏的還是想像力。不過AnimateMate製作動畫也是有其局限性的，對於非線性動畫AnimateMate還是無能為力的。下一篇文章將會講述一些更高級的動畫實現以及在使用AnimateMate製作動畫過程中可能會遇到的一些問題。
通知：
最新開通文中AD，大家有機會幫忙點擊一下哦
哦！別忘了，下面還有一個
感謝各位支持老吳
必將全力幫助大家找好工作
拿高薪資
看到這裡還沒有完
繼續往下
下面挑選了大家想要的文章
點擊查看即可
記得點擊底部「AD」支持老吳哦
--好文推薦--
1、【教程】合成仰望雲端的鯨飛城堡場景
2、【教程】合成暴雨中的被雨水打散的美女
3、解構漢字"以形延意"
4、揭秘字體設計之筆畫連接技巧！
5、20個三折頁設計技巧，你會麼？
6、版式設計-名片排版の1000種解法
7、好萊塢大片的特效ps前後對比，亮瞎我的眼！
8、【教程】廣告中的立方體元素
9、取款方式巨變！今天，微信支付寶同時宣布！
10、【乾貨】特全的漫畫人物的素材
11、PS轉手繪，簡單易學照片轉素描效果
12、微信公眾號風格定位
13、新媒體管家插件演示及下載連結
14、千款配色設計師必備乾貨
15、BANNER 圖設計的多種表現手法
16、【教程】輕鬆教你打造俏皮卡通插畫
17、設計師接私單，應該如何包裝自己？
18、你要，就來拿！書籍推薦
19、軟體分享
20、國外網站
21、國內網站
22、人體結構
23、 店鋪招牌
24、下雪動畫
25、眼睛畫法
26、 通 欄 圖
27、運費模板
28、寶貝上架
29、 圖片上傳
30、字體侵權
31、公眾號註冊
32、淘寶裝修尺寸
33、淘寶開店
34、設計提升
35、配色技巧
————術心————
磨好刀 練好功
江 湖 就 是 你 的