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 交互 ▶︎