之前的Framer教程都是按照個人喜好去寫的，沒有按照難易程度形成系列。為了讓大家能更好地入門，我準備由易到難寫一個系列教程，盡量保持在每周一篇的頻率。
導讀：動畫一般和圖層一起用，它可以讓圖層動起來。我們可以通過一系列屬性，諸如執行動畫的圖層、需要變化的可視屬性、動畫時間、動畫延遲時間等，來定義一個動畫。動畫也提供了一些函數可以讓你控制它的開始、結束和反向。
這里先介紹一下動畫。在Framer中，動畫是相對于圖層來說的，也就是說我們可以給某個圖層定義一個不同的樣式，讓該圖層從最開始的默認樣式到這個樣式之間產生一段平穩的過渡變換就形成了動畫。比如說一個圖層的寬度由200像素慢慢變成400像素，就是一段動畫。我們無需關心這中間是怎樣變化的，只需要定義開始和結束狀態的樣式，就可以讓它自己產生一段動畫。
和圖層一樣，動畫也是一個對象，但是沒有圖層那么直觀，它有點抽象。你可以理解為，這個動畫對象存儲了一系列動畫設置的數據。它存儲的屬性值有做變化的圖層、做變化的屬性、運動曲線、運動時間、延遲時間、重復次數、顏色模式等。
看我們通過這個實例來看動畫對象怎么用吧。在上一次的基礎上，我們繼續編寫代碼讓這個擺針動起來。
上次那些圖層對應的代碼很長，我們接著后面寫會越來越長，會把自己看暈的。不過沒關系，Framer提供了代碼折疊功能，可以選中一部分代碼使其折疊，需要時再展開。
將代碼折疊后，在后面添加如下代碼。可以看到，和創建圖層一樣，我們也使用了關鍵詞new來創建一個Animation對象，我給他起名為：swingingAnimation。后面分別設置它的運動時間是2s，延遲1s執行，需要執行動畫的圖層是swing，需要變化的屬性是它的轉動角度。最后通過動畫對象自帶的“開始動畫”方法start()來執行動畫。
因為延遲1秒，所以等待1秒之后我們就可以看見效果啦。
等等，好像有點不對，它不是從右上角轉軸處開始轉的，而是從正中心開始旋轉。我們需要把他的變換中心放置在右上角轉軸處，這樣就可以讓它繞著轉軸旋轉啦。所謂變換中心，你應該在Ps或者Sketch中接觸過，如下圖。
所以在這里我們應該給圖層swing添加兩個屬性originX和originY，他們的取值范圍都是0到1。如果originX等于0，就代表其變換中心在左邊緣，如果originX等于1，就代表其變換中心在右邊緣，originY則是相對于上下邊緣。
雙擊被折疊的代碼進入編輯，給它增加變換中心屬性。
在Framer中，變換中心也可以像在Ps中調節的，但是沒有那么好用。進入swing的設計模式，按住Command鍵，圖層上會出現一個半透明黑色的圓點，它就是變換中心。拖動它就可以改變它的位置，但是我操作時由于該圖層太小而且它總是會被旁邊的控制點（周圍六個白點）吸過去，所以最后我還是直接調節數字慢慢試出來的。
最后調好的效果就是這樣：
動畫還提供了一個方法reverse()，可以將動畫反向。如果將剛才做的動畫反向，那么擺針擺到左邊后會再擺回到初始位置。需要注意的是，該方法不是將動畫“反向并執行”，而只是“反向”，所以如果需要執行需要再次調用start()方法。
在最后加上這段代碼，就可以看見擺針擺到左邊之后，又向右擺回到初始位置。
總結一下這一節所講的內容：
1、動畫也是一個對象，不過這個對象比較抽象。
2、動畫需要和圖層結合使用，因為它是對圖層的可視屬性進行操作。
3、動畫提供了start()、stop()和reverse()三個方法來控制動畫開始執行、停止和反向。
4、反向方法reverse()相當于新建了一個反過來的動畫對象，它不包含動畫開始指令。
點擊這里獲取源代碼和圖片素材，試著自己做一下，下回我們繼續使用這個播放器講解Framer的狀態。
