Facebook Paper的动画原型制作工具Origami及实现代码Pop

96
超儿
2014.05.04 13:20* 字数 1556

Facebook的paper几乎是这一年到现在最抢眼的app了。一亮相就用瓷砖式布局(Mactalk语,据说他还考證了這個設計師之前就是搞家裝的)震惊世人:妈蛋还能这么玩啊!

产品角度关于paper的介绍

Paper 是 Facebook 创新实验室的首款产品,其首席设计师之前为智能家居产品做过设计。所以真相是:之前的设计中瓷砖贴多了……

我为了这个免费的app买了8块的vpn一个月,你也可以申请greenvpn的免注册免费200M体验一下。需要美区账号。

Paper by Facebook

懒得弄没关系,这里摘录了你能发现和可能都不会发现的23个细节。

赞!Facebook Paper中的23个设计细节

不光是完全创新的交互设计(现在都敢这么说,真做到的不多),随着功能进一步完善,正在从原来信息聚合逐渐危及到facebook的主功能,莫非要上演F版的QQ与微信?

但是也有说现在paper下滑明显。

总之,关于Paper的交互动画,Facebook公布了这样两个开源资源:

交互动画原型制作Origami

中文介绍:新闻聚合阅读应用Facebook Paper的幕后功臣Origami

这其实是一个基于Quartz composer(苹果开发工具包里一款制作动画的软件)的库,方便你在QC里可以直接模拟出Paper的动画。

还集成了直接可以切换手机型号(内置了iPhone和htc两款,你可以找到库的位置自己修改一下加上所需手机),介绍,对原有动画的一些包装和拓展等等。

但是由于QC的学习成本有点高(基于流程的处理方式,从思路上就和我们通常习惯的ps式分层的思维方式不同),而且只是针对强交互方式的(弱的基本可以用ps时间线和AE实现),而且,转成代码的重用性得性价比等原因,除非有能力熟练掌握,否则非要用这个实现有点事倍功半的感觉。

三种原型动画制作方法优缺点比较

前面提到了QC实际上是可以和ps时间线配合制作不同需求的动画原型。

  • ps时间线

优点是:上手快。无论是时间轴关键帧的概念还是psd的通用性,都可以稍微学习一下就可以直接拿来设计师的psd自己做做效果玩了。缺点是只能生成gif,5秒左右短动画,很难显示与实际交互的操作。

关于具体怎么做,你可以自己搜搜,也可以等我把关于原型制作的大作写完哈。

  • After effect制作动画视频

优点是:支持矢量,动画可以效果更多更精致,可以生成视频。牛摆设计师都会告诉你用这个,虽然也不能制作交互,但是高级动画都用这个,甚至直接做动画片都没问题了。当年我们就是用这个做视频短片的后期调色渲染的。

  • QC的特点

前面说过了,可以在Mac上完美模拟交互过程,点击滑动拖放等过程的实时动画。缺点其实也在这句话里,就是mac上模拟,不要说windows了,连ios都很难,而且好像必须对方也得装了QC才可以,而且好像只有开发者账号才能下。。。如果不对请指正。

但是iOS模拟交互的过程也被我找到了,就是在mac和iOS上下载liveview,然后在mac上开启互动模式即可!具体看这里第二个回答

LiveView has an "interactive" mode which basically allows you to interact with the mirrored image on your iPhone

Quartz composer相关教程

下载地址

如果你还是铁心要贴近时代的脚步,那么只需看这一个链接就好了:

Quartz Composer如何入门?

里面介绍的资源有很多,我建议顺序是:先看下视频,大概对这东西有个概念,然后做下提供的例子,其中有个图片点击放大的最简单最清晰,主要是看基于流程的思维方式,这和ps分层的方式差别很大(其实在影视后期领域也是这两大流派流程代表的Fusion和层级代表的after effect)。里面提到的一本书一本文档,我都看了没有什么学习空间,参考为主吧。

learning Quartz Composer

Quartz Composer User Guide

中文教程:Quartz Composer完全入门(1)

动画代码Pop

接下来没多久,facebook就开放了代码层面的动画效果Pop。


中文介绍:快把Pop动画引擎用到你自己开发的应用中吧

所以就是在苹果现有的动画曲线上加上了两种和用户强烈交互的曲线:

Spring可以让用户触摸的元素能反馈出强有力弹动效果;

Decay则可以让弹起来的元素缓慢的停下。这两种特效都会将用户的手势速率纳入考量范围进而创建出逼真的交互效果。

除了这两种之外,Pop的自定义特性则允许开发者将自己的动画代码插入其中进而创建出独一无二的动画。

探索的空间还是很大的。相关的资源还不多:

关于pop的视频介绍优酷

Tutorial: getting started with Pop

Playing with POP

教程和demo by @jxd001

如果你还继续感兴趣可以去关注@唐巧_boy的微博,我关于pop的新东西都是在他那。

iOS相关
Web note ad 1