繼上一篇文章對framerjs做了介紹，下面我們就開始學(xué)習(xí)吧凸椿。我會先將原文翻譯過來翅溺，最后會用這些知識做一個demo髓抑。一般framerjs使用“#”來表示注釋优幸，同時其代碼結(jié)尾也不需要“;”，如果寫完了直接換行羹饰，但是最好對齊哦跛璧。
print方法在你運行時查看變量很有作用。它和console.log類似追城，只有在使用print時，輸出值才會直接顯示在你的原型中迷帜。注意你只需要在Javascript中使用print()（不是在CoffeeScript中）色洞，后面的文檔中不再提（這一句是直譯的，不太明白具體意思）锦针。
print "Hello" # 屏幕會輸出 "Hello"
你可以用它來查看任何類型的值置蜀，甚至在同一時間輸出多個。
layerA = new Layer({x:20, name:"Hi"})
# 輸出一個單獨的值
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è)計中我們需要這些值。
好像這一節(jié)不太好舉例子肥荔，不如我就簡單介紹一下我對framerjs的理解朝群。framerjs在設(shè)計交互效果時，最基本的結(jié)構(gòu)就是layer（層）誉帅，通過layer把一層層的東西疊加在一起谭期，通過對layer的屬性控制來表現(xiàn)不同的樣式。這些layer可以是一個文本框隧出，也可以是一個圖片，同時一個layer里面還可以包含子layer针余，像是文件夾一樣把東西分類凄诞。
由layer后來又延伸出SCROLLCOMPONENT
、PAGECOMPONENT
伪朽、BACKGROUNDLAYER
和VIDEOLAYER
汛蝙，這其實是為了適應(yīng)不同的設(shè)計需要產(chǎn)生的一些特殊layer。比如scrollcomponent是一個可以滾動瀏覽的layer坚洽，pagecomponent是一個可以翻頁的layer西土，backgroundlayer是一個包含整個canvas的layer，videolayer是一個加載視頻的layer。
理解了這些般甲，做一個交互原型的時候就好理解了庐舟，我們只需要把這個原型分解成不同的層級，再按位置疊加在一起就可以了。
※本文系翻譯文章滔岳，轉(zhuǎn)載請務(wù)必注明：轉(zhuǎn)載自leadream的簡書。謝謝摊求！※
