前言

其實(shí)這個(gè)教程是我在原版教程的基礎(chǔ)上經(jīng)過(guò)一些實(shí)驗(yàn)后從新得出的更完善的方法，在此為各位補(bǔ)足遺漏的部分以及一些改良后的效果，希望大家喜歡之余，為我點(diǎn)個(gè)贊，感謝:pray:

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

AnimateMate插件的安裝

sketch有兩種安裝插件的方法，一種是傳統(tǒng)的安裝方式，即將插件解壓后放到Plugins文件目錄下，重啟sketch即可。但是這種安裝方法需要一個(gè)個(gè)的去找插件，非常麻煩。我這里給大家介紹第二種安裝插件的方法，就是先下載一個(gè)sketch插件管理工具sktch toolbox，通過(guò)sketch toolbox可以很方便的對(duì)插件進(jìn)行安裝和卸載，就像xcode下的Alcatraz一樣。這里加上sketch toolbox的下載地址。下載并安裝后即可使用。打開(kāi)sketch toolbox，然后搜索AimateMate插件，點(diǎn)擊install即可安裝，簡(jiǎn)單吧。

AnimateMate插件使用

一. 功能介紹

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

1、Create Animation(快捷鍵：cmd+con+opt+K)：創(chuàng)建基本動(dòng)畫(huà)，包括Postion，Size，Transform，Opacity等屬性的動(dòng)畫(huà)

2、Edit Animation(快捷鍵：cmd+con+opt+L)：編輯動(dòng)畫(huà)，對(duì)動(dòng)畫(huà)的屬性值進(jìn)行編輯。

3、Delete Animation(快捷鍵：cmd+con+opt+D)：刪除動(dòng)畫(huà)，如果動(dòng)畫(huà)不需要了，可以通過(guò)該功能進(jìn)行刪除。

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

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

6、Export Animation：導(dǎo)出動(dòng)畫(huà)，選擇對(duì)應(yīng)的畫(huà)板把動(dòng)畫(huà)導(dǎo)出。導(dǎo)出動(dòng)畫(huà)如果選擇單個(gè)圖層來(lái)導(dǎo)出，那么將只會(huì)導(dǎo)出這個(gè)圖層的動(dòng)畫(huà)效果，其他圖層的動(dòng)畫(huà)將被忽略，所以我們一般選擇對(duì)應(yīng)的畫(huà)板來(lái)導(dǎo)出整個(gè)畫(huà)板的動(dòng)畫(huà)。導(dǎo)出動(dòng)畫(huà)可以既可以導(dǎo)出png圖片集合也可以導(dǎo)出gif動(dòng)畫(huà)。

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

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

1、Properties：屬性的變化。AnimateMate支持Position(x和y)、Size(Width和Height)、Trasform(Rotate)、Opacity等屬性的動(dòng)畫(huà)。

2、Keyframe Number：即為關(guān)鍵幀的個(gè)數(shù)。關(guān)鍵幀的個(gè)數(shù)決定著動(dòng)畫(huà)執(zhí)行的長(zhǎng)短。

3、Easing Type：Easing Type即為動(dòng)畫(huà)過(guò)渡效果。Easing是jQuery自定義動(dòng)畫(huà)用來(lái)設(shè)置動(dòng)畫(huà)過(guò)度效果的一個(gè)參數(shù)，在jQuery Easing Plugin中提供了如linearEase、easeOutExpo、easeOutBounce等30多種效果。AnimateMate插件同樣也提供了所有的效果供大家使用，大家可以點(diǎn)擊這里去看每一種easing的演示效果。

AnimateMate實(shí)踐演示

Position動(dòng)畫(huà)

1.1 position動(dòng)畫(huà)最終實(shí)現(xiàn)的效果

1.2 首先創(chuàng)建一個(gè)200x200的畫(huà)板，命名為position，然后畫(huà)一個(gè)大小為140x140的圓，命名為out_circle，填充顏色為#5AC8FF；Borders大小為6，顏色為#f6f6f6。再畫(huà)一個(gè)大小為26x26大小的圓，命名為in_layer，填充顏色為白色。

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

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

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

1.6 創(chuàng)建第10幀的動(dòng)畫(huà)(我總共設(shè)置了40幀動(dòng)畫(huà)，每一次轉(zhuǎn)折為10個(gè)幀，如果你覺(jué)得10個(gè)幀運(yùn)動(dòng)太快，可以添加關(guān)鍵幀的個(gè)數(shù))。keyframe Number為10，Easing Type保持默認(rèn)值linearEase。

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

1.8 創(chuàng)建第20幀的動(dòng)畫(huà)。keyframe Number為20，Easing Type保持默認(rèn)值linearEase。

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

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

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

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

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

2.Size動(dòng)畫(huà)

2.1 size動(dòng)畫(huà)最終實(shí)現(xiàn)的效果

原版教程中的動(dòng)畫(huà)效果有些突兀，并不是非常流暢，后來(lái)我增加了一個(gè)步驟，看起來(lái)就流暢了許多，現(xiàn)在看一下原版和我改后的效果。

size(原版).gif

bigandsmall.gif

2.2 copy一份position畫(huà)板，并命名為size。

2.3 選中in_circle，選擇Plugins->AnimateMate->Delete Animation刪除in_layer上的動(dòng)畫(huà)效果。

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

2.5 創(chuàng)建第0幀的動(dòng)畫(huà)。keyframe Number為0，Easing Type保持默認(rèn)值linearEase(傻瓜式操作開(kāi)始)。

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

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

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

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

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

Transform動(dòng)畫(huà)

3.1 transform動(dòng)畫(huà)最終實(shí)現(xiàn)效果

circle.gif

3.2 copy一份position畫(huà)板，命名為transform。

3.3 選中in_circle和out_circle建成組Group。

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

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

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

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

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

Opacity動(dòng)畫(huà)

4.1 opacity動(dòng)畫(huà)最終實(shí)現(xiàn)效果的

原版的效果還是一如既往的有些突兀，于是我又稍作修改，增加了一個(gè)步驟。以下是原版和我改后的版本。

原版.gif

opacity.gif

怎么樣？看起來(lái)是不是更加自然？

4.2 copy一份size畫(huà)板，命名為opacity。

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

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

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

4.6 創(chuàng)建第30幀的動(dòng)畫(huà)。keyframe Number為30，Easing Type保持默認(rèn)值linearEase。

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

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

4.9 選中opacity畫(huà)板，選擇Plugins->AnimateMate->Export Animation導(dǎo)出動(dòng)畫(huà)即可(我不想再說(shuō)設(shè)置GIF Animation了:joy:)。

組合動(dòng)畫(huà)

以上所有的動(dòng)畫(huà)中都是單個(gè)圖層在進(jìn)行動(dòng)畫(huà)，那么問(wèn)題來(lái)了，當(dāng)我們要設(shè)置多個(gè)圖層一起進(jìn)行動(dòng)畫(huà)該如何處理。

有兩種情況，一種是多個(gè)圖層之間做的動(dòng)畫(huà)是相同的；一種是多個(gè)圖層之間做的動(dòng)畫(huà)是不同的。

當(dāng)多個(gè)圖層所做的動(dòng)畫(huà)是相同的時(shí)候，那么我們?cè)谠O(shè)置動(dòng)畫(huà)的時(shí)候可以同時(shí)選中多個(gè)圖層。當(dāng)多個(gè)圖層所做的動(dòng)畫(huà)不相同時(shí)，比如我要讓兩個(gè)圓一個(gè)做放大動(dòng)畫(huà)一個(gè)做縮小動(dòng)畫(huà)，那么我們就可以分別對(duì)這兩個(gè)圓設(shè)置動(dòng)畫(huà)即可。

5.1 group動(dòng)畫(huà)的最終實(shí)現(xiàn)效果

原版的和我改良后的效果對(duì)比

原版.gif

group.gif

5.2 copy一份position畫(huà)板，命名為group。將in_circle放到中間位置，其填充顏色為白色不變。

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

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

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

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

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

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

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

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

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幀的動(dòng)畫(huà)。keyframe Number為40，Easing Type保持默認(rèn)值linearEase。

(同上，不貼圖～～)

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

Easing Type的使用

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

6.1 easing動(dòng)畫(huà)的最終實(shí)現(xiàn)效果

29.gif

6.2 copy一份position畫(huà)板，命名為easing。將in_circle放到中間位置。

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

6.4 創(chuàng)建第0幀的動(dòng)畫(huà)。keyframe Number為0，Easing Type設(shè)置為easeOutElastic。

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

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

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

總結(jié)：

這個(gè)教程是我在看過(guò)原作者教程后，發(fā)現(xiàn)其中的一些小問(wèn)題，以及原作者遺漏的一些步驟，決定將其補(bǔ)足，希望對(duì)各位有所幫助。其中許多步驟事實(shí)上可以按照自己的想法自由更改，大家可以自行嘗試，也能做出屬于自己想法的小動(dòng)畫(huà)來(lái)。不過(guò)AnimateMate制作動(dòng)畫(huà)也是有其局限性的，對(duì)于非線(xiàn)性動(dòng)畫(huà)AnimateMate還是無(wú)能為力的。另外，向原作者wythetan致敬，我是站在前輩的肩膀上才能看的更遠(yuǎn)的......

總結(jié)

以上是生活随笔為你收集整理的sketch制作Android动画,Sketch制作GIF动画——基础篇(改良版)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。