對(duì)于新手來(lái)說(shuō)磷蜀，快速學(xué)習(xí)的方法就是做簡(jiǎn)單的練習(xí)讓自己快速熟悉軟件和進(jìn)入狀態(tài)废亭。如何臨摹一個(gè)動(dòng)畫(huà)呢般渡，首先觀看動(dòng)畫(huà)懒豹，眼睛撲捉到他的幾次關(guān)鍵跳轉(zhuǎn)，然后分析它的初始狀態(tài)和結(jié)束狀態(tài)驯用，最后關(guān)注小的細(xì)節(jié)就是中間狀態(tài)脸秽。
然后女，打開(kāi)軟件蝴乔，對(duì)著例子先自己嘗試做记餐，自己嘗試解決問(wèn)題，最后真的不OK我們?cè)賮?lái)看源文件分析薇正。
這個(gè)例子包含的所有原件片酝，肉眼可見(jiàn)的幾個(gè)：
1.兩個(gè)長(zhǎng)方形
2.一個(gè)梯形+一個(gè)小三角形（仔細(xì)可以看出最后的三角形是兩個(gè)圖形拼接起來(lái)的）
3.文案PAUSE
4.文案PLAY
分析之后可以動(dòng)手做了
幾個(gè)重點(diǎn)：
1.圖形A變到圖形B的時(shí)候囚衔，圖層名字必須是一樣的，一樣的雕沿，一樣的练湿。。
2.command+D原地復(fù)制审轮，這個(gè)快捷鍵會(huì)用到很多次肥哎。
3.變化前和變化后的圖層名字，數(shù)量相同疾渣。
恩篡诽，可以開(kāi)始啦。
第一步新建一個(gè)新的文件榴捡，快鍵鍵command+N杈女。然后修改文件名以及保存位置，把畫(huà)板背景顏色改成黑色吊圾。
第二步在畫(huà)板上新建圖形碧信，剛才總結(jié)過(guò)的幾個(gè)圖形，不過(guò)這里的動(dòng)畫(huà)其實(shí)是遮擋動(dòng)畫(huà)街夭，所以一共需要6個(gè)原件來(lái)制作這個(gè)動(dòng)畫(huà)砰碴。
所有組件擺放位置及圖層關(guān)系如下：
下面調(diào)整各組件開(kāi)始時(shí)的狀態(tài)，上下遮擋與背景融為一體板丽，這樣視覺(jué)上就看不到上下遮擋了呈枉。
開(kāi)始時(shí)狀態(tài)
開(kāi)始時(shí)PLAY文案是看不到的，所以這里調(diào)整他的透明度為0埃碱。
文案
左右兩個(gè)矩形為顏色大小相同的兩個(gè)矩形猖辫。
結(jié)束時(shí)狀態(tài)
下面要制作結(jié)束時(shí)的狀態(tài)了，圖形結(jié)束后是三角形砚殿。PLAY透明度變成100啃憎。結(jié)束時(shí)的效果主要靠?jī)蓚€(gè)上下遮擋。
首先復(fù)制一個(gè)畫(huà)板似炎，點(diǎn)擊artboard 1官地，選中后快捷鍵command+D原地復(fù)制一個(gè)新的畫(huà)板。
畫(huà)板2池颈，就是結(jié)束狀態(tài)的畫(huà)板落萎，所以這里需要調(diào)整畫(huà)板2中各圖層狀態(tài)。
首先三角形是兩個(gè)拼接在一起的兩個(gè)矩形仆嗦，調(diào)整兩個(gè)矩形狀態(tài)如下辉阶，一長(zhǎng)一短兩個(gè)矩形。
然后調(diào)整文案的狀態(tài)，PLAY的透明度為100谆甜，PAUSE透明度改為0垃僚。
重點(diǎn)來(lái)了，在這里改調(diào)整上下兩個(gè)遮擋的位置规辱，首先是旋轉(zhuǎn)的操作冈在，選中上方遮擋，按著command鍵和鼠標(biāo)左鍵配合旋轉(zhuǎn)按摘，兩個(gè)遮擋旋轉(zhuǎn)角度相同方向相反包券，都是向內(nèi)旋轉(zhuǎn)，旋轉(zhuǎn)后如下炫贤。
最后溅固，細(xì)節(jié)調(diào)整，例如文案的左右滑動(dòng)兰珍。文案滑動(dòng)依然用到對(duì)齊侍郭。
第一個(gè)點(diǎn)擊
開(kāi)始和結(jié)束狀態(tài)都做完了，就剩下一個(gè)步驟了Ｂ雍印亮元！點(diǎn)擊畫(huà)板1會(huì)出現(xiàn)一個(gè)閃電按鈕，這里點(diǎn)擊閃電后會(huì)有很多種交互方式唠摹，這里選擇tap（就是點(diǎn)擊）爆捞，按住閃電不放發(fā)現(xiàn)會(huì)有一個(gè)箭頭出現(xiàn)，讓箭頭指向畫(huà)板2勾拉，第一個(gè)點(diǎn)擊就完成了煮甥。
時(shí)間條調(diào)整
第一個(gè)點(diǎn)擊完成后的動(dòng)態(tài)。
第一個(gè)點(diǎn)擊狀態(tài)完整后藕赞，我們只是從暫停到開(kāi)始成肘，但點(diǎn)擊開(kāi)始會(huì)變成暫停，這是一個(gè)循環(huán)斧蜕，所以還需要讓他變回來(lái)双霍。所以要從畫(huà)板2回到畫(huà)板1。同理批销，點(diǎn)擊畫(huà)板2的閃電指向畫(huà)板1洒闸。這樣我們的動(dòng)畫(huà)就完成了。
然后就是最后的效果了
最后在演示框點(diǎn)擊保存GIF就可以了风钻。
思考一下顷蟀，文案的左右滑動(dòng)是怎樣用對(duì)齊做得到的呢，我會(huì)在第2次的教程中解釋骡技。
