前言

自從小tan上次出了一篇關(guān)于用Sketch制作自定義的APP下拉刷新GIF動(dòng)畫后，有不少小伙伴說期待出一篇關(guān)于Sketch制作GIF動(dòng)畫的詳細(xì)教程罐寨。由于前段時(shí)間小tan都在忙于私人的家事，一直都沒有及時(shí)的更新文章兽埃。正好趁著這舉國同慶奶稠，作為技術(shù)宅的我們都在家里百無聊賴的時(shí)間里為大家走一波赡盘，獻(xiàn)上大家期待已久的一篇文章。請(qǐng)叫我好先生权悟！

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

AnimateMate插件的安裝

sketch有兩種安裝插件的方法瘪菌，一種是傳統(tǒng)的安裝方式，即將插件解壓后放到Plugins文件目錄下嘹朗，重啟sketch即可师妙。但是這種安裝方法需要一個(gè)個(gè)的去找插件，非常麻煩屹培。
我這里給大家介紹第二種安裝插件的方法默穴，就是先下載一個(gè)sketch插件管理工具sktch toolbox，通過sketch toolbox可以很方便的對(duì)插件進(jìn)行安裝和卸載褪秀，就像xcode下的Alcatraz一樣媒吗。這里貼上sketch toolbox的下載地址甫何。下載并安裝后即可使用沛豌。打開sketch toolbox加派，然后搜索AimateMate插件娄琉，點(diǎn)擊install即可安裝城看，是不是很簡單炼鞠。

AnimateMate插件使用

1. 功能介紹

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

• Create Animation：創(chuàng)建基本動(dòng)畫阔逼，包括Postion拯辙，Size，Transform，Opacity等屬性的動(dòng)畫涯保。
• Edit Animation：編輯動(dòng)畫诉濒，對(duì)動(dòng)畫的屬性值進(jìn)行編輯。
• Delete Animation：刪除動(dòng)畫夕春，如果動(dòng)畫不需要了未荒，可以通過該功能進(jìn)行刪除。
• 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)。
• Reverse Keyframe：反轉(zhuǎn)一個(gè)范圍內(nèi)關(guān)鍵幀的動(dòng)畫倚搬。比如從0到10這10個(gè)關(guān)鍵幀中一個(gè)矩形的動(dòng)畫是從橫坐標(biāo)為10變?yōu)?00冶共。那么反轉(zhuǎn)這個(gè)矩形0到10關(guān)鍵幀之間的動(dòng)畫之后，該矩形的動(dòng)畫就變成了從橫坐標(biāo)為100變?yōu)?0每界。一般這個(gè)功能比較少用到捅僵。
• Export Animation：導(dǎo)出動(dòng)畫，選擇對(duì)應(yīng)的畫板把動(dòng)畫導(dǎo)出庙楚。導(dǎo)出動(dòng)畫如果選擇單個(gè)圖層來導(dǎo)出，那么將只會(huì)導(dǎo)出這個(gè)圖層的動(dòng)畫效果趴樱，其他圖層的動(dòng)畫將被忽略馒闷，所以我們一般選擇對(duì)應(yīng)的畫板來導(dǎo)出整個(gè)畫板的動(dòng)畫。導(dǎo)出動(dòng)畫可以既可以導(dǎo)出png圖片集合也可以導(dǎo)出gif動(dòng)畫叁征。

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

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

• Properties：屬性的變化金刁。AnimateMate支持Position（x和y）帅涂、Size（Width和Height）、Trasform（Rotate）尤蛮、Opacity等屬性的動(dòng)畫媳友。
• Keyframe Number：Keyframe Number即為關(guān)鍵幀的個(gè)數(shù)。關(guān)鍵幀的個(gè)數(shù)決定著動(dòng)畫執(zhí)行的長短产捞。
• Easing Type：Easing Type即為動(dòng)畫過度效果醇锚。Easing是jQuery自定義動(dòng)畫用來設(shè)置動(dòng)畫過度效果的一個(gè)參數(shù)，在jQuery Easing Plugin中提供了像linearEase、easeOutExpo焊唬、easeOutBounce等30多種效果恋昼。AnimateMate插件同樣也提供了所有的效果供大家使用，大家可以點(diǎn)擊這里去看每一種easing的演示效果赶促。

AnimateMate實(shí)踐演示

1. Position動(dòng)畫

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

position動(dòng)畫效果.gif

1.2 首先創(chuàng)建一個(gè)200x200的畫板液肌，命名為position，然后畫一個(gè)大小為140x140的圓鸥滨，命名為out_layer嗦哆，填充顏色為#F6F6F6；Borders大小為6婿滓，顏色為#F4F7F8老速。再畫一個(gè)大小為26x26大小的圓，命名為in_layer凸主，填充顏色為白色橘券。

創(chuàng)建畫板和圖層.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

1.13 選中position畫板诸老，選擇Plugins->AnimateMate->Export Animation導(dǎo)出動(dòng)畫即可。

2. Size動(dòng)畫

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

size動(dòng)畫的實(shí)現(xiàn)效果.gif

2.2 copy一份position畫板钳恕，并命名為size别伏。

copy畫板并命名.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

2.4 選擇in_layer厘肮，設(shè)置in_layer的大小為26x26。選擇Plugins->AnimateMate->Create Animation睦番。

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

2.6 選擇in_layer巩检，設(shè)置in_layer的大小為75x75。選擇Plugins->AnimateMate->Create Animation示启。

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

2.8 選中size畫板迟螺，選擇Plugins->AnimateMate->Export Animation導(dǎo)出動(dòng)畫即可。

3. Transform動(dòng)畫

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

transform動(dòng)畫實(shí)現(xiàn)效果.gif

3.2 copy一份position畫板舍咖，命名為transform矩父。

copy畫板并命名.png

3.3 選中in_layer和out_layer建成組Group。

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

3.8 選中transform畫板较店，選擇Plugins->AnimateMate->Export Animation導(dǎo)出動(dòng)畫即可士八。

4. Opacity動(dòng)畫

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

opacity動(dòng)畫實(shí)現(xiàn)效果.gif

4.2 copy一份size畫板，命名為opacity梁呈。

copy畫板并命名.png

4.3 選中in_layer婚度，設(shè)置其Opacity為100%，選擇Plugins->AnimateMate->Create Animation官卡。

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

4.5 選中in_layer哮翘，設(shè)置其Opacity為20%，選擇Plugins->AnimateMate->Create Animation毛秘。

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

4.7 選中opacity畫板艰匙，選擇Plugins->AnimateMate->Export Animation導(dǎo)出動(dòng)畫即可。

5. 組合動(dòng)畫

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

有兩種情況奋献，一種是多個(gè)圖層之間做的動(dòng)畫是相同的绊序；一種是多個(gè)圖層之間做的動(dòng)畫是不同的。
當(dāng)多個(gè)圖層所做的動(dòng)畫是相同的時(shí)候秽荞，那么我們?cè)谠O(shè)置動(dòng)畫的時(shí)候可以同時(shí)選中多個(gè)圖層骤公。當(dāng)多個(gè)圖層所做的動(dòng)畫不相同時(shí)，比如我要讓兩個(gè)圓一個(gè)做放大動(dòng)畫一個(gè)做縮小動(dòng)畫扬跋，那么我們就可以分別對(duì)這兩個(gè)圓設(shè)置動(dòng)畫即可阶捆。

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

group動(dòng)畫實(shí)現(xiàn)效果.gif

5.2 copy一份position畫板，命名為group钦听。將in_layer放到中間位置洒试，設(shè)置其填充顏色為紅色。

copy畫板并命名.png

5.3 選擇in_layer朴上，設(shè)置其大小為26x26垒棋，選擇Plugins->AnimateMate->Create Animation。

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

5.5 選擇in_layer涯捻，設(shè)置其大小為70x70税灌，選擇Plugins->AnimateMate->Create Animation酥馍。

設(shè)置屬性創(chuàng)建動(dòng)畫.png

5.6 創(chuàng)建in_layer的第20幀的動(dòng)畫逗鸣。keyframe Number為20贞让，Easing Type保持默認(rèn)值linearEase乍构。

設(shè)置屬性創(chuàng)建動(dòng)畫.png

5.7 選擇out_layer甜无，設(shè)置其大小為140x140，選擇Plugins->AnimateMate->Create Animation哥遮。

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

5.9 選擇out_layer元潘，設(shè)置其大小為78x78，選擇Plugins->AnimateMate->Create Animation君仆。

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

6. Easing Type的使用

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

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

easing動(dòng)畫實(shí)現(xiàn)效果.gif

6.2 copy一份position畫板，命名為easing店读。將in_layer放到中間位置嗦枢。

copy畫板并命名.png

6.3 選擇in_layer，設(shè)置其大小為26x26屯断，選擇Plugins->AnimateMate->Create Animation文虏。

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

設(shè)置屬性創(chuàng)建動(dòng)畫.png

6.5 選擇in_layer，設(shè)置其大小為75x75趴久，選擇Plugins->AnimateMate->Create Animation丸相。

設(shè)置屬性創(chuàng)建動(dòng)畫.png

6.6 創(chuàng)建第30幀的動(dòng)畫。keyframe Number為30彼棍，Easing Type這里可以隨意設(shè)置灭忠。

設(shè)置屬性創(chuàng)建動(dòng)畫.png

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

總結(jié)

本篇文章講述了AnimateMate插件制作GIF動(dòng)畫的原理和功能介紹更舞，并結(jié)合實(shí)際講述了常見屬性動(dòng)畫的實(shí)現(xiàn)和Easing Type的使用，目的是讓大家能夠快速上手坎吻。記住一點(diǎn)缆蝉，動(dòng)畫的制作方法是很簡單的，缺乏的還是想象力瘦真。不過AnimateMate制作動(dòng)畫也是有其局限性的刊头，對(duì)于非線性動(dòng)畫AnimateMate還是無能為力的。下一篇文章將會(huì)講述一些更高級(jí)的動(dòng)畫實(shí)現(xiàn)以及在使用AnimateMate制作動(dòng)畫過程中可能會(huì)遇到的一些問題诸尽。

這里我把文中所有的 sketch源文件 也提供出來原杂，供大家參考。有什么問題可以在評(píng)論區(qū)貼出來您机，也可以微博私信我穿肄。祝大家節(jié)日愉快。