02-Framer基础-Layers层

Dosen原创

开始学习Framerjs,边学边翻译,也加了一些我学习过程中的理解。写下来留作以后查阅,看官如果发现有地方写的不对请指出。转载请联系作者。


Layers      层


A layer is a rectangle that draws elements. Layers can display images, videos or text. Every layer inherits a set of default properties: width, height and a blue background.

层是一个绘制的矩形元素。层可以显示图片,视频或文字。每个层都继承一系列的默认属性:宽,高,和一个蓝色背景。

这段代码创建了一个位置在0.0,宽高为100px的层。


层的概念就像一个容器,所有可视元素都要放在这个容器里。





Properties      属性

A layers position, size and looks are defined by its properties. Besides being able to define an image, background, or video, you can also transform, hide layers, scale layers and more.

一个层的位置、尺寸,看起来的样子是通过它的属性来定义的。不光可以定义一个图片、背景或视频,你还可以对层进行移动、隐藏、缩放、等

这段代码创建了一个名字是layerB的层,颜色是#2DD7AA,宽高为60px,缩放值为1,描边3px。


You can also define and override properties after having created a layer.

你也可以在创建了一个层后对它的属性进行再定义、重写。

这段代码对layerB的描边,旋转,透明度,缩放属性进行了更改,再定义。



Positioning      位置

A layer can be positioned with its x and y properties. These values define the distance from the top-left corner of the canvas. The minX, minY, midX, midY, maxX and maxY values can also be used to position a layer.

一个层可以通过它的x,y属性进行定位。这些值表示层到视图左上角的距离。minX(左上角到图层最左的距离),minY(左上角到图层最顶的距离),midX(左上角到图层水平中心的距离),midY(左上角到图层垂直中心的距离),maxX(左上角到图层最右的距离),maxY(左上角到图层最底的距离),这些值也可以被用于定义层的位置。


The distance from the top-left corner of the canvas to the center of a layer can be calculated with midX and middy.

从视图左上角到层中心的距离可以用midX和midY计算。


You can center a layer within its superLayer (see Hierarchy), or on the screen by calling the center() function. Layers can also be exclusively centered horizontally or vertically.

你可以把一个层居中到它的父类层,或者使用center()方法。层就可以到中心点,或水平中心或垂直中心。



Hierarchy      层级

Layers can have a parent and/or children. Parent layers are called superLayers, and child layers are called subLayers. Layers inherit properties from their superLayers.

层可以有父层、子层。父层被称作superLayers(超级层?),子层被称作subLayers(节点层?)。层继承父层的属性。

这段代码两行的意思是一样的。第一行是指定layerB的父层为layerA,第二行是指定layerA的子层为layerB。



Layer types      层的类型

Layers can contain images, videos and text.

层可以容纳图片、视频、文字。

这段代码示例了添加不同类型元素的方法。



Summary      概要


— Layers are defined by properties

使用属性定义层。

— Layers have hierarchy and inherit properties from their parents

层有层级并且从它们的父类中继承属性。

— Layers can be transformed, scaled, masked, rotated and more

层可以被移动、缩放、遮罩、旋转,等。

— Layers can contain images, videos and text

层可以容纳图片、视频、文字。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • 转载:http://www.jianshu.com/p/32fcadd12108 每个UIView有一个伙伴称为l...
    F麦子阅读 5,914评论 0 13
  • 每个UIView有一个伙伴称为layer,一个CALayer。UIView实际上并没有把自己画到屏幕上;它绘制本身...
    shenzhenboy阅读 3,015评论 0 17
  • (1) 没错我是苏程程,我是一个妹子,喜欢一个男生很久了,身边的闺蜜都知道我对他的心意,我告诉...
    是声晚吖阅读 412评论 0 1
  • 各位敬爱的老师,亲爱的伙伴,大家晚上好!我是来自14级语文教育3班的孔德月,我今天演讲的题目是《修身尚德,从微小之...
    孔家月儿阅读 2,356评论 0 4
  • 昨天我回到家,泽泽奶奶说他叫姐姐了,若要说什么契机,我也很难说,后来我们认真地划拉了一下,泽泽除了几个较远的表姐,...
    绵绵泽泽阅读 211评论 0 0