交互神器 Facebook Origami

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

scroll.gif

swipe.gif

Origami 运行模拟器

我门在编辑 Origami 的时候，相应的效果图会直接运行在运行模拟器，我们可以在手机上安装 Origami 软件，这样就可以在真机实时获取运行效果了

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

Origami 图形编辑界面

Origami 提供了一个非常方便的图形界面编辑器，我们只需要简单的拖拽连线就可以实现很多复杂的交互。

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

Origami 组件

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

2A70A09A-128E-4933-AB01-BDB2B0D6CFD1.png

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

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

通过获取设备的旋转角度，然后实时的改变图层三维旋转信息，效果图如下

rotation.gif

Pop animation

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