之前的Framer教程都是按照個人喜好去寫的钥勋，沒有按照難易程度形成系列厨幻。為了讓大家能更好地入門掰吕，我準備由易到難寫一個系列教程俊抵，盡量保持在每周一篇的頻率先煎。
導讀：動畫一般和圖層一起用赏枚，它可以讓圖層動起來瓶蝴。我們可以通過一系列屬性孝偎，諸如執(zhí)行動畫的圖層、需要變化的可視屬性本冲、動畫時間准脂、動畫延遲時間等，來定義一個動畫檬洞。動畫也提供了一些函數(shù)可以讓你控制它的開始狸膏、結束和反向。
這里先介紹一下動畫添怔。在Framer中湾戳，動畫是相對于圖層來說的，也就是說我們可以給某個圖層定義一個不同的樣式广料，讓該圖層從最開始的默認樣式到這個樣式之間產(chǎn)生一段平穩(wěn)的過渡變換就形成了動畫砾脑。比如說一個圖層的寬度由200像素慢慢變成400像素，就是一段動畫艾杏。我們無需關心這中間是怎樣變化的韧衣，只需要定義開始和結束狀態(tài)的樣式，就可以讓它自己產(chǎn)生一段動畫购桑。
和圖層一樣畅铭，動畫也是一個對象，但是沒有圖層那么直觀勃蜘，它有點抽象硕噩。你可以理解為，這個動畫對象存儲了一系列動畫設置的數(shù)據(jù)缭贡。它存儲的屬性值有做變化的圖層炉擅、做變化的屬性、運動曲線阳惹、運動時間谍失、延遲時間、重復次數(shù)莹汤、顏色模式等袱贮。
看我們通過這個實例來看動畫對象怎么用吧。在上一次的基礎上体啰，我們繼續(xù)編寫代碼讓這個擺針動起來攒巍。
上次那些圖層對應的代碼很長，我們接著后面寫會越來越長荒勇，會把自己看暈的柒莉。不過沒關系，F(xiàn)ramer提供了代碼折疊功能沽翔，可以選中一部分代碼使其折疊兢孝，需要時再展開窿凤。
將代碼折疊后，在后面添加如下代碼跨蟹■ㄊ猓可以看到，和創(chuàng)建圖層一樣窗轩，我們也使用了關鍵詞new來創(chuàng)建一個Animation對象夯秃，我給他起名為：swingingAnimation。后面分別設置它的運動時間是2s痢艺，延遲1s執(zhí)行仓洼，需要執(zhí)行動畫的圖層是swing，需要變化的屬性是它的轉動角度堤舒。最后通過動畫對象自帶的“開始動畫”方法start()來執(zhí)行動畫色建。
因為延遲1秒，所以等待1秒之后我們就可以看見效果啦舌缤。
等等箕戳，好像有點不對，它不是從右上角轉軸處開始轉的国撵，而是從正中心開始旋轉陵吸。我們需要把他的變換中心放置在右上角轉軸處，這樣就可以讓它繞著轉軸旋轉啦卸留。所謂變換中心，你應該在Ps或者Sketch中接觸過椭豫，如下圖耻瑟。
所以在這里我們應該給圖層swing添加兩個屬性originX和originY，他們的取值范圍都是0到1赏酥。如果originX等于0喳整，就代表其變換中心在左邊緣，如果originX等于1裸扶，就代表其變換中心在右邊緣框都，originY則是相對于上下邊緣。
雙擊被折疊的代碼進入編輯呵晨，給它增加變換中心屬性魏保。
在Framer中，變換中心也可以像在Ps中調節(jié)的摸屠，但是沒有那么好用谓罗。進入swing的設計模式，按住Command鍵季二，圖層上會出現(xiàn)一個半透明黑色的圓點檩咱，它就是變換中心揭措。拖動它就可以改變它的位置，但是我操作時由于該圖層太小而且它總是會被旁邊的控制點（周圍六個白點）吸過去刻蚯，所以最后我還是直接調節(jié)數(shù)字慢慢試出來的绊含。
最后調好的效果就是這樣：
動畫還提供了一個方法reverse()，可以將動畫反向炊汹。如果將剛才做的動畫反向躬充，那么擺針擺到左邊后會再擺回到初始位置。需要注意的是兵扬，該方法不是將動畫“反向并執(zhí)行”麻裳，而只是“反向”，所以如果需要執(zhí)行需要再次調用start()方法器钟。
在最后加上這段代碼津坑，就可以看見擺針擺到左邊之后，又向右擺回到初始位置傲霸。
總結一下這一節(jié)所講的內(nèi)容：
1疆瑰、動畫也是一個對象，不過這個對象比較抽象昙啄。
2穆役、動畫需要和圖層結合使用，因為它是對圖層的可視屬性進行操作梳凛。
3耿币、動畫提供了start()、stop()和reverse()三個方法來控制動畫開始執(zhí)行韧拒、停止和反向淹接。
4、反向方法reverse()相當于新建了一個反過來的動畫對象叛溢，它不包含動畫開始指令塑悼。
點擊這里獲取源代碼和圖片素材，試著自己做一下楷掉，下回我們繼續(xù)使用這個播放器講解Framer的狀態(tài)厢蒜。
