Origami动画进阶教程(下)

用户头像
北京/UI设计师/10年前/12824浏览
Origami动画进阶教程(下)

用Origami制作Material Design动画

案例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的问题,本质上是程序问题,而Coffes cript/Javas cript专家的人数远比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


33
阅读原文
|
举报
|
70
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
【新年UI图标】会员icon
UI 登录界面设计模板包
UI应用平面图标
抽象液态渐变UI背景模版
钱包ui模板
高级感金属拟物 UI设计组件库
UI界面 组件
【新年UI图标】银行卡icon
拟物风质感写实UI卡片合集源文件
盲盒APP UI设计
手表表盘UI系列
3D渐变流体抽象矢量UI背景图
新能源APP应用UIKit
【新年UI图标】影音icon
Security Camera UI kit
UI通用设计素材1
【新年UI图标】汽车icon
我的钱包-UI界面设计-app
【新年UI图标】30个图标
【新年UI图标】钱包icon
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】珠宝icon
智能家居中心 简约 UI设计组件库
你可能喜欢
大家都在看
登录注册