交互神器 Facebook Origami

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2831 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近用到了一个非常强大的工具，这是一款由 facebook 出品的原型设计软件，老规矩我们先来看一下效果。大家也可以先进去官网看看效果Origami 官网

Origami 运行模拟器

我门在编辑 Origami 的时候，相应的效果图会直接运行在运行模拟器，我们可以在手机上安装 Origami 软件，这样就可以在真机实时获取运行效果了屏幕快照 2016-06-28 下午 4.32.07.png

Origami 图形编辑界面

Origami 提供了一个非常方便的图形界面编辑器，我们只需要简单的拖拽连线就可以实现很多复杂的交互。屏幕快照 2016-06-28 下午 3.54.11.png

Origami 组件

Origami 的编辑器，给我的直观感觉就是用图形在编程，因为他提供了非常多的组件（ Patch ，翻译不太准确，不过这种说法好像更好理解），每种组件都有特定的功能。组件提供端口（ Port ）我们可以理解为每个 Port 代表一个值，每个值通过连线来传递，左边的端口代表输入的数据，组件在接收左边端口传来的值后会对这些值进行处理然后把结果值输出在右边的端口。如果下图所示

可以看到 Device Info 组件，可以实时的获取设备的信息，然后通过右端口输出。而输出端口的参数又可以作为其他组件的输入端口的参数，以此类推。灵活的使用这些组件可以组合出强大的功能。我们来简单的修改一下上图的连线，如下图所示

屏幕快照 2016-06-28 下午 4.23.26.png 通过获取设备的旋转角度，然后实时的改变图层三维旋转信息，效果图如下

Pop animation

Origami 提供 Pop animation 组件， Pop animation 在交互动画来说是非常常用的一个动画库，他能够很好的体现于用户之间的交互，提供很多平滑，舒服的效果。毕竟都是 Facebook 自家的儿子，能够很好的支持。而且还有一个很重要的一点， Origami 支持动画的导出为代码，程序员直接可以使用这些导出的代码（从此程序员再也不会听到，“你说这个动画效果是不是快了”，）

屏幕快照 2016-06-28 下午 4.44.30.png

Origami 组件（ Patch ）介绍

组件是 Origami 的基石，熟悉了每个组件的功能 Origami 就算入门了，接下来介绍一下常见的组件

Layer

用来显示一张图片到屏幕（最常用的一个组件），如下图所示屏幕快照 2016-06-28 下午 5.57.19.png

输入端口参数说明 Enable ：（是否现实在屏幕上） Anchor ： Point （锚点）图片内的停泊点，就是把一张图片上的点座位准点，在移动到某个位置（ Position ）的时候，把这个锚点和位置对准。 Position ： Layer 所处的位置信息包括 X Y Z Rotation ： Layer 的旋转角度 XR YR ZR Width ： Layer 的宽度 Height ： Layer 的高度 Image ： Layer 显示的图片内容 Mask Image ：遮盖图片 Color ：背景色 Opacity ：透明度 Scale ：图片的放大比率

Interaction 2

用来获取点击在图层（ Layer ， Text Layer ， Hit Area 等等）或者屏幕的手势事件屏幕快照 2016-06-28 下午 6.26.41.png

注意：最上面右上角有一个输出，用于链接 Layer ，如果链接了 Layer ，就只接收该 Layer 的点击事件，如果没有链接默认是连到屏幕上（即能够接收所有的点击事件） Enable ：如果为 YES 的话就能够获得事件，如果为 NO 就获取不到事件 Down 、 Up 、 Tap 、 Drag 用于区分不同的触发事件

Hit Area

Hit Area 一般和 interaction 2 配合使用，用于设置点击的区域屏幕快照 2016-06-28 下午 7.50.55.png 一些重复出现的属性就不说了 Setup Mode ：用于设置模式，如果为 YES 则

Transition

可以样一个百分比值线性转化为，起点到终点之间的某个值

屏幕快照 2016-06-29 上午 9.49.17.png Progress ：百分比值 Start Value ：起点 End Value ：终点 Value ：转化后的值

Pop animation

可以样输入的值弹性的变化，屏幕快照 2016-06-28 下午 6.40.38.png

Number ：传入的参数需要设置的值 Bounciness ：弹性 Speed ：变化的速率 Progress ：弹性变化后输出的值

Scroll

让图层具备滚动功能屏幕快照 2016-06-28 下午 8.02.10.png Image ：要滚动的图片，一般与 Layer 的 Image 一致 XScrolling 、 YScrolling ：设置滚动的模式， page （每次滚一页）、 free （自由滚动）、 off （关闭滚动）

XPosition 、 YPosition ：实时计算输出滚动的位置 info ：滚动的额外信息、链接 Scroll Info 来查看

Swipe

用于监听滑动手势（上下划，左右滑），触发传动事件，会在两个位置之间来回传动

屏幕快照 2016-06-28 下午 7.27.48.png

Enable : 值为 Yes 监听 Swipe 滑动手势， NO 忽略 Swipe 手势 Direction ：水平方向，竖直方向 Start Position ：传动的起始位置 End Position ：传动的终止位置 Flip ：当有一个 Pulse 就触发传动事件，会来回切换传动状态（在起始点和终止点之间） Jump to Start ：当有一个 Pulse 就触发传动事件，传动为起始点 Jump to End ：当有一个 Pulse 就触发传动事件，传动为终止点 settings ：于 Swipe setting patch 相连，来做一些自定义的东西

Position ：实时计算当前的位置 Progress ：实时返回传动的进度 index ：用于记录传动的状态，（是起始点，还是终止点）

Origami 实时性

Origami 可以方便的链接 Sketch 文件和 PSD 文件，这是一个非常强大的功能。大家可以注意到，本文通篇都在强调一个词 “实时” ，因为实时给我们带来的是效率，修改了什么，直接就可以体现出来。不管你是在修改编辑界面，还是直接修改 Sketch 、 PSD 文件。我们都直接可以在与行模拟器上直接看到效果。