作者：何福贵
出版社：机械工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
UI动效设计从入门到精通试读：
前言
感谢您选择本书，为了帮助您更好地学习本书的知识，请阅读下面的内容。
动效是科技产品“情感化设计”的纽带，在设计清晰的逻辑和漂亮的界面以后，需要使用动效将这些漂亮的设计衔接起来。界面、交互、动效构成了情感化设计的三大载体，其中的动效不仅仅是界面的润滑剂，它的作用更多地体现在交互逻辑、视觉渲染和创新实践上。
本书是关于APP动效设计的实战教程图书，全书共9章，从移动和网站开发的视角，有序介绍了动效的作用、设计原则、分类、动效设计方法、动效制作软件、APP基础动效的制作、APP高级动效的制作、Android中的3D动画、HTML5动画和使用Cinema 4D制作3D特效等内容，具体如下。
第1章为动效基础知识，包括动效的应用、APP动效设计原则和分类、动效设计方法及动效制作软件。
第2章介绍动效的分类和作用，包括常见的各种基础动效的描述、动效的各种作用的描述、动效的各种分类的描述及动效的评判方法。
第3章介绍了动效设计软件After Effects（简称AE）的应用，包括该软件的特点、工作界面、合成、图层、渲染和输出，使用Bodymovin插件导出动画的方法，在Android中使用Lottie导入AE动画的方法及Web中使用AE动画的方法。
第4章介绍Android基础动画，包括Android中的绘图动画、矢量动画、Drawable动画、属性动画和控件动画的实现方法。
第5章介绍APP基本动效的制作方法，讲解了APP各种典型动效的实现方法、APP各种类型图表的制作方法及GitHub中优秀的开源动效项目。
第6章介绍APP进阶动效的制作方法，包括图标、导航和菜单动效、Loading动效、手势动画、文字动效和After Effects高级动效，并结合具体实例展示了详细操作步骤。
第7章介绍Android中的3D动画。在Android应用程序中，3D动画具有更好的表现效果。本章结合具体实例介绍在Android中实现3D动画效果的两种典型方法：一是Camera实现3D动画，二是使用OpenGL ES动画库实现3D动画。
第8章介绍了HTML5动画。HTML5动画是目前网页广泛使用的动画，本章介绍了HTML5动画的三种典型形式：（1）Canvas元素结合JavaScript；（2）纯粹的CSS3动画；（3）jQuery动画。除此之外，本章还详细介绍了HTML5动画的两个制作工具DragonBones和Adobe Animate CC的应用方法。
第9章介绍使用Cinema 4D制作3D特效的方法。Cinema 4D是目前主流的3D效果制作软件，用于3D建模、绘制、动画和渲染。本章介绍了Cinema 4D的基本操作、运动图形、角色动画及RealFlow插件，并结合相关实例进行了说明。
本书具有下列特点。（1）内容全面：内容涵盖两种最典型的动效应用端：移动端和Web端，基于这两种平台介绍了典型的动效实现方法。（2）制作平台多样：本书涵盖多种典型的动效制作平台，包括After Effects、Android、Adobe Illustrator、JavaScript、CSS3、DragonBones、Adobe Animate、Cinema 4D等，通过这些典型制作软件的展示，让您了解各平台的优点和适用范围。（3）系统完整：从简单到复杂、从低级到高级、从二维到三维，系统介绍了动效的完整知识体系。（4）视角独特：从移动和网站开发的视角，有序介绍动效的作用、设计原则、分类、动效设计方法及动效制作软件，循序渐进地介绍了基础、高级、3D等动效的实现方法。（5）应用性强：每一部分配以应用实例，让您轻松领会动效开发的精髓，快速提高开发技能。
由于编写时间仓促，加之作者水平有限，书中疏漏和错误之处在所难免，望广大专家、读者提出宝贵意见，以便修订时加以改正。作者
第1章 动效基础知识
时下设计师们对动效的追捧，可以用一句话形容：“没有动效的APP，简直不是好的APP”。优秀的动效设计在提升产品体验、用户黏性方面起到积极作用，目前已然成为Web、APP产品交互设计和界面设计必不可少的元素之一。
1.1 为什么要为APP设计动效
动效是科技产品“情感化设计”的纽带，在设计清晰的逻辑和漂亮的界面以后，需要使用动效将这些漂亮的设计衔接起来，界面、交互、动效构成了情感化设计的三大载体。
为什么要为APP产品进行动效设计？首先必须清楚这个问题，才不会让我们在设计动效时迷失在炫技的动效中，合理地使用动效可以达到以下效果。动效降低了用户的认知负荷，从而让体验更加愉快。将物理世界的运动用在动效中，缩短了用户和界面之间的鸿沟，让用户更专注于任务而不是理解界面。动效有利于沟通不同的环节和内容，使衔接更容易。动效建立更为有效的信息和交互流程，使交互性变得更强。动效可以让界面易理解、有魅力。
一个功能完备的动效不仅要足够微妙有趣，而且应当具有清晰且合乎逻辑的目的。但是过多的动效可能造成卡顿，从而拖累应用运行速度，而毫无动效的APP，又未免让用户感觉有些生硬，不够生动。成功的动效应具有以下特征。（1）自然是UI动效的核心
在现实生活中，事物不会突然出现或突然消失，通常它们都会有一个转变的过程。动效的变化规则源于现实世界，动效中的每一个动作都应当从现实世界中获取灵感，好的动效设计应当尽量避免突兀的转变，状态生硬的改变会使用户有时候很难立刻理解。现实世界中物体的加速和减速都会受到重量、惯性和摩擦力的影响，类似的，在动效设计中，瞬间的启动和停止是不合规律的。例如用户在列表中选取一个条目查看详细细节，小卡片展开为大卡片的动效变化规则就源自于现实世界。（2）高效的UI动效是层次分明的
一个层次分明的动效通常能够清晰地展示状态的变化，抓住用户的注意力。这一点和人类的意识有关系，用户对焦点的关注和持续性都与此相关。良好的过渡动效有助于在正确的时间点，将用户的注意力吸引到关键的内容上，而这取决于动效是否能够在正确的时间强调对的内容。（3）关联是动效的重要功能
动效的关联包含两个方面；（1）能将界面和触发它们的操作或者控件关联到一起，产生关联的逻辑关系，帮助用户理解界面中的变化是如何产生的；（2）过渡关联牵涉到变化前后元素之间的关联，良好的过渡动效连接着新出现的界面元素和之前交互与触发元素，这种关联逻辑让用户清楚变化的过程，以及界面中所发生的前后变化。（4）清晰是UI动效的关键
不只是动效，清晰几乎是所有好设计的共通点。动效是功能性优先、视觉传达为核心的视觉元素，动效设计应当清晰直观，明确而一致。屏幕上的每一个变化，都会成为影响用户体验和用户决策的因素。当一个动效中容纳太多过程的时候，难免会让人看不清、感到迷惑，甚至在操作过程中失去方向感，少即是多是保持动效清晰明了的核心规则，当动效中同时包含形状、大小和位移变化时，请务必保持路径的清晰以及变化的直观性。（5）意图是UI动效的目的
在界面中，动效作为动态元素先天具有更加突出的属性，能够引导用户理解变化的趋势，并且不会觉得变化是突然的，在合适的时机引导用户注意力到合适的关注点上，让用户了解两者的因果关系。（6）快速响应使UI动效高效
视觉反馈在界面中的作用无疑是重要的，对于用户而言，想要确认信息的欲望是一种生物本能。UI应当精准而快速地针对用户的交互产生响应，只有这样用户才能将他们的操作、交互和控件的变化、效果联系到一起，形成回路。当用户清楚地知道什么样的操作会带来什么样的反馈，会觉得非常愉快。快速的动效能给用户一种爽利高效的感觉。为了兼顾动效的效率、理解的便捷以及用户体验，动效应该在用户触发之后的0.1s内开始，在300ms内结束，这样不会浪费用户的时间，还恰到好处。
总之，设计从来都不是天马行空、随心所欲的，每一个动作背后都有其意图所在。无论什么样的APP，这些动效原则都能让产品更加优秀。专注于最重要的事情，才不会让设计迷失，也不会让用户迷路。小心设计，关注每一个细节，才是成功的人机交互秘诀。
1.2 动效应用
优秀的动效设计在提升产品体验、用户黏性方面的积极作用有目共睹，已然成为Web、APP产品交互设计和界面设计必不可少的元素。1.2.1 移动APP动效
动效在移动APP方面有着广泛的应用。如果说界面布局可以组织操作界面元素的静态位置，那么动效可以组织操作界面元素在时间维度和空间维度上的演进。当动效引入时间维度后，界面的跳转、操作的反馈、信息内容的呈现等每一个交互的展现形式都更富有效性；当动效引入空间维度后，层次的表现、空间的拓展、3D的展现才得以体现。
动效不仅可以清楚地展示产品的细节，让用户更直观地了解一款产品的核心特征、用途、使用方法等，还可以有效地展示产品设计师的设计思想，让用户一目了然，节约沟通成本。1.2.2 Web网站动效
随着Web前端设计技术HTML5、CSS4、jQuery、JavaScript的发展和融合，以及支持这些技术各种浏览器的升级，Web动效已经不仅仅是网页设计的润滑剂了，它的功能更多地体现在了交互逻辑、视觉渲染和创新实践上，上能引人注目，下能潜移默化。下面是一些Web网站动效的例子，详细参考网页https://www.jiesc.net/tag/3d。（1）CSS+jQuery 3D动效的图书。通过CSS与jQuery结合，实现了图书的360度翻转效果和图书打开的过渡效果，书的封面、背面、书脊等部分都制作完成，如图1-1所示。（2）CSS+jQuery 3D动效海盗船。该动画分两部分，一个是用CSS3绘制的海盗船外观，船帆会迎风抖动；另一个是海面动画，船只在海面上迎风前行，非常逼真，如图1-2所示。图1-1 3D效果的图书图1-2 3D动效海盗船（3）CSS3打造3D立体的视觉效果。CSS3实现模拟iPhone样式的菜单，菜单整体呈现3D立体的视觉效果，如图1-3所示。（4）CSS+jQuery 3D星球天体运行动画。绘制了一颗较大的星球，然后在大星球周围有一圈很小的陨石区域，这些陨石会围绕着星球不停地旋转，而且配合黑色的背景，带有很强烈的3D视觉效果，如图1-4所示。（5）CSS+jQuery打造3D房间模型动画。房间里有电视机、沙发、书柜、灯具以及一个人物模型，这些模型都是在Canvas上绘制而成，更重要的是，这款3D动画可以利用HTML5特性读取本地麦克风和摄像头，这样就可以通过摄像头将你自己投影到电视机上，看上去挺神奇的，如图1-5所示。（6）CSS3实现3D折叠二级下拉菜单。这是一款外观非常炫酷的CSS3 3D下拉菜单，它的特点是主菜单的背景和页面背景非常融合，看上去就像菜单嵌入在页面中一样。并且当鼠标滑过菜单项时，会展开3D样式的二级子菜单，同时子菜单会产生摇晃折叠的动画效果，看起来十分炫酷，而这一切都是纯CSS3实现，如图1-6所示。图1-3 模拟iPhone立体菜单图1-4 3D星球天体运行动画图1-5 3D房间模型动画图1-6 3D折叠二级下拉菜单
1.3 移动APP动效设计
优秀的设计是无形的，一个优秀的动效能让你的APP变得友好而且抓人眼球，但是绝不会让用户分心，所有动效的主要任务都是向用户阐释APP的逻辑。1.3.1 什么是移动APP的交互动效设计
移动APP交互动效的范围包括那些能够为产品赋予生机的动态界面元素和视觉效果，交互效果包括特定响应行为相关的状态，甚至那些与交互行为没有直接关联的临时状态。苹果官方文档的解读是这样的“精细而恰当的动画效果可以传达状态、增强用户对于直接操纵的感知、通过视觉化的方式向用户呈现操作结果”。1.3.2 移动APP动效的作用
移动APP动效的作用就是动效达到的效果，好的APP动效设计也是对APP原型图的延伸和高级体现，是产品的“情感化设计”，APP动效设计是最完美的APP交互设计的原型图，主要有以下作用。（1）保持过渡切换流畅性
过渡的流畅是动效认识里最容易想到、也最被认可的效果。UI界面及其元素的各种变化在空间和时间维度上逐渐演进，使用户和产品的交互过程更流畅。（2）高效的反馈作用
高效的反馈是与用户之间交互的最重要元素，是动效最原始的需求。良好的反馈设计可以让用户更好地了解到操作的结果与程序当前的状态，减轻用户等待过程中的焦虑。（3）有效的帮助引导
移动APP可用的屏幕空间受限，很多功能必须隐藏起来，动效的作用是通过对功能的方向、位置、唤出操作、路径等进行暗示和指导，以便用户在有限的移动屏幕内发现更多功能。（4）复杂层次展现
随着移动终端硬件的不断升级，能够实现的功能越来越多，结构也越来越复杂，合理清晰的结构层级对用户理解应用和使用应用有着至关重要的作用，要想把结构展示地更加清晰，动效能够帮助用户构建空间感受。（5）增强APP的操纵感和体验感“操纵”是移动产品用户体验中很重要的目的，通过动效对现实世界的模拟并且不需要任何提示，使产品的交互方式更接近真实世界，通过动效理解和认知现实世界，使用户对应用的操纵感和带入感增强。（6）提升创新体验
如果产品已经拥有了良好的可用性，那么通过细节设计和交互方式创新为产品增加亮点，将动效融入产品之中，往往可以带来更愉悦地使用体验，也更细腻地表达应用的情绪和气质，带来更惊喜的体验，从而更好地展现产品的气质与态度。
好的动效设计既要保证物体运动的自然性，同时又能体现物体运动的优雅感、简约感和美感，让物体的运动充满魔力，打造无缝式的用户体验。快速反馈的动效不但极具美感，符合物理逻辑，而且能够愉悦用户，增强用户的信任感。反馈动效的设计必须深思熟虑且具有目的性。1.3.3 移动APP动效设计原则
前面已经展示了一些移动APP动效的例子，为了设计出真正成功的动效，Walt Disney提出来的动画的10条原则，可以非常有效地应用在UI设计中，内容主页：https://yalantis.com/blog/-seven-types-of-animations-for-mobile-apps/，如图1-7所示。
Walt Disney提出来的动画的10条原则的具体内容如下。（1）材质
材质展示动画包含了哪些元素：是轻还是重？静态还是动态？扁平的还是多维度的？让用户了解UI的这个元素将如何与其他人交互。（2）运动轨迹
必须定义运动的自然属性。通用原则是：无生命的机械物体通常是一个直线运动的轨迹，而生命体则具有更灵活和不那么平直的轨迹，首先必须决定你希望UI呈现什么，然后赋予它。（3）定时
在设计动画时，时间可以说是最重要的考虑因素之一。在现实世界中，物体不按直线运动的规律运动，是因为它们需要时间来加速和减速。使用曲线可以使物体运动得更自然。图1-7 Yalantis主页（4）动画焦点
动画焦点就是把注意力集中在屏幕的某一特定区域。例如，一个闪烁的图标会提醒用户应该按下它，因为有一个通知等待。动画焦点动效常用于有太多细节和元素的界面，以及没有办法清晰区分的特殊的元素界面。（5）跟随与重叠
跟随是行动的终止部分，即物体不会迅速停止或开始运动，每一个运动都可以表现为一组较小的运动组合，物体的每一部分都以其自身的速度运动。举个例子，当我们抛出一个球，球被释放后，手仍在继续移动。
重叠意味着第二个动作在第一个动作完成之前开始，这样可以吸引用户的注意力，因为两个动作之间并没有一段静止期。（6）次要动效
次要动效的原理类似于跟随和重叠原则，即主要动效可被次要动效伴随。次要动效能够使画面更加生动，但也会引起用户不必要的分神。（7）缓入和缓出
缓入和缓出是动画最基本的设计原则，对于一般的动画和在移动开发中的UI动画同样重要。缓入和缓出虽然理解容易，但这一原则常常被忽视。缓入和缓出源于现实世界中物体不能立即移动或停止的事实，每个物体都需要一定的加速和减速时间。当我们根据缓入和缓出原理设计动画时，该动画会产生一个非常真实的运动模式。（8）预期
预期原则适用于提示等视觉元素。在动效出现之前，我们可以给用户一些时间来预测会发生的情况。实现这种预期感的一种方法是应用缓入原则。物体朝特定方向移动也可以给出预期视觉提示，例如，一叠卡片出现在屏幕上，可以单击一个卡片使其发生倾斜，那么用户就可以推测出这些卡片可以移动。（9）韵律
动效中的韵律和音乐与舞蹈中的韵律有着同样的功能，可以使动效结构化，使动效更加自然。（10）夸张
夸张动效是基于被夸张化的预期动作或效果，非常有助于吸引用户额外的注意力到某些特殊方面。
下面对移动动效设计原则非常重要的五点进行总结，具体如下。（1）记住目标用户，因为设计方案是为了解决他们的问题。（2）确定动效的每个元素都具有其合理的理由（例如，为什么是这样、为什么会是如此、为什么是这个时间点）。（3）努力模仿自然界的运动模式来创造自然的动效，使产品有特色。（4）在项目的任何阶段，都要随时与开发人员保持沟通。（5）懂得分享，分享成果到https://github.com/yalanti或https://yalantis.com/等相关展示网站。1.3.4 移动APP交互动效分类
移动APP的交互动效按动效的出现时机进行分类，如图1-8所示。图1-8 移动APP交互按动效的出现时机分类
ENViews是一个华丽的动效控件库，所有控件原型取自Nick Buturishvili的设计作品，项目地址：https://github.com/codeestX/ENViews。
移动APP交互动效按照动效的用途方面进行分类，如图1-9所示。图1-9 移动APP交互动效按照动效的用途分类
移动APP交互动效设计，既能在产品的功能层面提供支持，又可以在表现层面发挥影响，在移动产品的交互设计中有着非常重要的作用。
1.4 Web网站动效设计
现在的网站通常都能很好地支持动画，随着HTML5、CSS4、jQuery等Web制作技术的发展，越来越多炫酷的动效在网页设计上普遍使用，动效的功能更多地体现在交互逻辑、视觉渲染和创新实践上，大大地提高了用户的体验效果。1.4.1 Web网站动效设计原则
动效能使内容表达得更彻底且简洁，逻辑更清楚。在设计Web动效时，用户应遵循下列原则。（1）动效技术
过去的动效大部分是通过Flash（现Flash软件更名为Anlmate）动画实现的，现在我们可以使用CSS/JavaScript/HTML5/jQuery来实现动画功能，目前这些技术已经能够实现许多高级动效来满足用户的需求。（2）通知、提示、推送应使用动效
运动的物体可吸引人的注意力，让消息通知、提示、推送动起来，是很好的提醒用户的方式，并且不会让他们感觉突兀。（3）信息隐藏使用动效
利用动效可以使界面中的部分信息隐藏，以节省所占用的屏幕空间。当进行某些操作后，隐藏的内容会动态展开，直到必要时再显示，从而达到简化初始界面的目的，使界面简洁大气，例如折叠菜单、导航菜单等。（4）内容聚焦使用动效
关键内容使用动效能够吸引用户的关注，突出内容的表现效果。（5）增强反馈使用动效
反馈对于体验的提高来讲非常重要，增强反馈可以起到更好的提示作用，使体验过程更加轻松愉悦、自然和引人注目。抖动是增强反馈的方法之一。（6）预见使用动效
通过动效的引导，使用户体验达到更加流畅预见内容的目的。（7）等待使用动效
太多的内容会导致加载时间过长，目前在技术层面解决这个问题比较困难，如果没办法缩短加载时间，那么可以让等待的过程更愉悦。等待动效缓解了这个问题，一个有趣的加载页面可产生更多情感价值而不是白白浪费等待时间。
事实上，动效的使用能实现与用户之间建立“情感”。与用户之间建立情感联系的应用和网站，会使体验过程更加轻松、愉悦，更容易获得用户的关注。1.4.2 动效网站设计欣赏
下面分享一些动效很酷的Web网站。（1）http://en.dunlop-tire.ru/，过渡型动效，效果自然流畅，如图1-10所示。图1-10 http：//en.dunlop-tire.ru/（2）http://bluemelhuber.de/，内容引导动效，特色明显，如图1-11所示。图1-11 http：//bluemelhuber.de/（3）https://www.evoenergy.co.uk/uk-energy-guide/，内容导航动效，表现手法新颖，如图1-12所示。图1-12 https：//www.evoenergy.co.uk/uk-energy-guide/（4）http://www.melanie-f.com/en/，开场动效，如图1-13所示。图1-13 http：//www.melanie-f.com/en/（5）http://headache-off.com/，非常酷的内容突出动效，如图1-14所示。图1-14 http：//headache-off.com/（6）http://www.kikk.be/2012/#，导航动效，如图1-15所示。图1-15 http：//www.kikk.be/2012/＃（7）http://babeltheking.com/eng，菜单切换动效，如图1-16所示。图1-16 http：//babeltheking.com/eng
1.5 动效设计方法
随着UI设计的不断发展，UI动效越来越多地被应用于实际生活中，手机、iPad、计算机、网页等设备都在大范围应用。动效设计是一种有关时间轴的逻辑艺术，也是一种有关质感的美学艺术，更是一种有关界面与操作的体验艺术。动效设计既能彰显功能性，亦能提升产品操作的趣味性和愉悦感。
1.设计原理
动效是指界面元素基于时间维度，在虚拟空间中呈现出的动态效果，动效设计涉及空间、时间、运动、夸张等多方面。（1）空间原理
动效的界面元素是对现实世界二维或三维空间的一种动态展示，这种展示要符合人类认识外界物体空间特性的规律，不仅能够帮助我们理解周围复杂的世界，还可以利用这种具有空间感的思考模式，帮助我们处理抽象的信息。设计师要想控制物体出现时的比例，就需要了解如何表现物体的大小，这涉及物体的形状、重量、远近、深度和方向等方面的联合展示。（2）运动原理
动效涉及界面元素的运动，运动要符合现实生活中物体的运动规律。在现实世界里，物体的运动状态会受到各种复杂因素的共同影响，诸如外界阻力、（内部）惯性等，且运动元素在空间上会处于某种介质，若介质发生变化，会产生非匀速运动。非匀速运动的表现手法也很多，并且在不同环境下会带给用户不同的感受。（3）夸张原理
在大部分的动效设计中，会应用到夸张手法，通过这一表现手法，能够突出某些细节或强调某些内容，来吸引用户，让界面变得更为生动有趣。
2.网页前端动效设计方法
网页前端动效采用的主要设计方法如下。（1）CSS：CSS是最轻盈的前端动效实现方式。（2）jQuery：动画效果是jQuery吸引人的地方，通过jQuery的动画方法，能够轻松地为网页添加视觉效果，给用户一种全新的体验。（3）JavaScript：JS在Web动效实现方面的应用最广，有大量的参考案例。（4）SVG Animation：SVG是矢量图，无限伸缩不失真，SVG支持CSS，可以在JavaScript中使用。（5）HTML5 Cavas：应用非常广泛，需要使用JavaScript操作。
3.设计软件
使用动效设计软件可以设计出高级且优美的动效，常用的设计软件有：Adobe After Effects、Adobe Photoshop、Adobe Animate CC、Pixate、Origami、Hype 3、Flinto、Principle、CINEMA 4D、Keynote、Proto.io、Atomic.io、Framer、ProtoPie等。
1.6 动效制作软件
在设计动效时，可根据动效的需求选择合适的软件进行设计，也可以组合选择几种软件共同设计，下面介绍常用的动效设计软件。1.6.1 After Effects
Adobe After Effects简称AE，是Adobe公司推出的一款特效制作软件，适用于从事设计和视频特效的机构使用，包括动画制作公司、影视特效后期制作工作室以及多媒体工作室。Adobe After Effects软件可以精确地创建无数种引人注目的动态图形和震撼人心的2D或3D视觉效果，很多美国大片都是通过它来进行后期合成制作的。该软件包含数百种预设的效果和动画，能与其他Adobe软件进行紧密集成和高度灵活地合成，为设计作品增添令人耳目一新的效果。
After Effects是一款功能超强大的动效制作软件，目前是动效设计的首选软件。使用该软件基本上可以制作出各种动效效果，同时导出的格式也比较丰富，缺点是交互效果差。
After Effects软件的下载页面：https://www.adobe.com/cn/products/aftereffects.html，如图1-17所示。图1-17 After Effects的下载页面1.6.2 Adobe Photoshop
Adobe Photoshop（简称PS），可能很多人都认为PS只用来作图和处理图像的，并不知道PS可以做Gif动效，其实在AE没有流行起来的时候，当时的UI设计师都是用PS做Gif动图，用Flash做Demo（过去我们只需要做PC桌面的动效）。PS从CS6之后开始进一步加强了动效的模块，现在的版本能够实现很多相对复杂的动效。
Adobe Photoshop软件的下载页面：https://www.adobe.com/cn/products/photoshop.html，如图1-18所示。图1-18 Adobe Photoshop的下载页面1.6.3 Adobe Illustrator
Adobe Illustrator是一种应用于出版、多媒体和在线图像的工业标准矢量插画软件，作为一款非常好用的矢量图形处理工具，该软件不仅能够绘制高精度的矢量图，而且可以为线稿提供较高的精度和控制。
该软件主要应用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网页面的制作等。
Adobe Illustrator软件的下载页面：https://www.adobe.com/cn/products/illustrator.html，如图1-19所示。图1-19 Adobe Illustrator的下载页面1.6.4 Adobe Edge Animate
Adobe Edge Animate是Adobe公司的一款新型网页互动工具，允许设计师通过采用HTML5、JavaScript、jQuery和CSS3等技术制作跨平台、跨浏览器的网页动画，能够生成基于HTML5的动画，可以方便地通过互联网传输，支持Android、iOS、WebOS，是一套完整的Web动画开发工具。
Adobe Edge Animate软件的下载页面：https://www.adobe.com/lu_en/products/edge-animate.html，如图1-20所示。图1-20 Adobe Edge Animate的下载页面1.6.5 Adobe Animate CC
Adobe Animate CC由Adobe Flash Professional CC转变而来。2015年12月2日，Adobe公司宣布Flash Professional更名为Animate CC，在支持Flash SWF和AIR格式文件的基础上，增加了HTML5动画制作以及交互设计功能，支持HTML5 Canvas、WebGL，强化HTML5动画制作规范。Adobe Animate CC相对Flash来说，拥有更多的新特性，能通过可扩展架构去支持包括SVG在内的几乎任何动画格式。
Adobe Animate CC软件的下载页面：https://www.adobe.com/cn/products/animate.html，如图1-21所示。图1-21 Adobe Animate CC的下载页面1.6.6 Quartz Composer
Quartz Composer（简称QC）是一款图形化的编程工具，也是一个强大的动画合成软件，为Apple在10.4Tiger的开发软件包中自带的、专门用来生成各种动态视觉效果。该工具功能齐全，不需要写一行的编码就可以做出非常复杂的动画，包括可交互的界面原型，输出到Interface Builder给程序用，或者输出Quicktime。
利用QC生成的交互原型是可操作的，而且生成的动态效果灵活丰富，自由度非常高，另外基本可以不写代码就实现生成动态效果与交互所需要的逻辑。在QC中，我们可以通过Timeline Patch来自定义动态变化的轨迹。
与QC相比，After Effects制作的交互演示动画是不可交互的，HTML/CSS/JS可以实现交互，但动画效果没有QC丰富灵活，用QC来实现动画效果某种程度上相当于用代码把动画效果写出来，但是QC效率不如AE高。如果制作网页动画的话，尽量使用HTML/CSS设计。可以把QC想象成图形化的jQuery，只需把封装好的代码模块组装且设好参数，便可以生成各种动态效果。1.6.7 Principle
Principle可以很容易地设计动画和交互式用户界面。无论是设计一个多界面应用程序，还是新的交互和动画，使用Principle都能设计出令人惊异的效果。
Principle是目前制作可交互Demo容易掌握、体验效果较好的软件，Principle是为Web、移动和桌面动画以及交互式用户界面设计的工具。在虚拟现实中使用Principle可以很快评估你的设计，从而加快了设计开发周期，
Principle的官方网址：http://principleformac.com/，如图1-22所示。图1-22 Principle的官方网址1.6.8 Framer
Framer是用于设计可交互动效的软件，可快速导入Photoshop、Sketch中的图像并模拟图层分层，支持手势，能在手机或平板中预览。Framer的官方网页：https://framer.com/。Framer的中文网：http://framerjscn.github.io/，如图1-23所示。1.6.9 jQuery
jQuery是一个响应速度快、软件占用内存小、功能丰富的JavaScript库，极大地简化了JavaScript编程，使HTML文档编辑、事件处理、动画和Ajax等操作更加简单，易于使用API兼容多种浏览器。jQuery结合多功能和可扩展性于一体，改变了数百万人编写JavaScript的方式。图1-23 Framer的中文网
jQuery软件的官方网页：https://jquery.com/，如图1-24所示。
试读结束[说明：试读内容隐藏了图片]