1.3 Layers 图层 - Basics 基础


Layers in Origami Studio are similar to layers in Sketch and Photoshop: every layer has style attributes (position, size, an image or color) and can be ordered and organized.

图层的作用在 Origami Studio 和在Sketch、Photoshop中是一样的:没个图层都有样式属性(位置坐标,尺寸,图片,颜色)并且可以排序和编组。

Add a layer with the layer insertion popover using Cmd Shift N or the + button in the toolbar.

Cmd Shift N 或点击工具栏的+打开 Insert Layer插入图层下拉框。


Layer Groups 图层组

Layers can be grouped by selecting any number of layers and pressing Cmd G. Layer groups in Origami Studio have their own size and position, and clip layers within.

在图层窗口中选中要编组的图层,按Cmd G编组。在Origami Studio中图层组也有自己的属性,组同时也是一个遮罩层。

Layer Properties 图层属性

Layer properties are similar to ports on patches. The values of these input ports determine the appearance of the layer.

图层属性和模块的接口相似,这些接口的值决定了层的外观。
(板栗:我觉得是和Sketch里的图层样式属性一样的啊)

Layer Property Patches 图层属性 Patches

To adjust layer properties via patches, click on the property in the inspector, and a blue layer property patch is created with the name of the layer and a single input port that writes a value to that port.

通过模块调整图层属性,点击属性窗口中的属性名称添加一个蓝色的图层属性模块 ,名称和图层的名称一样,这个模块上只有一个输入端口,改变端口的值更改外观。(板栗:更改模块上的值后属性窗口的值也变了。)

点击模块接口上的数字编辑。

You can also drag a cable directly from a patch to a layer property in the inspector.
If a property has multiple coordinates (ex: Position X/Y, Size W/H), you can click on the coordinate specifically, ex: X

还可以从其他模块的输出口直接拖连线到属性窗口的属性名称上。
如果一个属性有多个值(如:Position 位置X/Y,Size 大小W/H)还可以拖到其中一个具体的值上。

... or click on the property as a whole, ex: Position
或点击一个类的属性,如:Position 位置 (板栗:X/Y两个属性都有)

单击有多个值的属性(如:Position 位置、Size 尺寸、Rotation旋转)会自动插入Point 点模块,在Point 点 模块中会显示Z轴坐标,默认不显示。 (板栗:属性窗口中没有Z轴)

Masking 遮罩

Layers can be masked by other layers. Pressing Cmd Alt M will turn the layer to an alpha mask, clipping the layer right above it. To add additional layers to be masked, you can select the layers and press Cmd Alt Shift M.

图层可以作为其他图层的遮罩,按 Cmd Alt M 可以将图层转换为透明遮罩层,遮罩上一层的图层。添加被遮罩的层需选中层按Cmd Alt Shift M

All masks are alpha masks, which can let you do advanced masks like gradient masks or composite masks based on a group of shapes.

所有的遮罩都是透明的,可以创建高级的遮罩如复合形状的遮罩,基于组内图层形状的总和。
(板栗:不确定gradient masks是指什么)

Components 组件

There is a growing collection of pre-built components for quickly prototyping with standard components on Android or iOS. Components are listed in the layer insertion popover.

使用预装的 Android和iOS标准组件可以更快速创建原型,并且组件库正在逐步变的越来越全面。预装组件在 Insert Layer 插入图层下拉框中。

Create custom components by selecting layers and pressing Cmd Alt G to group them into a component. Double-click the component to enter it and make changes. Add it to your Library and share it with others by pressing Cmd Alt C .

创建自定义组件:选中要添加到组件的图层按 Cmd Alt G生成一个组件图层,双击组件编辑。按 Cmd Alt C 添加到组件库并分享给别人。(板栗:点击窗口左上角的汉堡图标返回)


Summary 总结

  • Layers are similar to layers in other apps like Sketch and Photoshop, and can be grouped and masked
  • Animate and change layers by clicking on layer properties in the inspector to add a corresponding patch in the Patch Editor.
  • Use pre-made components to speed up your workflow, and create your own library to share.
  • 图层的性质和Sketch、Photoshop一样,并且可以编组,做遮罩。
  • 通过在属性窗口单击图层属性名称给图层添加属性模块。
  • 使用预装组件可以提升效率,可以自定义组件到库中。

◀︎ Patches 模块Interactions 交互 ▶︎

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

推荐阅读更多精彩内容