要是用過任何一個設(shè)計軟件兒，那對圖層的概念應(yīng)該很熟悉了。沒有給圖層添加內(nèi)容前，一個圖層就是一個矩形。圖層里也可以包含圖片、視頻、音頻、文本等。
指定 Inserting & Targeting
插入圖層跟在設(shè)計模式中畫個東西，再切回代碼模式一樣簡單。
在設(shè)計模式中添加了圖層并指定 targetable 后，就已經(jīng)開始寫代碼了。要定位在Framer中添加的圖層，只用給圖層插入名稱，添加要添加的圖層。
# 給my_layer圖層指定一個動畫
my_layer.animate
y: 200
options:
time: 1
curve: Bezier.ease
屬性 Properties
圖層在Framer中屬性種類還是挺多的。所有的屬性都可以直接用代碼寫。在設(shè)計模式中創(chuàng)建的圖層定義屬性后，在代碼模式中還可以覆蓋原來的屬性的。比如設(shè)計模式創(chuàng)建了畫板A，并且給背景填充了紅色，在代碼模式中你可以再覆蓋成藍色：
A.backgroundColor = "#28affb"
瀏覽窗口中看到的背景色就變成了藍色。
圖層的屬性都可以做成可交互動畫，定義兩個不同的角度、縮放值、透明度就可以實現(xiàn)旋轉(zhuǎn)、縮放、隱藏等。
# 圖層layerB的圓角4pt
layerB.borderRadius = 4
# 圖層layerB的角度是45度
layerB.rotation = 45
# 圖層layerB的不透明度是50%
layerB.opacity = 0.5
# 圖層layerB的縮放是50%大
layerB.scale = 0.5
一個熟悉圖層屬性的方法是使用自動代碼，自動代碼什么意思呢，就是說Framer已經(jīng)把動畫、交互等變成了選項，只需要從窗口最左側(cè)的 Animate、State、Event、Snippet里選中你需要的動畫、狀態(tài)、事件等，代碼那兒就會自動寫好你剛選的操作和屬性。
位置 Positioning
圖層位置可以直接使用x、y定義，這倆屬性是指圖層左上那點到屏幕左上的距離。
# 圖層layerA的位置
layerA.x = 200
layerA.y = 200
圖層也可以用動態(tài)屬性定位。假設(shè)你想定圖層B相對與圖層A的位置，又不想手動計算倆圖層的中心點，可以用 midX、midY這類屬性，文檔中又全部關(guān)于定位屬性的說明。
# 圖層B的X軸對齊圖層A的x軸中心
layerB.x = layerA.midX
# 圖層B的y軸對齊圖層A的y軸中心
layerB.y = layerA.midY
用 Align 屬性可以在父層級內(nèi)居中 （center），如果圖層沒有父級那使用Align 標簽時對齊的是屏幕 。parent-child（父級 - 子級）層級關(guān)系可以在設(shè)計模式中定義，代碼模式中同樣可以覆蓋。圖層還可以只定水平方向或垂直方向的相對位置。下面是所有的對齊屬性：
- Align.left (x)
- Align.right (x)
- Align.top (y)
- Align.bottom (y)
- Align.center (x and y)
# layerB 父級是 layerA
layerB.parent = layerA
# 定義 layerB 對齊父級的右下角
layerB.x = Align.right
layerB.y = Align.bottom
層級 Hierarchy
設(shè)計模式中的組對應(yīng)代碼模式中的層級，同樣代碼模式中的層級可以覆蓋設(shè)計模式中的層級。被放在一個圖層中的圖層是子級 child，上層容器是父級 parent，圖層從父層級繼承屬性，如不透明度、位置。
# 兩個方法定義層級：layerB的父級是layerA、layerA添加一個子級layerB
layerB.parent = layerA
layerA.addChild(layerB)
如果需要把一個圖層放在另一個圖層的前面，可以用placeBefor，放在后面用 placeBehind。
layerA = new Layer
layerB = new Layer
# layerB 在 LayerA 上面
layerB.placeBefore(layerA)
暫時沒看到啥變化
圖層類型 Layer Types
圖層幾乎可以是背景、圖片、視頻、文字等等。在設(shè)計模式中可以添加標準圖層（就是指容器啦），然后在設(shè)計模式中將視頻、音頻插入到圖層。
例如要插入一個視頻，直接將文件拖拽到Framer的代碼編輯其中。
# 視頻
video = new VideoLayer
video: "fish.mp4"
文本圖層 Text Layers
可以直接在設(shè)計模式中添加文本，要給文本添加交互改變文字或顏色之類的，在代碼模式中用 TextLayer 圖層。文本圖層又自己的屬性，寬度高度可以自動計算也可以手動設(shè)置，取決于文字和樣式。
# 新建一個文本圖層
title = new TextLayer
text: "Hello!"
基本上文字樣式來源CSS。全部屬性查看文檔。
# 創(chuàng)建文本圖層
title = new TextLayer
text: "Hello!"
fontSize: 64
fontWeight: 600
x: Align.center
y: Align.center
可以用強大的模版控制文字的某一部分，或者做動畫。用{ }標簽框出文本的值。
# 用模板標簽創(chuàng)建文本圖層，speed 是可以被替換的值
layerA = new TextLayer
text: "{speed}KM/h"
# 再設(shè)置要用一個什么值替換 speed
layerA.template =
speed: 50
# 如果只有一個值可以用這個寫法，如果是有多個值就必需用??的寫法，不然不知道對應(yīng)的值是什么
layerA.template = 50
# 用這個兩個寫法預(yù)覽窗口中都會顯示 "50KN/h"
文本模版還可以用來設(shè)置固定的格式和計算各種值。
# 創(chuàng)建個文本圖層模板，這次來定兩個值
layerA = new TextLayer
text："{speed}{unit}/h"
# 設(shè)置模板的格式，值有兩位小數(shù)點
layerA.templateFormatter =
speed: (value) ->
Utils.round(value, 2)
# 值的動畫從 0 到 100
layerA.animate
template:
speed: 100
unit: "KM"
單個標簽可以用簡寫
layerA.templateFormatter = (value) ->
Utils.round(value, 2)
看完也不知道別的格式要咋定義啊！
