Origami Studio 官网教程 - 第一节 入门

官网教程翻译，共十二篇。

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

▲▲

1. 从Sketch导入

从Sketch等设计工具导入跟复制粘贴一样简单。首先打开教程文件夹中的 Sketch 文件，选择 Photo 图层，按 Cmd C 复制；打开教程文件夹中的 Origami 文件，按 Cmd V 粘贴。

回到 Sketch ，复制 Info 图层组，里面包含了文本、图标、渐变图层。到 Origami 粘贴。

板栗：粘贴时会弹出一个窗口，选择 OK 任然保留图层和可编辑属性，选择 Paste as Image Instead 则将图层组合并为一张图，不可再编辑。

▲ Sketch 的图层已经在 Mac 的剪切板上了。

▲▲

2. 界面

左边的是 查看器 ，是查看原型、和原型交互的通道。右侧有 图层窗口 和图层的 属性窗口 ，属性窗口列出了当前选中的图层的属性。

▲▲

3. 图层定位

首先选择 Photo 图层。现在看到的图片位置和在 Sketch 中不一样是居左显示的，我们希望居中显示，所以我们将锚点 Anchor 选择为中间的那个。Info 图层组也一样需要调整锚点，将它对齐屏幕的底部。

▲ 单击或拖拽更改锚点

▲▲

4. 添加交互

我们要做的第一件事是添加交互到 Photo 图层。将鼠标悬停在 Photo 图层上，点击 Touch 菜单，再点击 Tap。

现在有了第一个模块 - Interaction 交互（稍后会详细介绍该模块）。现在在查看器中点击照片，请注意看点击模时 Interaction 模块上的 Down 和 Tap 输出口；从两个输出口的闪烁可以观察到，当照片被按下时 Down 闪烁 ，释放时 Tap 闪烁。

▲ 点击照片时，Down 和 Tap 闪烁。

过渡值

如何实现在两个值之间放大和缩小呢？假设两个 Scale 值一个为原始值 1 ，一个为适应屏幕大小的值 0.38。所以下一个要添加的模块是 Transition 模块，因为我们要在两个值之间切换。双击编辑窗口或按 Cmd Enter 打开模块库 → 输入名称 Transition → 按 Enter 添加，或按 T 添加。

Transition 模块的 Start 接口值填写为 0.38，End 接口的值填写为 1，这是照片要缩放的范围值。

▲ 开始值 0.38，结束值 1。

连接模块

连接 Interaction 模块的 Down 输出口到 Transition 模块的 Progress 输入口。通过点击，从 Down 输出传递到 Transition 模块的 Progress 输入口来执行此操作。

▲ 连接了 Down 输出口

连接到图层属性

把 Transition 模块的输出口连接到 Photo 图层的缩放属性 Scale。跟上一步连接 Down 和 Progress 接口时一样，这样就能让模块和图层属性产生连接。

按住 Transition 模块的输出口并拖动到 Photo 图层属性窗口的 Scale 这个名称上（要先选中 Photo 图层，属性窗口才会显示 Photo 图层的属性），会自动生成一个又 Scale 属性的 Photo 模块。现在点击下照片，可以看到看 Transition 在0.38 和 1 之间立即发生变化。

▲▲

5. 添加动画

下一步要加动画了。添加一个 Pop Animation 模块 A 。

把 Pop Animation 模块添加到 Interaction 和 Transition 模块中间。Down 接口改为连接到 Pop Animation 的 Number 接入口，Pop Animation 的输出口 Progress 连接到 Transition 的 Progress 输入口。

板栗：先点一下 Down 或 Progress 接口，中间的线变成黄色了再按 A 可以快速的将 Pop Animation 添加到两个模块中间。这是在两个模块中间快速插入模块的方法。

信息从左至右流动

模块编辑器中的所有内容都从左向右流动。当轻点或按住照片时，这个过程就会启动-恢复或保持在启动状态。

▲▲

6. 点击状态

现在需要点击的时候激活过渡，现在是在按下的时候就激活了。试着将 Interaction 模块的 Tap 输出口连接到 Pop Animation 模块的 Number 接口。

板栗：前面说过了 Down 和 Tap 的区别，前者是指鼠标或手指按下时，后者是指鼠标或手指松开时。

▲ 创建一个新的连接会替换旧的。

再点击图片式一下，现在触发但不保持该状态。因为 Tap 只有最后一帧，在松开鼠标或手指时触发。

开关状态

现在在 Interaction 和 Pop Animation 之间添加一个 Switch 模块，按 Shift S 。就跟添加 Pop Animation 时一样，并改接口连接。

板栗：用了前面说的快速插模块方法没，用了的话接口就自动改好了。

现在点击 Photo 触发脉冲从 Switch 模块上的 Flip，到 Pop Animation 模块，再到 Transition 模块启动。直到下次点击 Photo 翻转开关前，该值将保持不变。

▲▲

7. 多次转换

大部分原型都可以通过 Interaction，Switch，Pop Animation，和 Transition 这几个模块实现。主要因为它们可以重复使用，并可扩展到其他交互上。

我们已经知道让 Text 图层隐藏和显示，或通过 Color Fill 图层改变背景颜色，原型都和刚刚控制图片缩放的一样。

现在再添加一个 Transition 模块。Pop Animation 的输出口连接到刚刚新加的 Transition 模块的 Progress 输入口。

点击并拖动输出口到 Info 图层组的不透明度属性 Opacity 上创建一个又 Opacity 属性的 Info 模块。

▲ 拖动到 Opacity 属性上添加这个属性的过渡。

现在希望图片缩小时文字等信息消失，图片放大时信息显示。所以连接到 Info 的 Transition 模块 Start 应为 0，End 应为 1，不需要做出任何改变。

▲ 现在模块和模块上的值应该是这样的。

更改过渡类型

最后，再添加一个 Transition 模块。右键或按住 Control 单击 Transition 模块，把 Type 下拉菜单中的 Number 改为 Color。

要把开始颜色设置为白色，结束颜色设置为黑色。像前面的 Transition 一样将 Pop Animation 的输出口连接到 Progress 输入口。

最后，连接 Transition 模块的 输出口到 Color Fill 图层的 Color 属性。

▲ 拖上去连接，自动添加一个属性模块到编辑器中。

最终实现的效果是：当照片被缩小（1 → 0.38）时，背景颜色从黑变白，照片放大时（0.38 → 1）背景颜色从白变黑。

来源：UI中国

关键字：产品经理

版权声明

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