sketch制作Android动画,Sketch制作GIF动画--基础篇
前言
自從小tan上次出了一篇關于用Sketch制作自定義的APP下拉刷新GIF動畫后，有不少小伙伴說期待出一篇關于Sketch制作GIF動畫的詳細教程。由于前段時間小tan都在忙于私人的家事，一直都沒有及時的更新文章。正好趁著這舉國同慶，作為技術宅的我們都在家里百無聊賴的時間里為大家走一波，獻上大家期待已久的一篇文章。請叫我好先生！
使用sketch不僅能夠制作靜態的UI圖，也能制作炫酷的GIF動圖。這功勞還是要仰仗強大的AnimateMate插件。這邊文章講述了AnimateMate插件的安裝和使用，并結合實踐講述了常用動畫的基本使用，目的就是為了能讓大家快速上手。下一遍文章將會講述更高級的動畫實現。
AnimateMate插件的安裝
sketch有兩種安裝插件的方法，一種是傳統的安裝方式，即將插件解壓后放到Plugins文件目錄下，重啟sketch即可。但是這種安裝方法需要一個個的去找插件，非常麻煩。
我這里給大家介紹第二種安裝插件的方法，就是先下載一個sketch插件管理工具sktch toolbox，通過sketch toolbox可以很方便的對插件進行安裝和卸載，就像xcode下的Alcatraz一樣。這里貼上sketch toolbox的下載地址。下載并安裝后即可使用。打開sketch toolbox，然后搜索AimateMate插件，點擊install即可安裝，是不是很簡單。
AnimateMate插件使用
1. 功能介紹
插件的功能還是比較簡單明了的，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制作動畫過程中可能會遇到的一些問題。
這里我把文中所有的 sketch源文件 也提供出來，供大家參考。有什么問題可以在評論區貼出來，也可以微博私信我。祝大家節日愉快。
總結
以上是生活随笔為你收集整理的sketch制作Android动画,Sketch制作GIF动画--基础篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： DatawhaleLeeML-Task0
- 下一篇： 向日葵android自动退出,向日葵An