2：Simple Animations
譯者注：從這一章開始译荞，我們開學(xué)習(xí)一些簡單的動畫诫欠。
讓我們打開Framer試著創(chuàng)建一些簡單的動畫抖拴。
創(chuàng)建圖層
這段時間我們會先從一個小的矩形開始铆遭。
使用 new layer 在屏幕中創(chuàng)建一個新的元素。這是一個很特殊的用于創(chuàng)建對象的函數(shù)笙僚。如果我們賦予 new layer 一個結(jié)果變量，我們就可以通過引用這個結(jié)果來操作元素灵再。
square = new Layer
你會在屏幕上看見一個藍色的矩形肋层。
定制這個矩形這樣他就不只是一個扁平的藍塊了，我們可以給 new layer() 賦予一些參數(shù)檬嘀。這個參數(shù)是可配置對象槽驶，你可以使用不同的屬性配置元素，比如寬度鸳兽、高度掂铐、位置和外觀。
square = new layer (
width : 200
height : 200
x : 100
y : 100
)
為了讓代碼可讀性更強揍异，我們可以去掉括號全陨。
square = new layer
width : 200
height : 200
CoffeeScript 中有很多例子中我們都可以去掉括號，就像上面這樣衷掷，有時候這會使代碼看起來更簡潔辱姨。
操作圖層
現(xiàn)在我們定義了變量 square 來表示圖層，我們可以繼續(xù)操作它戚嗅。在我們創(chuàng)建完圖層之后雨涛，我們可以隨時修改：
square.backgroundColor = "red"
square.x = 200
點的句法規(guī)則：這是因為 square 是一個對象。它具有 background 屬性及許多我們可以操作的其他屬性懦胞。
你可以操作一個圖層的坐標（x,y）替久，還有通過使用大多數(shù)CSS屬性的camel-cased （camelCased)寫法來操作圖層外觀，也包括一些framer內(nèi)建屬性躏尉。例如蚯根，color就用color表示，不過border-radius就寫成borderRadius胀糜。如果你想要旋轉(zhuǎn)一個元素颅拦，你可以操作framer提供的rotation屬性。FramerStudio會幫你自動創(chuàng)建大多數(shù)這樣的屬性名教藻，你也可以在 docs 中查看他們距帅。
動態(tài)圖層
讓我們來添加第一個動畫。為了讓一個圖層動起來怖竭，我們使用animate方法锥债。
square.animate()
.animate() 本身并不會做任何事情。我們需要配置對象（configuration object）來告訴它讓什么動起來，并且如何執(zhí)行動畫哮肚。一個配置對象會遵循這樣的形式：
configObject =
properties :
property : value
property : value
time : 1
curve : "ease"
delay : 2
time登夫、curve 和 delay屬性都是可選的，但是你需要指定一個甚至更多屬性給嵌套在properties（屬性）對象（它是一個嵌套在對象中的對象）中的動畫允趟。
例如恼策，如果我們想要一個矩形逐漸消失，我們就可以運用opacity屬性潮剪。默認情況下涣楷，opacity屬性會置1，所以我們將其設(shè)置為0抗碰。
square.animate
properties:
opacity : 0
我們可以很容易一次性轉(zhuǎn)變多種屬性：
square.animate
properties:
opacity : 0
x : 400
y : 400
rotation : 180
配置動畫
時間相關(guān)性的屬性（延時和時長）是精確到秒的狮斗。默認狀態(tài)下，動畫耗時1秒：
square.animate
properties:
opacity : 0
time : .2
備注：縮進在這里非常重要弧蝇。opacity（不透明度）是一種屬性碳褒，所以他需要在properties基礎(chǔ)上縮進用以表示從屬關(guān)系。而time則與properties縮進同樣的程度看疗，因為它是動畫的一個屬性沙峻，而不是動畫對象的屬性。
為了讓你的動畫更生動两芳，你可以設(shè)置曲線運動方式摔寨。為了學(xué)習(xí)更多的運動軌跡（curve），你可以查看easiness.net 和 framer docs怖辆。你可以使用內(nèi)建的漸變字符串例如ease-in（漸入）是复，ease-out（漸出）或者是ease-in-out（漸入漸出），亦或使用docs中更高級的函數(shù)竖螃，比如bezier-curve（貝塞爾曲線）佑笋、spring-dho（彈性曲線，坦白講這個我不確定更好的翻譯是什么斑鼻，有建議歡迎評論區(qū)留言，感謝）猎荠。
square.animate
properties :
x : 500
curve : "ease-in"
其他動畫示例
你可以運用repeat來讓任何動畫循環(huán)多次坚弱，delay可以是你的動畫產(chǎn)生延遲，delay是以秒為單位的关摇。
square.animate
properties :
opacity : 0
repeat : 4
delay : 2
截止這篇文章寫好后荒叶，我看到framer官網(wǎng)已經(jīng)更新，不過這些基礎(chǔ)的知識是不變的输虱，framer官網(wǎng)上也有很多語法或動效設(shè)計教程些楣，你可以參閱framer API。下一篇，我們將繼續(xù)介紹事件愁茁。
