下载教程文件**
·····密码: ahgt**
选择对应名称的文件夹下载，内包含一个（开始）和一个（已完成）文件；（开始）文件用来和教程同步操作，（已完成）是最终结果。
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 中跟在其他的设计工具一样，还可以使用遮罩来创建高级互动和动画。这次我们要实现灯箱效果开和关时照片圆角半径的变化。下载教程文件。
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.
打开标记为（开始）的文件，已经配置好了点击图片灯箱效果的开关交互。现在我们只需要做的最后一件事，给图片设置圆角的变化。
当在对话列表内时，图像半径为28，扩展为灯箱时，半径为0（无半径）。
This Image should have rounded corners within the conversation thread.
这种状态下应该要有圆角。
Preparing a mask layer 准备一个剪切蒙版图层
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 图层没有圆角属性。要给图像创建半径，需要使用具有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 图层放在和图像相同的组内，图像下层。
因为图像层将被蒙上圆角矩形。
Creating a mask 创建一个蒙版图层
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 图层，点击导航栏 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.
图像现在被蒙版成了圆形矩形的形状。修改 Rounded Rectangle 图层的属性会应用在 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`. 圆角矩形的尺寸调对了的话位置坐标应该都是 0 。
Transitioning with a mask 转换圆角动画
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.
当 Image 接收到 Tap 并转换到 lightbox 时，我们希望 Radius 为 0。Transition 模块已经添加到编辑器中了，所以动画从28开始，以0结束。
Our top-most Transition patch has values already added.
最上面的 Transition 模块就是给圆角半径变换准备的，值已经填好了。
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.
如果原型跟预期的不一样，检查图层的顺序，并确定是给 Rounded Rectangle 图层添加剪切蒙版的。
检查图层面板，查看哪些图层和剪切蒙版相互影响，由符号表示。
The downward arrow shows the layer *being* masked. The corner-glyph shows which layer is acting as the mask.
又向下箭头的是被剪切的图层。右下角有个小图标的是蒙版图层。
相关课程
4.添加逻辑 Adding Logic
给过渡和流程添加逻辑。
7. 切换屏幕 Screen Transitions
创建屏幕切换流程。
相关案例
3. Messenger Photo View
图片在对话和全屏模式之间切换的动画。
相关图层
Image File Rounded Rectangle
NEXT UP
11. 介绍循环 Introduction to Loops
使用循环降低原型复杂度，复用常见元素能节省时间。
网友评论