Origami Studio实战教程：制作重力感应控制的视差移动动效

Origami Studio给了设计师们一个理想的原型制作工具，通过简单地拖拽组件（patch），组成可交互的、动效可高度自定义的高保真原型。相对于AfterEffect，它的优点是可交互且制作较快；相对于最近比较火的Principle，它的优点是动效的自定义程度更高。点击这里从官网下载Origami Studio
普遍的评价是Origami的学习曲线比较陡峭，需要一定的学习才能愉快使用。如果你像我一样讨厌按部就班的学习，希望直接动手来熟悉软件的话，这篇教程可能适合你。这篇文章会通过一个由用户设备的重力感应控制的视差移动效果的构建，来介绍Origami Studio的使用。涉及：

• 图片的导入
• 组件、输入和输出的概念
• 图片的定位和缩放
• "+"和"x"组件(patch)
• “Device Motion”组件
• “Smooth Value”组件
• 通过Origami Live预览

首先我们看一下要达成的效果：

效果预览

分析需求

在动手之前，我们需要分析一下我们做的是什么，怎么做。对于一个动效，可以分两方面考虑：一是动画效果，二是交互方式。

• 动画效果：视差移动效果意味着多图层以不同的速度移动，以此形成立体的视觉效果。由此可以得到关键词："多图层"、"不同移动速度"。
  在Origami Studio中，多图层可以通过插入多个图片素材来完成，不同移动速度可以通过不同的速度倍率来完成。
• 交互方式：通过设备的重力感应来控制动效。
  在Origami Studio中，设备的重力感应数据可以通过一个叫Device Motion的组件来获得。

通过以上的分析，我们能得到大概的制作方法：

1. 建立多个图层
2. 为每个图层设置不同的移动速度
3. 加入重力感应

具体的制作方法如下：

第一步：插入图片素材

新建一个文件，新建时默认的分辨率是iPhone7的分辨率。你也可以使用别的分辨率，在这里例子里，我用的是Sony TV的分辨率。插入文件的按钮在界面的右上角，相信看到这个"+"你就知道这个按钮是怎么用的了。点击按钮后选择插入图片，图片就会出现在界面右侧的图层列表里了。拖动图层可以对图层进行排序，上面的图层会覆盖下面的图层。
建议给每个图层起一个名字，在有很多图层的情况下，如果图层没有名字，你可能会花费很多时间去寻找你要的图层。双击图层名来编辑图层。
我省去了制作图片素材的步骤，Demo中使用的图片来自京东。

第二步：缩放和定位图片

插入所有图片之后，你在预览窗口里看到的大概是这样：

所有图片都在画布的中心，这是因为插入的图片默认坐标是(0,0)，我们需要为这些图片指定一个初始的位置。
缩放图片：由于图片的大小在本例中是个定值，可以直接点击图片属性里的Size或Scale数值来定义一个定值数值。
位置也可以通过图层属性里的position属性来编辑。但是由于在我们做的动效中，位置会随重力感应变化，不是一个定值，所以应该将position变成一个变量。
将position变成变量的方法很简单，选中一个图层，在图层属性中点击position标签，画布上就会出现两个组件。

Point 3D这个组件给出了图像的X、Y、Z轴坐标，可以看到这个组件的左右两端各有几个圆圈，左边的是输入端，右边的是输出端。这两个组件创建时已经连接，Point 3D的输出端已经连上了Image的输入端"position"，这意味着Image的position由Point 3D的输出结果控制。（组件、输入和输出是Origami Studio的核心概念。在后面的几步中我们一直会用到它。）你可以直接点击Point 3D里的数字为它赋予一个常量数值，也可以通过其他组件输出一个变量数值给Point 3D。在这个例子中我们需要一个变量数值，所以我们需要一个组件来输出数值给Point 3D。
可以使用"+"组件来进行初始值的确定。双击界面可以调出组件插入窗口，找到"+"，双击即可插入。"+"组件就是数学中的加法运算，它会把两个输入端的结果相加后输出。输入端1先空着，留着将来接入变量，设置输入端2为定值-300，再把它的输出端接入给Point 3D的输入端"x"，Image的X轴坐标就有了一个初始值为-300的，可以随着变量变化而变化的值。Y轴同理。你可以在预览窗口里看到图像的位置发生的改变。

在这里我们用不到Z轴，你可以不用管它（如果你像我一样有强迫症，可以把Point 3D组件换成Point组件，Point组件只有X轴和Y轴）。
按这个方法将你的图片定位和缩放完成后，进入下一步。

第三步：定义该层移动速度

这一步负责产生视差效果。如何在只有一个变量（重力感应数据）的情况下，让每一层有不同的速度呢？
刚才提到了"+"组件，现在我们再引入一个"×"组件，"×"组件就是数学中的乘法运算，它输出的值就是输入端1和输入端2相乘的值。那么通过一个变量产生不同的速度就很简单了，只需要控制不同“×”组件的输入端1相同，输入端2不同即可。
继续将输入端1留空，用以接入变量，输入端2写入定值。想让一个图层移动的快一些，就把这个值设大点；想让两个图层的移动速度相同，就把这个值设成一样。注意X和Y轴都要设定。

第四步：重复以上步骤，建立所有层

嗨呀，这步就没什么好说的啦！放一张完成这一步后的界面给这一步凑个数吧，看起来很麻烦，其实就是复制黏贴再改个数值而已。
你可能注意到了第二个模块长得和其他模块长得不一样，这是因为我打算让这两层移动速度一样，又懒得建一个数值相同的“×”组件，所以直接让一个“×”组件的值输出给了两个“+”组件。谁说一个输出端只能给一个输入端的数值的？

第五步：引入重力感应

在一般的认识里，引入重力感应是一件麻烦事。但是在Origami Studio里，你只需要一个组件！
双击界面，搜索Device Motion，添加，Done。
现在你可以通过Acceleration输出端获取重力感应的数据了。原始的重力感应数据是三维结合的，我们需要把单独的X轴数据和Y轴数据分别输出出来。其实就是把之前赋予position给图像的过程反过来而已。
这里我们会用到Point Unpack组件，将Device Motion组件的“Acceleration”输出端与Point Unpack组件的输入端相连，Point Unpack组件就会分别输出X和Y轴的数据。由于Acceleration输出的值很小，为0~1之间的值，如果直接使用这个数值，最后的运动会微乎其微、根本观察不到。所以我们需要对数据进行放大。
放大只需要通过一个“×”组件即可。我这里设定了1000倍的放大倍率。

你可能会发现这个“×”组件可以和后面决定运动速度的“×”组件合并，是的！如果数据放大的“×”组件的输入端2数值为1000，决定运动速度的“×”组件输入端2数值为0.2，你可以直接把决定运动速度的“×”组件输入端2设置为200，就可以用一个组件达到分别设定两个组件的效果。按照你的个人习惯来就好，我更喜欢把运动速度的倍率调小点。

如何预览

做到这一步，这个动效已经基本完成了。你可能已经迫不及待想要预览了。
由于我们使用了重力感应，所以我们需要用手机来进行重力感应数据的传入。在AppStore安装一个叫Origami Live的应用，把你的手机和电脑通过数据线连接，然后打开Origami Live。然后试着晃动一下手机，Duang！你的DEMO动起来了！
但是……好像有点不对？

抖抖抖

第六步：加入阻力

严重的抖动是由于手机的重力感应灵敏度很高导致的。你的肌肉颤抖、甚至脉搏都会影响重力感应的数据。更何况我们还把重力感应的数值放大了1000倍。
为了解决这个问题，我们需要一个Smooth Value组件。它会使数值的变化变得更加平滑。

我们会用到两个输入端：“Value”用于接入X、Y轴数值，“Hysterisis”用于设置阻力，设为0就是不做平滑，设为1数值就不会动了。这里我把“Hysterisis”设为了0.9，然后将平滑后的X轴Y轴的数据分别输出给各层的X轴和Y轴输入端。
现在我们完成了这个看似很复杂的动效的制作，给全部组件来一张全家福，然后拿着你的DEMO去炫耀吧~

资源

这里列出了你可能想要的一些资源：
origami文件
图片素材
Origami Studio下载