[framerjs文档翻译]原型还可以用代码写——基本概念（1）

继上一篇文章对framerjs做了介绍，下面我们就开始学习吧。我会先将原文翻译过来，最后会用这些知识做一个demo。一般framerjs使用“#”来表示注释，同时其代码结尾也不需要“;”，如果写完了直接换行，但是最好对齐哦。

Print

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的。谢谢！※