距离第一台 iPhone 发布已经过去 8 年,同样,距离第一台 Android 设备发布也已经过去 7 年,移动互联网发展一片繁荣,随着移动设备硬件能力的提升,软件的运行也更流畅,开发者可以实现更有效和更有趣的交互动画,但是从写代码到看到实际的动画效果,需要较多的准备工作和代码编写,交互设计师需要一种工具来快速模拟交互动画效果,更有效地同开发者沟通,下面分别介绍三个我用过的工具,但是肯定没有 Photoshop。

Origami

Origami 是 Facebook 设计团队在 Mac Quartz Composer 基础上扩展出来的设计工具,此工具刚开始公开时,我就尝试用来作为动效设计工具,通过连接不同的 Patch 之间的输入,输出来进行设计,每经过一个 Patch 就会产生一定的效果,说实话我解释起来很费劲,自己理解起来也很费劲,经过一段时间的尝试,感觉自己智商不够,就放弃了此工具,此工具最大的优点就是开源免费,开源免费意味着很多东西你得靠自己研究。

Pixate

Pixate 是一项商业服务,云存储,按人按月付费,不过一个项目免费,你可以尝试下,这个工具很容易上手,就像平时设计师用的设计工具样,所见即所得,拖来拖去,再选择下动画效果,就可以看到自己的成果了,这里有一个为 热量助手 设计的 转场效果,点击导航栏的日历图标就可以看到效果。

Framer Studio

之前看了 Twitter 的设计师如何 设计 Twitter Video 的文章,让我明白 Framer Studio 对于我,才是最理想的工具,单机版,只需要购买一次,通过编写简单的 Coffee Script 代码来实现基本的布局和动效设计,Pixate 这样拖来拖去操作方式的工具,对于会写代码的人来说效率很低,Framer Studio 编写代码的方式对于我来说效率更高,这里有一个为 健康日记 设计的 发布按钮动画效果,点击圆形的加号就可以看到效果。

心灵鸡汤

到目前为止,动效设计工具都还不完善,Framer Studio 中还不能动态地改变 backgroundColor,成熟完善还需要时日,等到那一天,你才开始转变,你已经落后很多了,我们都处在一个变革的时代,你还在用盗版的 Photoshop 吗? You are suck. 买一个 Sketch 来替代 Photoshop 吧,$99 可以挽救你的职业生涯,免得被淘汰。