下載教程文件** ·····密碼: ahgt**

選擇對應(yīng)名稱的文件夾下載，內(nèi)包含一個（開始）和一個（已完成）文件；（開始）文件用來和教程同步操作，（已完成）是最終結(jié)果。

Add mask behavior to layers and their underlying children.

Masking in Origami is a lot like other design tools, with the added bonus of being able to use masks to create advanced interactions and animations. We are going to prototype Messenger photo radius changes, which occur on lightbox open and close. If you haven't already, download the tutorial files.

遮罩在 Origami 中跟在其他的設(shè)計工具一樣，還可以使用遮罩來創(chuàng)建高級互動和動畫。這次我們要實現(xiàn)燈箱效果開和關(guān)時照片圓角半徑的變化。下載教程文件。

Setting up 配置

We have already set up Image Container to change its Scale and Position properties to turn into a lightbox on Tap. The last thing we need to do is set a change in rounded-corners on Image itself. The Image needs a Radius of 28 when within-conversation, but a Radius of 0 (no Radius) when expanded to a lightbox.

打開標(biāo)記為（開始）的文件，已經(jīng)配置好了點擊圖片燈箱效果的開關(guān)交互?，F(xiàn)在我們只需要做的最后一件事，給圖片設(shè)置圓角的變化。
當(dāng)在對話列表內(nèi)時，圖像半徑為28，擴展為燈箱時，半徑為0（無半徑）。

This Image should have rounded corners within the conversation thread. 這種狀態(tài)下應(yīng)該要有圓角。

Preparing a mask layer 準(zhǔn)備一個剪切蒙版圖層

Image layers do not have a Radius property. To create a radius on the Image layer, we will need to use as layer type that does have a Radius property and use that as a mask.

Image 圖層沒有圓角屬性。要給圖像創(chuàng)建半徑，需要使用具有Radius屬性的層類型，并將其用作剪切蒙版。

Rounded Rectangle is a layer type that does have a Radius property. Click the New Layer button and type to find Rounded Rectangle. Press Return ? once it appears.

圓角矩形有 Radius 屬性，所以我們用 Rounded Rectangle 圖層。新建一個。

Place the new Rounded Rectangle layer in the same Group as Image, below the image itself. This is because our Image layer will be masked onto the Rounded Rectangle.

把 Rounded Rectangle 圖層放在和圖像相同的組內(nèi)，圖像下層。
因為圖像層將被蒙上圓角矩形。

Creating a mask 創(chuàng)建一個蒙版圖層

To mask Image, we need to select the layer we want to use as a mask (Rounded Rectangle) then navigate to Layer > Use as Mask ??M.

要給圖像做剪切蒙版，需要選中 Rounded Rectangle 圖層，點擊導(dǎo)航欄 Layer > Use as Mask Alt Cmd M。

Remember to have the Rounded Rectangle layer selected. 要選擇 Rounded Rectangle 圖層。

Editing a mask 編輯剪切蒙版

Image, directly above the Rounded Rectangle, is now masked to the shape of Rounded Rectangle. Changing any of the Rounded Rectangle properties will visually reflect on Image too.

圖像現(xiàn)在被蒙版成了圓形矩形的形狀。修改 Rounded Rectangle 圖層的屬性會應(yīng)用在 Image 圖層上。

Change the Rounded Rectangle Size and Position properties to match Image, since would like them to be the same. The Size property of Image is 375 by 250. Our desired Radius is 28.

將 Rounded Rectangle 圖層的大小、位置屬性更改為和圖像一樣的。Image 的 Size 屬性是375×250。圓角是 28，所以 Radius 的值輸入 28。

If you have followed correctly, the Position property should be already at `0`. 圓角矩形的尺寸調(diào)對了的話位置坐標(biāo)應(yīng)該都是 0 。

Transitioning with a mask 轉(zhuǎn)換圓角動畫

We would like the Radius to change to 0 when Image is receives a Tap and transitions to a lightbox. A Transition patch has already been prepared in the Patch Editor, so that the animation begins at 28 and ends at 0.

當(dāng) Image 接收到 Tap 并轉(zhuǎn)換到 lightbox 時，我們希望 Radius 為 0。Transition 模塊已經(jīng)添加到編輯器中了，所以動畫從28開始，以0結(jié)束。

Our top-most Transition patch has values already added. 最上面的 Transition 模塊就是給圓角半徑變換準(zhǔn)備的，值已經(jīng)填好了。

The last step is to connect the Transition patch output to the Radius property of the Rounded Rectangle. Go ahead and connect this. The Radius of mask now changes, which in turn changes the Image layer masked to this.

最后一步，把 Transition 模塊的輸出口連接到 Rounded Rectangle 圖層的 Radius 屬性。

Connect the Transition output to the Radius property by clicking and dragging to the Layers panel. 按住拖動輸出口到屬性名稱上。

If your prototype does not work properly, double-check the order of your layers, and make sure you have your Rounded Rectangle used as the mask. Inspect the Layers panel to see which layers and masks are affecting each other, indicated by symbols.

如果原型跟預(yù)期的不一樣，檢查圖層的順序，并確定是給 Rounded Rectangle 圖層添加剪切蒙版的。
檢查圖層面板，查看哪些圖層和剪切蒙版相互影響，由符號表示。

The downward arrow shows the layer *being* masked. The corner-glyph shows which layer is acting as the mask. 又向下箭頭的是被剪切的圖層。右下角有個小圖標(biāo)的是蒙版圖層。

相關(guān)課程

4.添加邏輯 Adding Logic
給過渡和流程添加邏輯。

7. 切換屏幕 Screen Transitions
創(chuàng)建屏幕切換流程。

相關(guān)案例

3. Messenger Photo View
圖片在對話和全屏模式之間切換的動畫。

相關(guān)圖層

Image File Rounded Rectangle

NEXT UP
11. 介紹循環(huán) Introduction to Loops
使用循環(huán)降低原型復(fù)雜度，復(fù)用常見元素能節(jié)省時間。