继上一篇文章对framerjs做了介绍，下面我们就开始学习吧。我会先将原文翻译过来，最后会用这些知识做一个demo。一般framerjs使用“#”来表示注释，同时其代码结尾也不需要“;”，如果写完了直接换行，但是最好对齐哦。
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和动画设置默认的属性值。例如，为了能够看见所有新的layer，我们让它们都有一个蓝色的背景色，你可以在这里控制。
# 设置所有layer背景色的默认值为红色
Framer.Defaults.Layer.backgroundColor = "red"
# 设置所有layer的圆角半径是10
Framer.Defaults.Layer.borderRadius = 10
layerA = new Layer()
print layerA.backgroundColor
# 输出: "red"
print layerA.borderRadius
# 输出: 10
下面是一个设置默认动画曲线的例子。值得注意的是，你在使用状态转换时也会使用该默认值，除非你重新设置了ayer.states.animationOptions。
# 设置动画曲线的默认值
Framer.Defaults.Animation = {
curve: "spring(100,10,0)"
}
# 设置所有layer的圆角半径
Framer.Defaults.Layer.borderRadius = 10
layerA = new Layer()
layerA.animate({
properties: {x:100}
})
# 这个动画将会使用 "spring(100,10,0)" 的弹性曲线
Canvas
Canvas对象包含的是当前文档的全部内容的尺寸（像素），它会随着你改变窗口大小而改变。
-
Canvas.width [number]
当前文档的宽度，它是只读的。
print Canvas.width
# 输出: 640
-
Canvas.height [number]
当前文档的高度，它是只读的。
print Canvas.height
# 输出: 480
-
Canvas.size [object]
当前文档的高度和宽度，它是只读的。
print Canvas.size
# 输出: {width:640, height:480}
Screen
Canvas对象包含的是当前设备的屏幕尺寸（像素），它会随着你改变设备而改变。如果设置设备全屏时，它就等于Canvas尺寸。
-
Screen.width [number]
当前设备屏幕的宽度，它是只读的。
print Screen.width
# 输出: 640
-
Screen.height [number]
当前设备屏幕的高度，它是只读的。
print Screen.height
# 输出: 1080
-
Screen.size [object]
当前设备屏幕的高度和宽度，它是只读的。
print Screen.size
# 输出: {width:640, height:1080}
第一节我们就介绍这么多，其实只是介绍了一些基本属性，但是在以后的设计中我们需要这些值。
好像这一节不太好举例子，不如我就简单介绍一下我对framerjs的理解。framerjs在设计交互效果时，最基本的结构就是layer（层），通过layer把一层层的东西叠加在一起，通过对layer的属性控制来表现不同的样式。这些layer可以是一个文本框，也可以是一个图片，同时一个layer里面还可以包含子layer，像是文件夹一样把东西分类。
由layer后来又延伸出SCROLLCOMPONENT
、PAGECOMPONENT
、BACKGROUNDLAYER
和VIDEOLAYER
，这其实是为了适应不同的设计需要产生的一些特殊layer。比如scrollcomponent是一个可以滚动浏览的layer，pagecomponent是一个可以翻页的layer，backgroundlayer是一个包含整个canvas的layer，videolayer是一个加载视频的layer。
理解了这些，做一个交互原型的时候就好理解了，我们只需要把这个原型分解成不同的层级，再按位置叠加在一起就可以了。
※本文系翻译文章，转载请务必注明：转载自leadream的简书。谢谢！※
