繼上一篇文章對framerjs做了介紹，下面我們就開始學(xué)習(xí)吧。我會先將原文翻譯過來，最后會用這些知識做一個demo。一般framerjs使用“#”來表示注釋，同時其代碼結(jié)尾也不需要“;”，如果寫完了直接換行，但是最好對齊哦。
print方法在你運(yùn)行時查看變量很有作用。它和console.log類似，只有在使用print時，輸出值才會直接顯示在你的原型中。注意你只需要在Javascript中使用print()（不是在CoffeeScript中），后面的文檔中不再提（這一句是直譯的，不太明白具體意思）。
print "Hello" # 屏幕會輸出 "Hello"
你可以用它來查看任何類型的值，甚至在同一時間輸出多個。
layerA = new Layer({x:20, name:"Hi"})
# 輸出一個單獨(dú)的值
print layerA.x
# 輸出20
# 輸出多個值
print layerA.x, print layerA.opacity, layerA.name
# 輸出20, 1.0, "Hi"
Defaults
Framer.Defaults允許你為layers和動畫設(shè)置默認(rèn)的屬性值。例如，為了能夠看見所有新的layer，我們讓它們都有一個藍(lán)色的背景色，你可以在這里控制。
# 設(shè)置所有l(wèi)ayer背景色的默認(rèn)值為紅色
Framer.Defaults.Layer.backgroundColor = "red"
# 設(shè)置所有l(wèi)ayer的圓角半徑是10
Framer.Defaults.Layer.borderRadius = 10
layerA = new Layer()
print layerA.backgroundColor
# 輸出: "red"
print layerA.borderRadius
# 輸出: 10
下面是一個設(shè)置默認(rèn)動畫曲線的例子。值得注意的是，你在使用狀態(tài)轉(zhuǎn)換時也會使用該默認(rèn)值，除非你重新設(shè)置了ayer.states.animationOptions。
# 設(shè)置動畫曲線的默認(rèn)值
Framer.Defaults.Animation = {
curve: "spring(100,10,0)"
}
# 設(shè)置所有l(wèi)ayer的圓角半徑
Framer.Defaults.Layer.borderRadius = 10
layerA = new Layer()
layerA.animate({
properties: {x:100}
})
# 這個動畫將會使用 "spring(100,10,0)" 的彈性曲線
Canvas
Canvas對象包含的是當(dāng)前文檔的全部內(nèi)容的尺寸（像素），它會隨著你改變窗口大小而改變。
-
Canvas.width [number]
當(dāng)前文檔的寬度，它是只讀的。
print Canvas.width
# 輸出: 640
-
Canvas.height [number]
當(dāng)前文檔的高度，它是只讀的。
print Canvas.height
# 輸出: 480
-
Canvas.size [object]
當(dāng)前文檔的高度和寬度，它是只讀的。
print Canvas.size
# 輸出: {width:640, height:480}
Screen
Canvas對象包含的是當(dāng)前設(shè)備的屏幕尺寸（像素），它會隨著你改變設(shè)備而改變。如果設(shè)置設(shè)備全屏?xí)r，它就等于Canvas尺寸。
-
Screen.width [number]
當(dāng)前設(shè)備屏幕的寬度，它是只讀的。
print Screen.width
# 輸出: 640
-
Screen.height [number]
當(dāng)前設(shè)備屏幕的高度，它是只讀的。
print Screen.height
# 輸出: 1080
-
Screen.size [object]
當(dāng)前設(shè)備屏幕的高度和寬度，它是只讀的。
print Screen.size
# 輸出: {width:640, height:1080}
第一節(jié)我們就介紹這么多，其實(shí)只是介紹了一些基本屬性，但是在以后的設(shè)計中我們需要這些值。
好像這一節(jié)不太好舉例子，不如我就簡單介紹一下我對framerjs的理解。framerjs在設(shè)計交互效果時，最基本的結(jié)構(gòu)就是layer（層），通過layer把一層層的東西疊加在一起，通過對layer的屬性控制來表現(xiàn)不同的樣式。這些layer可以是一個文本框，也可以是一個圖片，同時一個layer里面還可以包含子layer，像是文件夾一樣把東西分類。
由layer后來又延伸出SCROLLCOMPONENT
、PAGECOMPONENT
、BACKGROUNDLAYER
和VIDEOLAYER
，這其實(shí)是為了適應(yīng)不同的設(shè)計需要產(chǎn)生的一些特殊layer。比如scrollcomponent是一個可以滾動瀏覽的layer，pagecomponent是一個可以翻頁的layer，backgroundlayer是一個包含整個canvas的layer，videolayer是一個加載視頻的layer。
理解了這些，做一個交互原型的時候就好理解了，我們只需要把這個原型分解成不同的層級，再按位置疊加在一起就可以了。
※本文系翻譯文章，轉(zhuǎn)載請務(wù)必注明：轉(zhuǎn)載自leadream的簡書。謝謝！※
