2：Simple Animations

譯者注：從這一章開始，我們開學習一些簡單的動畫。

讓我們打開Framer試著創(chuàng)建一些簡單的動畫。

創(chuàng)建圖層

這段時間我們會先從一個小的矩形開始。
使用 new layer 在屏幕中創(chuàng)建一個新的元素。這是一個很特殊的用于創(chuàng)建對象的函數(shù)。如果我們賦予 new layer 一個結(jié)果變量，我們就可以通過引用這個結(jié)果來操作元素。

square = new Layer 

你會在屏幕上看見一個藍色的矩形。

img1.png

定制這個矩形這樣他就不只是一個扁平的藍塊了，我們可以給 new layer() 賦予一些參數(shù)。這個參數(shù)是可配置對象，你可以使用不同的屬性配置元素，比如寬度、高度、位置和外觀。

square = new layer (
  width : 200
  height : 200
  x : 100
  y : 100
)

img2.png

為了讓代碼可讀性更強，我們可以去掉括號。

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è)置曲線運動方式。為了學習更多的運動軌跡（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ù)介紹事件。