Origami Studio 教程 - 第三节 和代码的区别

瞅瞅和编程有的区别。

在 Origami 原型中使用函数和添加逻辑很简单，但如果以编程的角度出发可能会有跟您预期的有一些不一样。如果以前没有接触过代码，可以跳这篇直接学习如何添加逻辑。

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

▲▲

1. 模块和函数

Origami 中的基本构建块称为模块。

它们和函数能类似，获取数据输入，对其执行操作，并产生结果。

function name(input1, input2, input3) {
code to be outputted}

▲ 代码中函数的格式。

Origami 模块的工作方式和这个一样，接收单个或多个输入，执行动作，并产生输出 - 尽管格式稍微不同。

▲ 模块的格式。

Origam 使用的是一套预制的模块，让您可以监听各种类型的交互，创建自然的动画，控制图层属性等等。跟函数在程序中一样，也可以封装自定义模块。

输入和输出

我们以将华氏度转换为摄氏度为例，华氏度是输入值，摄氏度时返回值或输出值。

在编程语言，如JavaScript中，看着是这样的：

function fahrenheitToCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
var text = fahrenheitToCelsius(86);

▲ 将华氏转换为摄氏度的 JavaScript 函数。

默认情况下，模块的计算公式将被隐藏。只简单地显示输入和输出值。

板栗：模块库里没有这个模块，不知道怎么弄出来的。

▲ Origami 模块将华氏度转为摄氏度

点击菜单栏 Patch > Enter Patch Group 快捷键 Cmd ↓ 进入这个自定义模块内部，显示与代码中相同的计算。

▲ 模块的内部运算。

要注意的一个重要事情是计算的顺序。代码通常遵循传统的数学运算顺序；优先计算乘、除（/、 *）其次计算加、减（ +，- ）。Origami 根据模块的连接顺序进行计算。

多重输出

多重输出在 Origami 中也很简单。这意味着模块可以超出通常使用的功能。例如，这里是我们的温度计算模块超过华氏摄氏度：

▲ 温度转换模块输出多个值。

补丁内计算的值只需要作为输出发布：

▲ 内部工作的多个模块。

▲▲

2. 逻辑和条件

逻辑在代码中称为条件，和 Origami 处理逻辑的方式有些不同。代码通常从上到下线性运行的，需要在移动到下一行之前进行计算。

在 Origami 的可视化模块编辑器中，信息从左到右（包括逻辑操作）依赖于与什么进行交互和／或触发。因此，您不会找到类似于代码中的 if, else, else if 或 while 之类的模块。相反，信息通过模块（一般来自交互）后会继续流动，除非值为 false。

▲▲

3. 数学

数学在 Origami 中大部分和代码里的算数运算符一样。Origami 有大多数标准运算符模块。

3+2
3-2
3*2
3/2

▲ 代码中的简单算数。

▲ Origami 中的简单算数。

▲▲

4. 比较

Origami 能够取值并输出一个真或假的布尔值，和代码中的比较运算符一样。

3>2

3

▲ 代码里简单的比较

▲ Origami 中简单的比较。

▲▲

5. 与逻辑比较

这是开始有差异的地方。Origami 有内置的模块，可以快速、轻松地完成通用逻辑。例如：

3>=2

▲ 代码中的比较。

▲ Origami 中与逻辑的比较。

在代码中，逻辑运算符通常与比较运算符配对（如上所示）。折纸可以使用通用逻辑模块进行比较：

&&
!
||

▲ 代码中的比较运算符。

▲ Origami 中的比较运算符。

这些模块可用于检查条件 - 类似于if或else。举个例子检查计算是否成立：

if (3>2 && (2==3||23) {
code to be executed if true
}

Origami 的信息从左向右流动 (类似于上面的 to 3>2 && (2==3||23)，并输出 true 或 false，由 And 模块输出口表示：

链接多个计算在代码中可能变得复杂，难以管理。这个任务在内置 Origami 时变得直观灵活。

来源：UI中国

关键字：产品经理

版权声明

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