交互神器 Facebook Origami

交互神器 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 支持动画的导出为代码，程序员直接可以使用这些导出的代码（从此程序员再也不会听到，“你说这个动画效果是不是快了”，?????）

屏幕快照 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 文件。我们都直接可以在与行模拟器上直接看到效果。

Origami 学习

我们可以 研究 Origami Demo 快速的学习 Origami

这里我们来简单介绍一下官方的demo，效果如下

longpress.gif

屏幕快照 2016-06-29 上午10.00.32.png

1. 我们首先在编辑界面添加一张背景图片，如下图所示

屏幕快照 2016-06-29 上午10.05.04.png

1. 然后我们给一个区域添加一个手势，并且这个手势被触发的时候会对输出的值进行一个Pop Animation 动画计算，如下图所示

屏幕快照 2016-06-29 上午10.07.02.png

1. 在计算Pop Animation 把计算后的数值分别用于，改变汽车图片的大小Scale，和设置底层跌破的透明度

屏幕快照 2016-06-29 上午10.11.27.png

以上就介绍到那么多

Origami 学习相关网站

官方教学视频
官方文档
Origamin demo 网站
MartinRGB 的Demo

欢迎大家补充

 

作者： HuminiOS-极光

原文： http://www.jianshu.com/p/abc926e295dd

posted on 2017-05-15 16:18 叶祖辉 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/yezuhui/p/6856942.html