Origami Studio 教程十 剪切蒙版

剪切蒙版在 Origami 中跟在其他的设计工具一样，还可以使用剪切蒙版来创建高级互动和动画。这次我们要实现灯箱效果开和关时照片圆角半径的变化。

开始前先下载好安装文件和教程文件。底下的网盘链接里有安装文件 、一个案例文件夹、一个教程文件夹；按自己的需要下载。

选择教程文件中对应名称的文件夹下载，内包含一个（开始）和一个（已完成）文件；（开始）文件用来和教程同步操作，（已完成）是最终结果。

▲▲

1. 配置

打开标记为（开始）的文件，已经配置好了点击图片灯箱效果的开关交互。现在我们只需要做的最后一件事，给图片设置圆角的变化。

当在对话列表内时，图像半径为 28，切换灯箱时，半径为 0（无半径）。

▲ 这种状态下应该要有圆角。

▲▲

2. 准备一个用于剪切蒙版的图层

Image 图层没有圆角属性。要给图像创建半径，需要使用具有 Radius 属性的层作剪切蒙版。

圆角矩形有 Radius 属性，所以我们用 Rounded Rectangle 图层。新建一 Rounded Rectangle 模块。

把 Rounded Rectangle 图层放在和图像相同的组内，图像下层。

因为图像层将被蒙上圆角矩形。

▲▲

3. 创建剪切蒙版

要给图像做剪切蒙版，需要选中 Rounded Rectangle 图层，点击导航栏 Layer > Use as Mask 快捷键 Alt Cmd M 。

▲ 要选择 Rounded Rectangle 图层。

编辑剪切蒙版

图像现在被蒙版成了圆形矩形的形状。修改 Rounded Rectangle 图层的属性会应用在 Image 图层上。

将 Rounded Rectangle 图层的大小、位置属性更改为和图像一样的。Image 的 Size 属性是 375×250。圆角是 28，所以 Radius 的值输入 28。

▲ 圆角矩形的尺寸调对了的话位置坐标应该都是 0 。

▲▲

4. 切换圆角动画

当 Image 接收到 Tap 并转换到 lightbox 时，我们希望 Radius 为 0。Transition 模块已经添加到编辑器中了，所以动画从28开始，以0结束。

▲ 最上面的 Transition 模块就是给圆角半径变换准备的，值已经填好了。

最后一步，把 Transition 模块的输出口连接到 Rounded Rectangle 图层的 Radius 属性。

▲ 按住拖动输出口到属性名称上。

如果原型跟预期的不一样，检查图层的顺序，并确定是给 Rounded Rectangle 图层添加剪切蒙版的。

检查图层面板，查看哪些图层和剪切蒙版相互影响，由符号表示。

有下箭头的是被剪切的图层。右下角有个小图标的是蒙版图层。

完

来源：UI中国

关键字：产品经理

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！