Origami Code Export 探索：动效与逻辑

Orgami 2.0 发布已经有一段时间了，其中最让我关注的，就是它 Code Export 的功能：按照官方的说法，Origami 可以将动效分别导出适用于 iOS、Android、Web 三端特定引擎的代码，提供给开发同学使用，以解决设计到实现之间的过渡。

可交互原型设计除了用户测试，最重要的目的就是展示给开发同学观看，确定交互逻辑和动效形式。其他主流的动效设计软件中，Form 刚发布新版，支持一个 QC SDK（但我还没试用过）；Framerjs 用 Coffee Script 编写原型，转换到 JS 非常容易；Pixate、Hype3 等上手简单，对 H5 的支持也比较好。目前似乎只有 Origami 能够实现一次设计，多端代码导出，所以，这个上手门槛极高工具的代码功能到底如何，又能给设计开发过渡提供多大的帮助？

来看一眼导出的代码里都有些什么呢？

看不懂没关系，我先上结论：Code Export 只能导出 Animation、Transition 两个 Patch 的相关代码参数，以及与它们输出端相连的 Layer 的某些属性名称（比如 Height 等）。这意味着导出的内容只有『动效』，没有『逻辑』。

什么是『动效』？Animation 和 Transition 两个 Patch 是对每个变化所加的特效。比如同样是从0到1的数值变化，加了特效之后就可以有加速减速、弹性等不同的过程。

什么是『逻辑』？类似于 Tap、Drag 等操作可以引发页面内元素的各项属性变化（如位置、透明度等），这个过程称之为逻辑。

最开始我以为，可交互原型设计最主要解决的是逻辑问题，也就是能够通过代码导出让开发者迅速理解动画的前因后果、先后顺序。而动效只要使用对应的引擎并且大多数只需默认设置参数就可以了。

但事实上，Origami 代码导出并不能解决逻辑问题，反而解决的是动效问题。

一个最简单的效果，点击按钮，另一张图片弹性放大，Scale 从0弹性变化到1。这个过程，逻辑是简单的，但是动效使用 POP 引擎却没有那么容易。合作的 iOS 开发同学告诉我，一个对 POP 引擎不熟悉的开发者，可能需要1-2个小时的时间才能实现这个动作，而使用 Origami 设计并导出，大概只要三十秒。（说实话这个过程我稍有怀疑，还需要再咨询一些更有经验的开发者，也许对引擎熟悉的工程师并不需要这么久来实现一个图片弹性出现的效果。）

因为导出的代码中没有逻辑操作，所以我不知道触发信号是 Tap 还是 Long Press，也不知道会不会有其他东西跟随着操作同时出现，但是我能够知道这张图片弹性出现的各项参数：Speed、Bounce、Start/End Value，并且能够得到所要控制的图片属性信息：Scale。这部分代码，说明的是 POP 动画引擎的用法。

因此，一套可行的设计-开发合作模式可以是这样的：

使用 Origami 逐一实现复杂动画的细节过程，比如有三个按钮同时在飞，就用三个 qz 文件分别描述它们的动画效果。

使用 Origami 集中实现某一个可复用性强的动效过程，比如三个按钮同时在飞，但除了飞行位置、距离不同以外，动效是一致的，就只使用一个 qz 文件实现一个按钮的效果就可以了。（时刻记得导出的代码只有效果、没有逻辑）。

针对可复用性强的效果，将导出的代码封装成库或函数，下次直接调用。把某个产品中会用到的各类效果分类并编号，比如所有按钮的按下效果、所有图片的放大效果，都可以使用 Origami 做一个文件，并将导出的代码封装起来，每个按钮都可以复用这段代码。

完成效果代码封装之后，设计师可以使用更简单高效的设计软件，比如 Pixate 制作效果，然后告诉开发同学其中用到了某个编号的动效就可以了。比如，这个按钮飞行过程中，使用 A1 弹性动效，而这个编号动效的代码，在 Origami 导出并封装的库中已经有了，开发就可以直接使用现成的函数来实现。