Code

幾乎所有的圖層屬性都可以做動畫，同一個動畫中可以定義多個屬性。完了還能定義動畫的屬性，事件、曲線、延遲等。

開始 Get Started

從定義圖層的不透明度開始了解動畫吧。先給圖層加 animate 標(biāo)簽，表示我要給這個圖層加動畫啦，然后再設(shè)置動畫要咋動。

# 圖層layerA的動畫是不透明度50%
layerA.animate
  opacity: 0.5

選項 Options

動畫可以被完全按照你想要的定制，改變動畫選項如時間、曲線和延遲。下邊兒這個表里面有動畫可以調(diào)節(jié)的選項：

• time（幾秒內(nèi)）
• curve（貝塞爾曲線、彈性）
• delay（幾秒內(nèi)）
• repeat（次數(shù)）
• colorModel（顏色模式rgb、hsl、husl）

Framer的動畫持續(xù)時間以秒為單位。關(guān)鍵字 options 用來定義動畫選項，在 options 下一行縮進(jìn)，表示 “現(xiàn)在寫的是動畫選項哦～”

# 加了曲線的動畫
layerA.animate
  rotation: 180
  borderRadius: 200
  options:
    curve: Bezier.ease
    time: 1

這段代碼翻譯過來就是：
layerA的動畫
旋轉(zhuǎn)：180度
描邊：200pt
動畫選項：
曲線：貝塞爾曲線的緩進(jìn)緩出
持續(xù)時間： 1 秒

緩動曲線 Easing Curves

動畫曲線還有挺多種可以選的，像線性Bezier.linear、緩進(jìn)緩出Bezier.ease，緩進(jìn)緩出Bezier.ease是Framer的默認(rèn)曲線，不另外設(shè)置的話就是這個。查看去全部的曲線標(biāo)簽和用法查看這兒。

• Bezier.ease
• Bezier.easeIn
• Bezier.easeOut
• Bezier.easeInOut

# 使用 ease 曲線的動畫
layerA.animate
 scale: 0.75
 options: 
   curve: Bezier.ease
   delay: 0
   time: 1

彈性曲線 Spring Curves

彈性曲線可以讓動畫看上去符合真實物理規(guī)律。彈性動畫中的彈力可以用 damping 定義，仍然允許定義動畫時長time。

layerA.animate
  scale: 0.75
  options: 
    curve: Spring(damping: 0.5)
    time: 0.5