[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的简书。谢谢!※

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本篇文章是基于谷歌有关Graphic的一篇概览文章的翻译:http://source.android.com/de...
    lee_3do阅读 7,214评论 2 21
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,593评论 0 17
  • linux资料总章2.1 1.0写的不好抱歉 但是2.0已经改了很多 但是错误还是无法避免 以后资料会慢慢更新 大...
    数据革命阅读 12,242评论 2 33
  • 蒋光头jL94430阅读 371评论 29 34
  • 纳兰玲珑/文 墨绿的河面 没有一丝涟漪 跳跃过小桥 悠扬的萨克斯漫出了竹林 路边的小狗擒住了肉骨头 欣喜地啃起来 ...
    纳兰玲珑阅读 365评论 3 15