动态原型设计
动态的可交互原型产品，是产品经理和界面设计师向开发人员阐释自己设计的最高效工具。
开发者不需要猜测设计师要什么样的效果，照着原型产品做就好了。
很多创业团队也发现了产品人的这个刚需，做出了诸如Principle、Axure这类著名的原型设计产品。
Facebook似乎也深谙此道，专门为安卓和iOS系统开发很有针对性的交互原型设计工具-Origami Studio。
这是一个免费的工具，而且也能和Sketch互通，所以我选择了它来向大家讲解互动原型的设计。
界面介绍
启动Origami Studio后，可以看到类似如下界面，
- 悬浮在外的区域是虚拟手机屏幕。用户可以通过点击、拖动来模拟各种屏幕操作;
- 底部的暗色区域是工作区域。用来设置用户操作屏幕后，界面元素的各种响应方式；
- 右边的亮色区域是界面组件区域。展示了组成界面的各个元素，里面的布局方式，通过虚拟屏幕实时展示了出来；
点击虚拟屏幕右上方的摄像机按钮，可以将屏幕上的内容录制下来，
创建屏幕界面
对于新创建的项目，整个工程都是空的，
我们可以通过菜单栏的+，为界面添加各种组件，
也可以直接将Sketch中的图形，通过复制粘贴的方式，直接添加到组件区域。
- 通过
Phone -> Nexus 5将虚拟设备的屏幕，设置成Nexus 5- 安卓设备；
- 将组件区域中
Color Fill的背景色修改成白色，
然后，打开上一章节中Sketch设计的静态高保真原型，
- 选中
Weather页面的展开画板，使用cmd + c（复制）； - 切换到
Origami Studio，cmd + v（粘贴）；
整个界面就导入完成了，
所以我之前说，使用Sketch进行界面设计可以事半功倍，它与Origami Studio配合的非常好。
设置滑动区域
当用户滑动Content区域的时候，该区域要能够跟随手指，向上滑动。这里就有2个要点，
- 滑动
Content区域：要能够感知到这个区域被滑动； Content区域跟随滑动：滑动的位移能够作为输入，实时的影响Content区域的位置；
感知交互
组件旁边有个touch按钮，点击后会出现该组件可能会接收到的各种触控方式。在本例中，我们是需要感知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也会跟着滑动了，
这时可以看到，状态栏被挡住了。解决的办法很简单，只要在组件区域，把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灯，相关的配套文档也可以在这里看到。
这些相关硬件都由我们为您把关购买，为大家节省选择的精力与时间。同时也感谢大家对我们这些码农的支持。
最后再次感谢各位读者对安豆的支持，谢谢:)