android应用开发-从设计到实现 3-9 Origami动态原型设计

动态原型设计

动态的可交互原型产品，是产品经理和界面设计师向开发人员阐释自己设计的最高效工具。

开发者不需要猜测设计师要什么样的效果，照着原型产品做就好了。

很多创业团队也发现了产品人的这个刚需，做出了诸如Principle、Axure这类著名的原型设计产品。

Facebook似乎也深谙此道，专门为安卓和iOS系统开发很有针对性的交互原型设计工具-Origami Studio。

这是一个免费的工具，而且也能和Sketch互通，所以我选择了它来向大家讲解互动原型的设计。

界面介绍

启动Origami Studio后，可以看到类似如下界面，

1. 悬浮在外的区域是虚拟手机屏幕。用户可以通过点击、拖动来模拟各种屏幕操作;

2. 底部的暗色区域是工作区域。用来设置用户操作屏幕后，界面元素的各种响应方式；

3. 右边的亮色区域是界面组件区域。展示了组成界面的各个元素，里面的布局方式，通过虚拟屏幕实时展示了出来；

点击虚拟屏幕右上方的摄像机按钮，可以将屏幕上的内容录制下来，

创建屏幕界面

对于新创建的项目，整个工程都是空的，

我们可以通过菜单栏的+，为界面添加各种组件，

也可以直接将Sketch中的图形，通过复制粘贴的方式，直接添加到组件区域。

1. 通过Phone -> Nexus 5将虚拟设备的屏幕，设置成Nexus 5- 安卓设备；

2. 将组件区域中Color Fill的背景色修改成白色，

然后，打开上一章节中Sketch设计的静态高保真原型，

1. 选中Weather页面的展开画板，使用cmd + c（复制）；
2. 切换到Origami Studio，cmd + v（粘贴）；

整个界面就导入完成了，

所以我之前说，使用Sketch进行界面设计可以事半功倍，它与Origami Studio配合的非常好。

设置滑动区域

当用户滑动Content区域的时候，该区域要能够跟随手指，向上滑动。这里就有2个要点，

1. 滑动Content区域：要能够感知到这个区域被滑动；
2. Content区域跟随滑动：滑动的位移能够作为输入，实时的影响Content区域的位置；

感知交互

组件旁边有个touch按钮，点击后会出现该组件可能会接收到的各种触控方式。在本例中，我们是需要感知Content组件垂直方向上的滑动，所以选择ScrollY，

此时，工作区域和虚拟屏幕都发生了变化，

Content区域的位置发生了变化，被“顶”到了整个屏幕的最上面。这是为什么呢？因为Content区域的Y坐标被修改成了0。

在紫色的Scroll框图中，Content Layer被指定成了Content，说明需要关注Content的滑动。Y坐标的变化将被输出到蓝色框图代表的Content区域，修改它的Y坐标。

因此，当框图被这样组合之后，我们没有触控Content区域，Content的Y轴就没有滑动，因此输出就为0。0作为Content区域的新位置，就将其顶到了屏幕的最上方。

因此，我这里可以给出一个小技巧来避免这种错误的置顶效果，

1. 给Content添加一个壳-Group（+ -> group），将Content包裹在里面(通过拖动Content到Group中实现)；

2. Group的尺寸从屏幕的顶端开始计算，占据整个屏幕；

然后再给Group添加响应，

可以看到，现在虚拟屏幕上的界面就没有变形了。在屏幕上进行拖动，Content区域就可以随着Y轴的偏移，而实时的修改自己的Y坐标，达到互动的效果，

Content滑动的过程中，Weather detail，也需要随着向上滑动，并隐藏起来。

有了上面处理Content的经验，我们就知道需要如何处理Weather detail的滑动了。

1. 给Weather detail添加一个壳-Group，将Weather detail包裹在里面；

2. Group的尺寸从屏幕的顶端开始计算，占据整个屏幕；

3. 鼠标按住紫色框图Y字符的位置，拖住不放，连接到组件区域上方的Y坐标处，

   工作区域就会自动添加紫色框图到新Group的连接，

注意：这种拖拽端点到属性值的方法贯穿了使用Origami Studio的各个地方，是非常核心的操作方式。

此时滑动界面的时候，Weather detail也会跟着滑动了，

这时可以看到，状态栏被挡住了。解决的办法很简单，只要在组件区域，把Statusbar拖动到最上面的位置就可以了，

标题的变化

现在开始加入标题-成都的变化。

把成都从Weather detail中剥离出来，便于全局的控制，进行如下设置，

在界面滑动的过程中，字体的大小和X Y坐标都要发生变化，说明需要找到内容区域Y轴滑动时的比例，然后让成都元素的对应属性发生变化。

滑动变化有自己的百分比：（当前值-原始值／变化范围）* 100% = 变化的百分比

原始值：0 变化范围：-245（245是Weather detail的高度）

成都文字的属性变化范围是：

属性	属性起始值
X坐标	24 -> 16
Y坐标	244 -> 38
字体大小	34 -> 20

在Origami Studio中确定变化范围，需要使用Progress patch（到底什么是patch，会在后面介绍）。

在工作区域双击，弹出patch选择框，找到Progress，

修改Progress patch的Start value为0，End value为-245，

开始修改成都文字的Y坐标。

1. 在Progress path之后，添加一个Transition patch；
2. Start为244，End为38；
3. 将Transition patch的输出，通过拖拽的方式，连线到成都元素的Y坐标值的位置；

开始修改成都文字的X坐标。

1. 在Progress path之后，添加一个Transition patch；
2. Start为24，End为16；
3. 将Transition patch的输出，通过拖拽的方式，连线到成都元素的X坐标值的位置；

开始修改成都文字的字体大小。

1. 在Progress path之后，添加一个Transition patch；
2. Start为34，End为20；
3. 将Transition patch的输出，通过拖拽的方式，连线到成都元素字体大小的位置；

至此，我们可以看到滑动时，标题变化的雏形了，

滑动的范围

上下滑动时，内容是收到了局限的，只能在一定区域内滑动。所以要给目前的设计增加一个滑动限制。

1. 添加一个叫做Clip patch过滤器；
2. 将它允许输出的最小值Min设置成-245（也就是Weather detail的高度）；将允许输出的最大值Max设置成0；
3. 修改框图的连接方式如下，

滑动的保持

现在滑动虚拟屏幕的时候会发现，当松手之后，原来滑动到的位置会自动还原，但实际上我们希望它能够保持当前的状态。

1. 将Content所在的Group向下移，放到Weather detail所属的Group的下面；
2. 修改该Group的大小为1000；

至此，动画的效果就基本完成了。

尾巴

这里留下了一个小尾巴：滑动的过程中，状态栏的颜色也是需要变化的，从#3F51B5逐渐变化到#303F9F。

经过前面的实践，我想大家应该已经知道了实现的要点，那就开始自己尝试着做做吧。

提示：通过Color to HSL patch Transition patch与HSL Color patch的配合，来修改状态栏背景元素的颜色属性。

整个工程的源文件，我放到了这里，供大家参考。

回顾总结

通过具体的案例，我们初步了解了Origami Studio的用法，对实现动画的方式也有了概念。

一切的动画效果都是通过下面几个步骤来实现的，

1. 感知触发动画的事件，点击、滑动等等；
2. 把触发事件后产生的数值，交给一个个串联起来的patch进行处理，获得新的数值；
3. 利用新的数值来修改某个界面元素的属性，比如文字的大小，文字的位置，文字的透明度等等；

知道了这样的套路，以后遇到其他动画就可以依葫芦画瓢来操作了。

至于什么是patch，我相信一步步做到这里，也都可以心领神会了吧。

另外，处理虚拟屏幕，Origami Studio产生都可交互原型，也能在手机设备上运行，前提是在设备上按照对应的应用Origami live。希望进一步了解的同学，请移步这里，有更为详尽的信息提供给你。

本文是《从设计到实现-手把手教你做android应用开发》系列文档中的一篇。感谢您的阅读和反馈，对本文有任何的意见和建议请留言，我都会尽量一一回复。

如果您觉得本文对你有帮助，请推荐给更多的朋友；或者加入我们的QQ群348702074和更多的小伙伴一起讨论；也希望大家能给我出出主意，让这些文档能讲的更好，能最大化的帮助到希望学习开发的伙伴们。

除了CSDN发布的文章，本系列最新的文章将会首先发布到我的专属博客book.anddle.com。大家可以去那里先睹为快。

同时也欢迎您光顾我们在淘宝的网店安豆的杂货铺。店中的积木可以搭配成智能LED灯，相关的配套文档也可以在这里看到。

这些相关硬件都由我们为您把关购买，为大家节省选择的精力与时间。同时也感谢大家对我们这些码农的支持。

最后再次感谢各位读者对安豆的支持，谢谢:)