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

动态原型设计

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

开发人员不须要推測设计师要什么样的效果，照着原型产品做就好了。

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

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

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

界面介绍

启动Origami Studio后，能够看到相似例如以下界面，

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

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

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

点击虚拟屏幕右上方的摄像机button。能够将屏幕上的内容录制下来，

创建屏幕界面

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

我们能够通过菜单条的+。为界面加入各种组件。

也能够直接将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区域的位置。

感知交互

组件旁边有个touchbutton。点击后会出现该组件可能会接收到的各种触控方式。

在本例中。我们是须要感知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也会跟着滑动了。

这时能够看到，状态栏被挡住了。

解决的办法非常easy。仅仅要在组件区域，把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灯。相关的配套文档也能够在这里看到。

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

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