案例6:Google iOS端页面选择效果

源文件下载地址：

这个动画的制作的是基于Google的iOS应用：

问：如何让页面在处于后面的时候变暗，而处于前面的时候变亮呢？


答：每一个页面都是一个Layer Group涂层组，并且加上了黑色层，根据最前面卡片的Y轴位置，相应调整每个黑色层的不透明度。

问： 我该如何去制作动画，才能达到和你一样的效果，手指滑动的时候直接滑动到特定的位置。

答：在Google的真实应用中，可以通过简短的swipe手势，让页面可以移动到指定位置。也可以通过Drag拖动手势来移动到任意位置。

加入Flick轻滑手势来控制长度的方法还没有确定，我猜要用Velocity来构建Flick手势。我猜这就是Google页面选择效果感受极佳的原因。

案例7:Pivot!

源文件下载地址：

最后这个案例和Material Design无关。这个动画制作灵感来自Jeff Broderick的导航栏设计。而且在Mike Rundle的Motion Design for iOS教程中，这个动画也作为案例存在。

我学习Form和FramerJS的时候也尝试制作了这个案例，因为这个案例包含了：Touch交互，位移、缩放、不透明度的动画。所以制作这个动画，我自己也能够比较FramerJS Form Origami的设计流程。

Origami和Form

问：Origami制作动画和Form制作动画完全相同吗？

不完全相同，但是相似点很多。例如我都可以设置开关Switch 和弹性动画，在很多点上Origami和Form的工作方式相同。

问：Origami和Form的区别何在？

对于我做的Pivot这个案例来说，不同点不多。但是还是有一些区别：

• ·Origami让你可以在显示器的窗口中预览效果 
• ·Origami Live在手机端预览效果需要USB连接线，而Form Viewer通过Wifi就能在手机上连接。
• ·使用Origami Live的时候，你可以切换出应用，完成其他任务，重回应用，APP自动重连。然而如果Form Viewer切换出程序，就必须重连
• ·Origami有Classic Animation模块，可以设置曲线动画。Form只有弹性动画。
• ·Form所制作出的原型在机器上的运行效果属于原生效果，因此效果很棒。Origami Live的效果也很棒，但是如果在我计算机上的效果变慢，Origami也相应的受到影响变慢。
• ·有些非Origami Patch在Origami Live上不出效果，而Form所有的Patch在手机预览App中都可以实现功能。
• ·Form点击连线，可以建立一个大头针标签，可以观测到传递的具体信号数值。通过这一点可以帮助我Debug和追溯问题。
• ·Form有着更高级的手势系统，例如支持Pinch两指捏合手势，Form也支持开启手机的摄像头。

Origami 和 Framer

问：那么Framer和Origami构建原型有什么不同呢？

答：模块连线虽然在逻辑上接近编程，但是和编程的设计思路还是稍微不行的。在使用Form的时候我就感受到了这一点，而随着Origami使用时间的加深，我对我这个观点深信不疑。我非常喜欢使用Origami，感觉是非常棒的新玩具。

社区

Framer的教学社区是我在所有原型软件社区里面见过最好的。Facebook的小组也很不错，里面很多人很积极，问答很多。Framer团队内部人员也经常回去回答问题。 

Origami的Facebook小组人数是Framer小组人数的2倍，但是不很积极。Facebook Origami部门的设计师也在这个小组里面维护，这一点很不错。（尤其是Brandon Walkin和Julius Tarng在Origami 2.0发布的第一个周，对新人的帮助很大。）

我猜问题的主要原因还是专业人员的数目可能不多。例如Framer的问题，本质上是程序问题，而Coffescript/Javascript专家的人数远比Origami专家人数多。不过相信随着时间的推移，我认为Origami的资源也会原来越多。

分享

Framer团队非常专注于“简易分享”的理念，因此社区发展迅速。Framer Studio软件本身就有一键分享的功能。这样就可以在浏览器中预览原型。这种感觉比我下载Origami的qtz文件然后预览的感觉好多了。

学习曲线和资源

Origami的学习曲线非常的陡峭。我觉得Facebook认识到了这一点，他们非常积极的降低用户学习成本。新官网的案例给予了很多新手窥探这款交互原型工具的机会。

Framer的学习曲线取决于你对代码的熟悉。因此判断的范围非常的广泛，如果你是程序猿，你想要做一些原型设计，那么Framer是不错的入门选择。但是如果你是没有代码基础的设计师，那么我认为Origami更好，可以更快速的观测到效果。

工具箱中的新工具

Origami, Form, 和Framer有相似点也有不同点。这些工具属于高保真原型设计工具，当然，在低保真原型设计领域，还有很多其他的设计工具。哪个更好主要取决于需求和设计环境。因此学习软件技巧很重要，但是更重要的是要知道在什么时候使用软件更加有效率。

我对于Origami和其他交互设计工具的发展感到非常的兴奋。

感谢

你可以在Twitter Fo我 @makeshowlearn. 我还在designsprints.com发表一些东西—主要关于 Framer, Form和Origami. 我计划录一些视频来做几个案例教程。

Translator：MartinRGB​