前言

其實這個教程并非我的原創(chuàng)，但是由于原版里遺漏了些步驟者冤，所以我在此為各位補(bǔ)足遺漏的部分以及一些改良后的效果肤视，希望大家喜歡之余，為我點個贊涉枫，感謝??

使用sketch不僅能夠制作靜態(tài)的UI圖邢滑，也能制作炫酷的GIF動圖。這功勞還是要仰仗強(qiáng)大的AnimateMate插件愿汰。這邊文章講述了AnimateMate插件的安裝和使用困后，并結(jié)合實踐講述了常用動畫的基本使用，目的就是為了能讓大家快速上手衬廷。下一遍文章將會講述更高級的動畫實現(xiàn)摇予。

AnimateMate插件的安裝

sketch有兩種安裝插件的方法，一種是傳統(tǒng)的安裝方式泵督，即將插件解壓后放到Plugins文件目錄下趾盐，重啟sketch即可。但是這種安裝方法需要一個個的去找插件小腊，非常麻煩救鲤。我這里給大家介紹第二種安裝插件的方法，就是先下載一個sketch插件管理工具sktch toolbox秩冈，通過sketch toolbox可以很方便的對插件進(jìn)行安裝和卸載本缠，就像xcode下的Alcatraz一樣。這里加上sketch toolbox的下載地址入问。下載并安裝后即可使用丹锹。打開sketch toolbox，然后搜索AimateMate插件芬失，點擊install即可安裝楣黍，簡單吧。

AnimateMate插件使用

一. 功能介紹

插件的功能還是比較簡單明了的棱烂，AnimateMate總共提供了三種創(chuàng)建動畫的方式租漂，分別是Create Animateion（基本動畫），Offect Animation（偏移動畫）颊糜，Random Animation（隨機(jī)動畫）哩治。這里我們只講解基本動畫的使用，剩下兩種會在后面的進(jìn)階篇中進(jìn)行講解业筏。

1、Create Animation（快捷鍵：cmd+con+opt+K）：創(chuàng)建基本動畫鸟赫，包括Postion蒜胖，Size消别，Transform，Opacity等屬性的動畫

2翠勉、Edit Animation（快捷鍵：cmd+con+opt+L）：編輯動畫妖啥，對動畫的屬性值進(jìn)行編輯。

3对碌、Delete Animation（快捷鍵：cmd+con+opt+D）：刪除動畫荆虱，如果動畫不需要了，可以通過該功能進(jìn)行刪除朽们。

4怀读、Retrun Keyframe：返回某一刻的關(guān)鍵幀layer的狀態(tài)，比如一個矩形第0個關(guān)鍵幀的橫坐標(biāo)為10骑脱，第10個關(guān)鍵幀的橫坐標(biāo)為100菜枷，那么我們返回這個矩形第0個關(guān)鍵幀的狀態(tài)，此刻該矩形就會回到橫坐標(biāo)為10的位置叁丧。這樣一個功能的好處就是方便查看各個關(guān)鍵幀的狀態(tài)啤誊。

5、Reverse Keyframe：反轉(zhuǎn)一個范圍內(nèi)關(guān)鍵幀的動畫拥娄。比如從0到10這10個關(guān)鍵幀中一個矩形的動畫是從橫坐標(biāo)為10變?yōu)?00蚊锹。那么反轉(zhuǎn)這個矩形0到10關(guān)鍵幀之間的動畫之后，該矩形的動畫就變成了從橫坐標(biāo)為100變?yōu)?0稚瘾。一般這個功能比較少用到牡昆。

6、Export Animation：導(dǎo)出動畫摊欠，選擇對應(yīng)的畫板把動畫導(dǎo)出丢烘。導(dǎo)出動畫如果選擇單個圖層來導(dǎo)出，那么將只會導(dǎo)出這個圖層的動畫效果些椒，其他圖層的動畫將被忽略播瞳，所以我們一般選擇對應(yīng)的畫板來導(dǎo)出整個畫板的動畫。導(dǎo)出動畫可以既可以導(dǎo)出png圖片集合也可以導(dǎo)出gif動畫免糕。

二.創(chuàng)建動畫原理

AnimateMate創(chuàng)建基本動畫只需要設(shè)置三個值狐史，分別是Properties（屬性值）、Keyframe Number（關(guān)鍵幀個數(shù)）说墨、Easing Type（動畫過度效果）。

1苍柏、Properties：屬性的變化尼斧。AnimateMate支持Position（x和y）、Size（Width和Height）试吁、Trasform（Rotate）棺棵、Opacity等屬性的動畫楼咳。

2、Keyframe Number：即為關(guān)鍵幀的個數(shù)烛恤。關(guān)鍵幀的個數(shù)決定著動畫執(zhí)行的長短母怜。

3、Easing Type：Easing Type即為動畫過渡效果缚柏。Easing是jQuery自定義動畫用來設(shè)置動畫過度效果的一個參數(shù)苹熏，在jQuery Easing Plugin中提供了如linearEase、easeOutExpo币喧、easeOutBounce等30多種效果轨域。AnimateMate插件同樣也提供了所有的效果供大家使用，大家可以點擊這里去看每一種easing的演示效果杀餐。

AnimateMate實踐演示

1. Position動畫

1.1 position動畫最終實現(xiàn)的效果

position.gif

1.2 首先創(chuàng)建一個200x200的畫板干发，命名為position，然后畫一個大小為140x140的圓史翘，命名為out_circle枉长，填充顏色為#5AC8FF；Borders大小為6琼讽，顏色為#f6f6f6必峰。再畫一個大小為26x26大小的圓，命名為in_layer跨琳，填充顏色為白色自点。

屏幕快照 2017-07-06 下午4.16.14.png

1.3 選擇in_circle，設(shè)置橫坐標(biāo)和縱坐標(biāo)都為60脉让，然后選擇Plugins->AnimateMate->Create Animation

2.png

1.4 創(chuàng)建第0幀的動畫桂敛。keyframe Number為0，Easing Type保持默認(rèn)值linearEase溅潜。

3.png

1.5 選擇in_circle术唬，設(shè)置橫坐標(biāo)為114，縱坐標(biāo)都為60滚澜，然后選擇Plugins->AnimateMate->Create Animation

4.png

1.6 創(chuàng)建第10幀的動畫（我總共設(shè)置了40幀動畫粗仓，每一次轉(zhuǎn)折為10個幀，如果你覺得10個幀運動太快设捐，可以添加關(guān)鍵幀的個數(shù)）借浊。keyframe Number為10，Easing Type保持默認(rèn)值linearEase萝招。

5.png

1.7 選擇in_circle蚂斤，設(shè)置橫坐標(biāo)和縱坐標(biāo)都為114，然后選擇Plugins->AnimateMate->Create Animation

6.png

1.8 創(chuàng)建第20幀的動畫槐沼。keyframe Number為20曙蒸，Easing Type保持默認(rèn)值linearEase捌治。

7.png

1.9 選擇in_circle，設(shè)置橫坐標(biāo)為60纽窟，縱坐標(biāo)為114肖油，然后選擇Plugins->AnimateMate->Create Animation

8.png

1.10 創(chuàng)建第30幀的動畫。keyframe Number為30臂港，Easing Type保持默認(rèn)值linearEase森枪。

9.png

1.11 選擇in_circle，設(shè)置橫坐標(biāo)和縱坐標(biāo)都為60趋艘，然后選擇Plugins->AnimateMate->Create Animation

10.png

1.12 創(chuàng)建第40幀的動畫疲恢。keyframe Number為40，Easing Type保持默認(rèn)值linearEase瓷胧。

11.png

1.13 選中position畫板显拳，選擇Plugins->AnimateMate->Export Animation導(dǎo)出動畫,設(shè)置中選GIF Animation即可。

12.png

2.Size動畫

2.1 size動畫最終實現(xiàn)的效果

原版教程中的動畫效果有些突兀搓萧，并不是非常流暢杂数，后來我增加了一個步驟，看起來就流暢了許多瘸洛，現(xiàn)在看一下原版和我改后的效果揍移。

size（原版）.gif

bigandsmall.gif

2.2 copy一份position畫板，并命名為size反肋。

13.png

2.3 選中in_circle那伐，選擇Plugins->AnimateMate->Delete Animation刪除in_layer上的動畫效果。

14.png

2.4 選擇in_circle石蔗，設(shè)置in_circle的大小為26x26罕邀。選擇Plugins->AnimateMate->Create Animation

屏幕快照 2017-07-10 下午11.59.04.png

2.5 創(chuàng)建第0幀的動畫。keyframe Number為0养距，Easing Type保持默認(rèn)值linearEase(傻瓜式操作開始)诉探。

3.png

2.6 選擇in_circle，設(shè)置in_circle的大小為100 x100棍厌。選擇Plugins->AnimateMate->Create Animation肾胯。

屏幕快照 2017-07-11 上午12.02.59.png

2.7 創(chuàng)建第30幀的動畫。keyframe Number為30耘纱，Easing Type保持默認(rèn)值linearEase敬肚。

9.png

2.8 選擇in_circle，設(shè)置in_circle的大小為26 x26束析。選擇Plugins->AnimateMate->Create Animation帘皿。

屏幕快照 2017-07-10 下午11.59.04.png

2.9 創(chuàng)建第60幀的動畫。keyframe Number為60畸陡，Easing Type保持默認(rèn)值linearEase鹰溜。

19.png

3.0 最后選中size畫板，選擇Plugins->AnimateMate->Export Animation導(dǎo)出動畫即可(別忘了設(shè)置GIF Animation噢丁恭！)曹动。

3. Transform動畫

3.1 transform動畫最終實現(xiàn)效果

circle.gif

3.2 copy一份position畫板，命名為transform牲览。

15.png

3.3 選中in_circle和out_circle建成組Group墓陈。

16.png

3.4 選中Group，設(shè)置Rorate為0°第献，選擇Plugins->AnimateMate->Create Animation

17.png

3.5 創(chuàng)建第0幀的動畫贡必。keyframe Number為0，Easing Type保持默認(rèn)值linearEase庸毫。

3.png

3.6 選中Group仔拟，設(shè)置Rorate為359°，選擇Plugins->AnimateMate->Create Animation飒赃。

18.png

3.7 創(chuàng)建第40幀的動畫利花。keyframe Number為40，Easing Type保持默認(rèn)值linearEase载佳。

11.png

3.8 選中transform畫板炒事，選擇Plugins->AnimateMate->Export Animation導(dǎo)出動畫即可(還是老規(guī)矩，別忘了設(shè)置GIF Animation)蔫慧。

4. Opacity動畫

4.1 opacity動畫最終實現(xiàn)效果的

原版的效果還是一如既往的有些突兀挠乳，于是我又稍作修改，增加了一個步驟姑躲。以下是原版和我改后的版本睡扬。

原版.gif

opacity.gif

怎么樣？看起來是不是更加自然肋联？

4.2 copy一份size畫板威蕉，命名為opacity。

20.png

4.3 選中in_circle橄仍，設(shè)置其Opacity為100%韧涨，選擇Plugins->AnimateMate->Create Animation。

21.png

4.4 創(chuàng)建第0幀的動畫侮繁。keyframe Number為0虑粥，Easing Type保持默認(rèn)值linearEase。

3.png

4.5 選中in_circle宪哩，設(shè)置其Opacity為0%娩贷，選擇Plugins->AnimateMate->Create Animation。

22.png

4.6 創(chuàng)建第30幀的動畫锁孟。keyframe Number為30彬祖，Easing Type保持默認(rèn)值linearEase茁瘦。

9.png

4.7 選中in_circle，設(shè)置其Opacity為100%储笑，選擇Plugins->AnimateMate->Create Animation甜熔。

21.png

4.8 創(chuàng)建第60幀的動畫。keyframe Number為60突倍，Easing Type保持默認(rèn)值linearEase腔稀。

19.png

4.9 選中opacity畫板，選擇Plugins->AnimateMate->Export Animation導(dǎo)出動畫即可(我不想再說設(shè)置GIF Animation了??)羽历。

5. 組合動畫

以上所有的動畫中都是單個圖層在進(jìn)行動畫焊虏，那么問題來了，當(dāng)我們要設(shè)置多個圖層一起進(jìn)行動畫該如何處理秕磷。
有兩種情況诵闭，一種是多個圖層之間做的動畫是相同的；一種是多個圖層之間做的動畫是不同的跳夭。
當(dāng)多個圖層所做的動畫是相同的時候涂圆，那么我們在設(shè)置動畫的時候可以同時選中多個圖層。當(dāng)多個圖層所做的動畫不相同時币叹，比如我要讓兩個圓一個做放大動畫一個做縮小動畫润歉，那么我們就可以分別對這兩個圓設(shè)置動畫即可。

5.1 group動畫的最終實現(xiàn)效果

原版的和我改良后的效果對比

23.gif

group.gif

5.2 copy一份position畫板颈抚，命名為group踩衩。將in_circle放到中間位置，其填充顏色為白色不變贩汉。

24.png

5.3 選擇in_circle驱富，設(shè)置其大小為26x26，選擇Plugins->AnimateMate->Create Animation匹舞。

25.png

5.4 創(chuàng)建in_circle的第0幀的動畫褐鸥。keyframe Number為0，Easing Type保持默認(rèn)值linearEase赐稽。

3.png

5.5 選擇in_circle叫榕，設(shè)置其大小為70x70(當(dāng)然你也可以嘗試其他大小)，選擇Plugins->AnimateMate->Create Animation姊舵。

26.png

5.6 創(chuàng)建in_circle的第20幀的動畫晰绎。keyframe Number為20，Easing Type保持默認(rèn)值linearEase括丁。

7.png

5.7 選擇out_circle荞下，設(shè)置其大小為140x140，選擇Plugins->AnimateMate->Create Animation。

27.png

5.8 創(chuàng)建out_circle的第0幀的動畫尖昏。keyframe Number為0仰税，Easing Type保持默認(rèn)值linearEase。

3.png

5.9 選擇out_circle抽诉，設(shè)置其大小為78x78肖卧，選擇Plugins->AnimateMate->Create Animation。

28.png

5.10 創(chuàng)建out_circle的第20幀的動畫掸鹅。keyframe Number為20，Easing Type保持默認(rèn)值linearEase拦赠。

7.png

5.11 分別重復(fù)in_circle和out_circle的第一步設(shè)定巍沙，設(shè)置in-circle大小為26X26，out_circle大小為140*140荷鼠，選擇Plugins->AnimateMate->Create Animation句携。

5.12 分別創(chuàng)建in_circle和out_circle的第40幀的動畫。keyframe Number為40允乐，Easing Type保持默認(rèn)值linearEase矮嫉。

5.13 選中g(shù)roup畫板，選擇Plugins->AnimateMate->Export Animation導(dǎo)出動畫即可牍疏。

6. Easing Type的使用

給我們的動畫設(shè)置合理的easing type可以讓我們的動畫更富有新意蠢笋，更接近真實。比如我們要制作一個彈簧的動畫鳞陨，那么單單只靠線性過度效果是無法實現(xiàn)的昨寞，借助easing type中的easeOutElastic過度效果則可以輕松實現(xiàn)。

6.1 easing動畫的最終實現(xiàn)效果

29.gif

6.2 copy一份position畫板厦滤，命名為easing援岩。將in_circle放到中間位置。

30.png

6.3 選擇in_circle掏导，設(shè)置其大小為26x26(可按自己想法更改)享怀，選擇Plugins->AnimateMate->Create Animation。

31.png

6.4 創(chuàng)建第0幀的動畫趟咆。keyframe Number為0添瓷，Easing Type設(shè)置為easeOutElastic。

32.png

6.5 選擇in_circle忍啸，設(shè)置其大小為75x75仰坦，選擇Plugins->AnimateMate->Create Animation。

33.png

6.6 創(chuàng)建第30幀的動畫计雌。keyframe Number為30悄晃，Easing Type這里可以隨意設(shè)置(建議還是easeOutElastic)。

34.png

6.7 選中easing畫板，選擇Plugins->AnimateMate->Export Animation導(dǎo)出動畫即可妈橄。

總結(jié)：

這個教程是我在看過原作者教程后庶近，發(fā)現(xiàn)其中的一些小問題，以及原作者遺漏的一些步驟眷蚓，決定將其補(bǔ)足鼻种，希望對各位有所幫助。其中許多步驟事實上可以按照自己的想法自由更改沙热，大家可以自行嘗試叉钥，也能做出屬于自己想法的小動畫來。不過AnimateMate制作動畫也是有其局限性的篙贸，對于非線性動畫AnimateMate還是無能為力的投队。另外，向原作者wythetan致敬爵川，我是站在前輩的肩膀上才能看的更遠(yuǎn)的......

原作者教程鏈接：http://www.reibang.com/p/81287da2136b