1.4 UI动效制作的工具介绍

由于篇幅所限，这里只就目前行业比较常用的动画软件做一个简单的介绍。

1.4.1 二维/原型类动画工具

1. Animate CC

Animate CC由原Adobe Flash Professional CC更名得来，它的前身便是为人熟知的Flash。2015年12月2日，Adobe宣布Flash Professional更名为Animate CC，同时在支持Flash SWF文件的基础上，加入了对HTML5的支持。2016年1月，针对Animate CC发布的新版本正式更名为Adobe Animate CC，缩写为An，如图1-28所示。

主要用途：制作多媒体动画。

优势：Adobe系常用产品，有一定的用户基础，新的版本能较好地兼容HTML5等网页格式。

劣势：除非具有较好的ActionScrip编写能力，一般情况下能实现的视觉效果只能以二维平面基础类型的为主。一直以来，我个人总觉得用它来做动效或者原型动画有点“杀鸡焉用牛刀”的感觉，如果想做一些比较复杂的动画效果，且设计师自身对软件掌握得较好，可以尝试一下。

2. Flinto

Flinto for Mac（暂无Windows版本）是一款轻量、高效的综合性交互原型设计工具，可以使用它创建任何原型。从最简单的页面跳转到令人印象深刻的精美转场动效，无须任何代码，也没有复杂的时间轴，Flinto的可操作性几乎是所有原型工具中最为简单和快捷的，如图1-29所示。

主要用途：制作动态可交互原型。

优势：体量小，并且安装好专门的Sketch插件之后，可实现与Sketch的无缝结合；iPhone端有专门的App可供下载，且支持手机实时预览原型方案，同时可以在手机上执行交互演示。

劣势：仅限于Mac设备使用；不可实现相对复杂的交互效果；对于其他设计领域的实际运用支持度不高。

3. Principle

Principle是一款小巧轻便的交互制作软件，在界面样式上和Sketch相似，比较容易上手。由于其可以直接导入Sketch当前的画布内容，因此配合Sketch使用会非常方便，如图1-30所示。

主要用途：制作动态可交互原型。

优势：容易上手，并且和Sketch的整合度较高，支持App下载效果预览。

劣势：仅限于Mac设备；不可实现相对复杂的交互效果制作。

4. Tumult Hype

Tumult Hype是一款HTML5动画开发工具，可以创建丰富的网页交互动画，支持层、时间轴等编辑方式，并支持导出HTML5、CSS3、JavaScript等网页格式文件，在ios或Android平台上表现流畅，如图1-31所示。其特点是可以在网页上做出悦目的动画效果，且配备有中文版，但是对于复杂效果制作与演练的支持度较低，毕竟只是针对HTML的一个非常好用的动画工具。

主要用途：制作动态可交互原型。

优势：使用者无须编程基础也可以做动效；对于网页和HTML5的支持度比较好，可直接生成HTML5格式的文件。

劣势：只支持Mac设备使用，没有整合性较好的软件和工具协同体系。所以协同起来会有些麻烦，图层的导入能力不如上述两个工具。Hype3自己的图形绘画形状很少，只有3个形状，而且不能对曲线进行编辑（这个还是比较麻烦的），而且不直接支持Sketch或者Photoshop使用，只能从别的软件中导出图片之后手动导入才行。

1.4.2 3D类动画工具

我是从2003年开始接触3D设计的，就我个人的经验而言，3D软件的研习之路可能要比Photoshop和Sketch难得多。但是作为一个互联网设计师，个人觉得核心任务还是应该放在用户体验设计这块，而没必要将工作重心放在3D技术的修炼上。且就3D技术在UI动效的实际场景中的使用频率来讲，其用到的情况并不多。

这里简单扼要地讲解下我常用的一些3D类动画工具。

1. Autodesk 3ds Max

Autodesk 3ds Max（全称是Autodesk 3D Studio Max）是一款Discreet公司开发的（后Discreet被Autodesk公司合并）基于PC系统的三维动画渲染和制作软件，如图1-32所示。由于Mac上缺少Framework系统组件，因此该软件不支持Mac系统使用。Autodesk 3ds Max在模型、灯光、材质、渲染、角色动画和3D视效方面表现非常棒。从5.0版本时代我便开始接触3ds Max，也目睹了它的成长历程。随着6.0版本的推出，其先后整合了Partical flow（强大的粒子流系统）和Reactor（动力学插件）以及Character Studio（角色绑定插件）。对于3ds Max而言，其在使用上还有一个天然的优势，即该软件是三维数字艺术领域插件兼容维度中最广的一个，且几乎所有的渲染、动画和特效脚本都有专门针对3ds Max的插件可供使用，并且许多插件现在仍在持续更新中。

3ds Max覆盖了包括航天科技、房地产、数字化娱乐、游戏、医疗、旅游以及工业数字化设计等诸多领域。同时独有的MAXScript可执行脚本也让3ds Max如虎添翼，也使其成为当之无愧的3D数字解决方案翘楚。3ds Max也使得许多公司或工作室通过使用它而变得名声大噪。

2. Autodesk Maya

Autodesk Maya是一个让所有CGer（计算机图形图像设计师）都肃然起敬的软件。当然，了解它的行业变迁的设计师，也知道它的另外一个名字——Alias Power Animation。Maya自从1993年诞生起，就注定了肩负着不平凡的“使命”。包括PIXAR（皮克斯，Pixar Animation Studios）、ILM（工业光魔，Industrial Light and Magic）等在内的众多数字多媒体制作公司都是Maya的忠实用户与合作伙伴，如图1-33所示。

如今，Maya成了几乎所有好莱坞视效三维解决方案的“专业户”。例如，你可以随意回忆一部CG数字作品或者全CG的动画片，绝大多数都是用Maya来全程参与制作的。即使是真人电影的视觉特效部分，也到处充满着Maya的数字幻象，如《变形金刚》《怪物史莱克》等。

应该说Maya是为数字娱乐而生的，相对3ds Max的全能性能来说，Maya对于数字电影的聚焦和专注程度是朝着极致的方向去的，特别是强大的角色动画模块和特效模块。几乎所有令人瞠目结舌的视觉效果都能通过Maya专属的MEL语言脚本来实现。

3. MAXON Cinema 4D

MAXON Cinema 4D由德国Maxon Computer公司开发而成，其前身是1989年发布在一款名为Amiga的早期个人计算机操作系统上的软件，最早时期Cinema 4D的别名叫作FastRay，当时还没有所谓的图形界面。1993年，FastRay更名为Cinema 4D 1.0，仍然在Amiga上发布。如今，Cinema 4D以极高的运算速度和强大的渲染插件备受广大设计师的青睐，很多模块的功能在同类软件中代表着科技进步的成果，并且在用其描绘的各类电影中表现突出，随着技术越来越成熟，Cinema 4D也被越来越多的电影公司所重视。

Cinema 4D的应用领域相当广泛，在广告、电影以及工业设计等方面都有出色的表现，如图1-34所示。例如，在影片《阿凡达》中花鸦三维影动研究室的中国工作人员使用Cinema 4D制作了部分场景，在该片中Cinema 4D有如此优秀的表现，是很值得欣慰的一件事情。

Cinema 4D称得上是三维数字影像领域的“常青树”，也成为许多一流艺术家和电影公司进行场景制作的首选软件，目前技术比较成熟。

当然，除了以上3款目前业内比较常用的3D类动画软件以外，还有许多其他类似的软件可尝试使用，这里不再过多描述，如图1-35所示。

1.4.3 After Effects

本节介绍本书设计讲解中使用到的主要工具——After Effects（大多数设计师习惯简称其为AE）。这是一款既实用又有意思的动画软件，功能非常强大。

1. 高协作性

在我看来，无论是针对Photoshop上的位图、钢笔路径和内置的矢量图形，或者是lllustrator中的纯矢量元素层，又或者是Animate CC、Premiere等，其都拥有而且根据“层级”的基本工作原理所延展开来的“Adobe家族”的产品。After Effects的高协同性能是大多数动画软件无法比拟的，且绝大部分的快捷键都是通用的，如此一来用户也就不需要再额外记忆更多的快捷键。Adobe家族的强大数字艺术解决方案群如图1-36所示。

2. 效果插件的霸主平台

无论是哪一款后期合成的第三方插件，想要在影视后期动画行业被广泛使用，首先要考虑的就是是否为After Effects平台研发专门的效果插件。现在市面上适用于After Effects的插件有上百款，而且这个数字还在持续地增加。试想，如果没有这么大的用户量，大家为什么非要选择为After Effects研发专门的效果插件呢？对于用户来说，插件多了，软件实现效果的成本和难度也就大大降低了，这自然是一件令人愉悦的事情，也是大家选择该软件的原因之一，如图1-37所示。

好莱坞视效大片中有许多特效镜头都是使用After Effects和其插件来完成的。以图1-38所示的组合为例，这是一组专门针对After Effects而全面开源的AE动画转SVG的插件和动画库。当动画完成以后，输出成svg、canvas、html+js等格式，可以直接在浏览器上播放，甚至可以通过客户端的原声开发在移动设备上实现渲染和播放。所以不能再说After Effects只是个视频处理软件了。因为基本上那些所谓的小而美的动画效果的制作，After Effects都不在话下。且最重要的是，原来一直被当作话柄的“网络弱关联性”（由于早期After Effects输出的视频体量过大，不适合于网络流媒体播放对于体量和网速的要求，所以前几年After Effects制作的视频基本上与互联网动效无黏性），也会因为这类辅助插件的产生而终结。

另外，After Effects制作出的动画效果，也远不是那些原型软件可以比拟的。具体我们可以在后边的案例中再去感受，这里不再多说。