android应用开发-从设计到实现 3-9 Origami动态原型设计
动态原型设计
动态的可交互原型产品，是产品经理和界面设计师向开发人员阐释自己设计的最高效工具。
开发人员不须要推測设计师要什么样的效果，照着原型产品做就好了。
非常多创业团队也发现了产品人的这个刚需，做出了诸如Principle、Axure这类著名的原型设计产品。
Facebook似乎也深谙此道。专门为安卓和iOS系统开发非常有针对性的交互原型设计工具-Origami Studio。
这是一个免费的工具，并且也能和Sketch互通，所以我选择了它来向大家解说互动原型的设计。
界面介绍
启动Origami Studio后，能够看到相似例如以下界面，
悬浮在外的区域是虚拟手机屏幕。用户能够通过点击、拖动来模拟各种屏幕操作;
底部的暗色区域是工作区域。用来设置用户操作屏幕后。界面元素的各种响应方式；
右边的亮色区域是界面组件区域。展示了组成界面的各个元素，里面的布局方式。通过虚拟屏幕实时展示了出来；
点击虚拟屏幕右上方的摄像机button。能够将屏幕上的内容录制下来，
创建屏幕界面
对于新创建的项目，整个工程都是空的，
我们能够通过菜单条的+。为界面加入各种组件。
也能够直接将Sketch中的图形。通过复制粘贴的方式。直接加入到组件区域。
通过
Phone -> Nexus 5将虚拟设备的屏幕。设置成Nexus 5- 安卓设备。
将组件区域中
Color Fill的背景色改动成白色。
然后。打开上一章节中Sketch设计的静态高保真原型，
- 选中
Weather页面的展开画板，使用cmd + c（复制）； - 切换到
Origami Studio。cmd + v（粘贴）；
整个界面就导入完毕了，
所以我之前说，使用Sketch进行界面设计能够事半功倍，它与Origami Studio配合的非常好。
设置滑动区域
当用户滑动Content区域的时候，该区域要能够尾随手指，向上滑动。这里就有2个要点，
- 滑动
Content区域：要能够感知到这个区域被滑动； Content区域尾随滑动：滑动的位移能够作为输入。实时的影响Content区域的位置。
感知交互
组件旁边有个touchbutton。点击后会出现该组件可能会接收到的各种触控方式。
在本例中。我们是须要感知Content组件垂直方向上的滑动，所以选择ScrollY。
此时，工作区域和虚拟屏幕都发生了变化，
Content区域的位置发生了变化。被“顶”到了整个屏幕的最上面。这是为什么呢？由于Content区域的Y坐标被改动成了0。
在紫色的Scroll框图中，Content Layer被指定成了Content。说明须要关注Content的滑动。Y坐标的变化将被输出到蓝色框图代表的Content区域，改动它的Y坐标。
因此，当框图被这样组合之后，我们没有触控Content区域。Content的Y轴就没有滑动，因此输出就为0。0作为Content区域的新位置。就将其顶到了屏幕的最上方。
因此，我这里能够给出一个小技巧来避免这样的错误的置顶效果。
给
Content加入一个壳-Group（+ -> group）。将Content包裹在里面(通过拖动Content到Group中实现)。Group的尺寸从屏幕的顶端開始计算，占领整个屏幕；
然后再给Group加入响应，
能够看到，如今虚拟屏幕上的界面就没有变形了。在屏幕上进行拖动，Content区域就能够随着Y轴的偏移，而实时的改动自己的Y坐标。达到互动的效果。
Content滑动的过程中，Weather detail，也须要随着向上滑动，并隐藏起来。
有了上面处理Content的经验，我们就知道须要怎样处理Weather detail的滑动了。
给
Weather detail加入一个壳-Group，将Weather detail包裹在里面；Group的尺寸从屏幕的顶端開始计算。占领整个屏幕；
鼠标按住紫色框图
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坐标。
- 在
Progress path之后。加入一个Transition patch； Start为244，End为38；- 将
Transition patch的输出，通过拖拽的方式，连线到成都元素的Y坐标值的位置；
開始改动成都文字的X坐标。
- 在
Progress path之后，加入一个Transition patch； Start为24，End为16；- 将
Transition patch的输出。通过拖拽的方式。连线到成都元素的X坐标值的位置；
開始改动成都文字的字体大小。
- 在
Progress path之后，加入一个Transition patch； Start为34。End为20。- 将
Transition patch的输出，通过拖拽的方式，连线到成都元素字体大小的位置。
至此。我们能够看到滑动时，标题变化的雏形了，
滑动的范围
上下滑动时，内容是收到了局限的。仅仅能在一定区域内滑动。所以要给眼下的设计添加一个滑动限制。
- 加入一个叫做
Clip patch过滤器。 - 将它同意输出的最小值
Min设置成-245（也就是Weather detail的高度）。将同意输出的最大值Max设置成0。 - 改动框图的连接方式例如以下。
滑动的保持
如今滑动虚拟屏幕的时候会发现，当松手之后。原来滑动到的位置会自己主动还原，但实际上我们希望它能够保持当前的状态。
- 将
Content所在的Group向下移，放到Weather detail所属的Group的以下。 - 改动该
Group的大小为1000；
至此，动画的效果就基本完毕了。
尾巴
这里留下了一个小尾巴：滑动的过程中，状态栏的颜色也是须要变化的，从#3F51B5逐渐变化到#303F9F。
经过前面的实践，我想大家应该已经知道了实现的要点，那就開始自己尝试着做做吧。
提示：通过Color to HSL patch Transition patch与HSL Color patch的配合，来改动状态栏背景元素的颜色属性。
整个工程的源文件，我放到了这里。供大家參考。
回想总结
通过详细的案例，我们初步了解了Origami Studio的使用方法，对实现动画的方式也有了概念。
一切的动画效果都是通过以下几个步骤来实现的，
- 感知触发动画的事件，点击、滑动等等。
- 把触发事件后产生的数值，交给一个个串联起来的
patch进行处理，获得新的数值； - 利用新的数值来改动某个界面元素的属性，比方文字的大小，文字的位置，文字的透明度等等。
知道了这样的套路，以后遇到其它动画就能够依葫芦画瓢来操作了。
至于什么是patch，我相信一步步做到这里，也都能够心领神会了吧。
另外，处理虚拟屏幕。Origami Studio产生都可交互原型，也能在手机设备上执行，前提是在设备上依照相应的应用Origami live。希望进一步了解的同学，请移步这里，有更为详尽的信息提供给你。
本文是《从设计到实现-手把手教你做android应用开发》系列文档中的一篇。感谢您的阅读和反馈，对本文有不论什么的意见和建议请留言。我都会尽量一一回复。
假设您认为本文对你有帮助，请推荐给很多其它的朋友；或者加入我们的QQ群348702074和很多其它的小伙伴一起讨论；也希望大家能给我出出主意，让这些文档能讲的更好。能最大化的帮助到希望学习开发的伙伴们。
除了CSDN公布的文章，本系列最新的文章将会首先公布到我的专属博客book.anddle.com。大家能够去那里先睹为快。
同一时候也欢迎您光顾我们在淘宝的网店安豆的杂货铺。店中的积木能够搭配成智能LED灯。相关的配套文档也能够在这里看到。
这些相关硬件都由我们为您把关购买，为大家节省选择的精力与时间。同一时候也感谢大家对我们这些码农的支持。
最后再次感谢各位读者对安豆的支持，谢谢:)
浙公网安备 33010602011771号