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.

所有的遮罩都是透明的,可以創(chuàng)建高級的遮罩如復合形狀的遮罩,基于組內圖層形狀的總和。
(板栗:不確定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標準組件可以更快速創(chuàng)建原型,并且組件庫正在逐步變的越來越全面。預裝組件在 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 .

創(chuàng)建自定義組件:選中要添加到組件的圖層按 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 交互 ??

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容