After Effects CC移动UI动效设计必修课

      《After Effects CC移动UI动效设计必修课》重点讲解的是界面设计中的动效制作部分。对于界面设计师来说，掌握一些动效设计和制作技术很有必要，例如在设计界面交互动效、项目宣传MG动画、产品吉祥物表情包、年终汇报图表时，这些技能可以辅助设计师更好地包装输出。
     《After Effects CC移动UI动效设计必修课》是一本帮助读者快速入门并提高实战能力的学习用书，采用完全适合自学的“教程 案例”和“完全案例”两种编写形式，所有案例均精心挑选和制作，按照UI动效的实际应用进行划分，每一章的案例在编排上循序渐进，力求带领读者深入商业应用的层面，讲解不同风格的动效设计和应用技巧。
      《After Effects CC移动UI动效设计必修课》着重讲解如何在After Effects CC中设计和制作UI动效单元，包括加载动效、Logo演绎动画、液态动效、MG风格动效、三维空间效果、文字动效、动感Banner、典型插件特效等。在制作一些装饰性元素时，为了提高效率，对经常使用的表达式、粒子和多种插件都通过案例进行了细致的讲解，针对一些特殊的场合还会结合Photoshop和C4D等软件进行整合运用。
      《After Effects CC移动UI动效设计必修课》由具有丰富经验的UI和AE动效设计师编写，从工作界面和合成动效的一般流程入手，逐步引导读者学习UI动效设计的基础知识、高级粒子和脚本动画的应用等各种技能。希望本书能够帮助读者解决学习中的难题，提高技术水平，快速成为设计和制作UI动效的高手。

 

       《After Effects CC移动UI动效设计必修课》采用技术理论与具体案例相结合的方式，详细讲解了中文版fter Effects CC在UI动效设计方面的应用，包括图层控制、动画功能、合成技巧和常用插件，以及典型案例的制作流程和技术手段。讲解的动效设计理论简洁实用，选用的案例贴近实战。

        《After Effects CC移动UI动效设计必修课》共8章内容，包括UI设计行业概况、认识UI动效和After Effects CC、图层控制与动画、三维空间合成、文字与图形动效、高级运动技巧、粒子与破碎特效以及典型插件特效等，以“教程 案例”的形式将UI动效制作的技巧、经验和风格进行演示和总结。案例涉及加载动效、C4D场景动效、模拟全景动效、文字图形变幻动效、烟花落叶动效和各种插件特效等内容。此外，还对当前流行的表达式和脚本应用技巧进行了重点讲解，为读者在UI动效设计和制作工作中保持高效提供了很好的经验。

     《After Effects CC移动UI动效设计必修课》是初中级动效设计人员快速学习After Effects的工具书，既可以作为高等院校相关专业的教材，又可以作为UI设计和影视后期制作培训机构的教材，还适合已从业的界面设计师和后期合成师作为参考读物。

目  录

 

第1章　UI设计行业概况

1.1　UI行业发展前景   1

1.2　UI设计常用工具   2

1.3　交互设计的原则      7

1.4　本章小结      8

第2章　认识UI动效和After Effects CC

2.1　认识UI动效   9

2.1.1　UI动效的概念      9

2.1.2　UI动效的神奇用途   10

2.2　After Effects CC功能概述   11

2.2.1　After Effects CC功能简介      11

2.2.2　After Effects CC工作界面      12

2.3　After Effects CC工作流程   19

2.3.1　设计项目      19

2.3.2　偏好设置      20

2.3.3　组织和管理素材   21

2.3.4　输出设置      23

2.4　入门练习      25

2.4.1　加载条动画   25

2.4.2　加载进度百分数   27

2.4.3　Logo演绎动画      30

2.5　本章小结      33

第3章　图层控制与动画

3.1　图层控制      34

3.1.1　创建与管理图层   34

3.1.2　图层剪辑      36

3.1.3　混合模式      38

3.2　透明控制      42

3.2.1　透明概念      43

3.2.2　轨道遮罩      43

3.2.3　应用蒙版      44

3.2.4　抠像特技      47

3.3　图层运动      49

3.3.1　图层运动概述   49

3.3.2　运动路径      50

3.3.3　运动预设      53

3.4　课堂练习      55

3.4.1　液态动效      55

3.4.2　启动页动效   58

3.4.3　燃烧显露Logo      62

3.4.4　MG风格      66

3.4.5　环形刻度计时动效   71

3.5　本章小结      75

第4章　三维空间合成

4.1　三维图层概述      76

4.2　应用灯光技术      79

4.2.1　创建灯光      79

4.2.2　灯光参数      81

4.3　应用摄像机      83

4.3.1　摄像机技术   83

4.3.2　摄像机参数   85

4.4　课堂练习      86

4.4.1　卡片飘落      86

4.4.2　礼花魔盒      89

4.4.3　立体Logo投影      96

4.4.4　C4D场景动效   100

4.4.5　模拟全景动效   106

4.5　本章小结   114

第5章　文字与图形动效

5.1　创建文本图层      115

5.1.1　创建文本   115

5.1.2　编辑文本   116

5.2　文本动画   118

5.2.1　源文本动画   118

5.2.2　动画器与选择器   118

5.2.3　应用文本动画预设   121

5.2.4　操作文本路径   123

5.3　高级绘画工具   124

5.3.1　选择与调整笔刷   125

5.3.2　操作绘画时间线   126

5.3.3　高级仿制工具   128

5.4　形状图层运动   129

5.5　课堂练习   133

5.5.1　字符闪烁   133

5.5.2　手写字效果   135

5.5.3　MG风格效果      140

5.5.4　动感图形组合   146

5.5.5　动感Banner   152

5.5.6　黑板报效果   159

5.5.7　HUD动效单元   165

5.6　本章小结   169

第6章　高级运动技巧

6.1　运动曲线编辑器      170

6.1.1　运动插值概述   170

6.1.2　编辑运动曲线   172

6.1.3　调节速率   173

6.2　表达式动画控制      175

6.2.1　表达式概述   175

6.2.2　创建表达式   176

6.2.3　常用表达式实例   179

6.3　音频的视觉化特效      183

6.4　课堂练习   186

6.4.1　Logo演绎      186

6.4.2　花饰加载动效   192

6.4.3　几何图形变幻   202

6.4.4　音量指针动效   207

6.4.5　彩蝶飞舞   212

6.5　本章小结   219

第7章　粒子与破碎特效

7.1　粒子运动场      220

7.1.1　运动场控制   220

7.1.2　粒子形状控制   223

7.1.3　粒子行为控制   224

7.1.4　属性映射器控制   227

7.2　破碎效果   230

7.2.1　显示与渲染选项   231

7.2.2　破碎选项   231

7.2.3　三维效果   234

7.3　课堂练习   236

7.3.1　粒子汇聚Logo   236

7.3.2　烟花效果   241

7.3.3　零落的标牌   245

7.3.4　文字成烟   251

7.3.5　飘落的秋叶   257

7.4　本章小结   262

第8章　典型插件特效

8.1　CC插件组      263

8.1.1　CC插件简介      263

8.1.2　油漆Logo效果   266

8.1.3　泡泡文字   270

8.2　Trapcode插件组      272

8.2.1　插件简介   272

8.2.2　流光溢彩   273

8.2.3　炫彩Logo    276

8.2.4　晶格背景   279

8.2.5　字烟缥缈   283

8.3　其他视效插件   287

8.3.1　Optical光斑   287

8.3.2　Newton动力学特效   291

8.3.3　Plexus点线空间   295

8.3.4　Stardust粒子特效   301

8.4　动画脚本插件   307

8.4.1　快速制作进度条   307

8.4.2　3D折纸   310

8.4.3　排版图形变幻   311

8.4.4　自动图形连线   316

8.5　本章小结   319

 

前  言

 

UI即User Interface（用户界面）的简称，UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计，也叫用户界面设计。用户界面设计行业刚刚在全球软件业兴起时，属于高新技术设计产业，专业人才稀缺，人才资源争夺激烈，就业市场供不应求。如今，国内的UI设计行业日益发展，有了专门的职业分工，也开始出现一些高水准的一线设计师与UI设计交流组织，众多大型IT企业均已成立专业的UI设计部门。

从字面上看，UI包含用户与界面两个部分，实际上还包括用户与界面之间的交互关系，其实可分为用户研究、交互设计和界面设计3个方面。随着移动端设备的普及和网速的不断提升，目前的界面已不仅限于版式图标的设计和信息页面的浏览，多种多样的动效元素也是非常具有吸引力的，也往往能给用户留下深刻的印象和好感。UI动效可以通过交互设计工具进行图形单元的运动、转场，以及轨迹和时间轴的设置，也可以通过添加小模块来增加动感。

《After Effects CC移动UI动效设计必修课》重点讲解的是界面设计中的动效制作部分。对于界面设计师来说，掌握一些动效设计和制作技术很有必要，例如在设计界面交互动效、项目宣传MG动画、产品吉祥物表情包、年终汇报图表时，这些技能可以辅助设计师更好地包装输出。

《After Effects CC移动UI动效设计必修课》是一本帮助读者快速入门并提高实战能力的学习用书，采用完全适合自学的“教程 案例”和“完全案例”两种编写形式，所有案例均精心挑选和制作，按照UI动效的实际应用进行划分，每一章的案例在编排上循序渐进，力求带领读者深入商业应用的层面，讲解不同风格的动效设计和应用技巧。

《After Effects CC移动UI动效设计必修课》着重讲解如何在After Effects CC中设计和制作UI动效单元，包括加载动效、Logo演绎动画、液态动效、MG风格动效、三维空间效果、文字动效、动感Banner、典型插件特效等。在制作一些装饰性元素时，为了提高效率，对经常使用的表达式、粒子和多种插件都通过案例进行了细致的讲解，针对一些特殊的场合还会结合Photoshop和C4D等软件进行整合运用。

《After Effects CC移动UI动效设计必修课》由具有丰富经验的UI和AE动效设计师编写，从工作界面和合成动效的一般流程入手，逐步引导读者学习UI动效设计的基础知识、高级粒子和脚本动画的应用等各种技能。希望《After Effects CC移动UI动效设计必修课》能够帮助读者解决学习中的难题，提高技术水平，快速成为设计和制作UI动效的高手。

《After Effects CC移动UI动效设计必修课》由吴桢、路倩和王志新编著，在成书的过程中，赵新伟、赵昆、吴月、刘一凡、吴倩、李英杰、梁磊、赵婷、彭聪、朱虹、王妍、李烨、师晶晶、华冰、赵建、王淑军、周炜、李占方、贾燕、杨柳、朱鹏、张峰、苗鹏、刘鸿燕、陈瑞瑞等人参与了部分内容的编写工作。由于作者水平所限，书中难免有疏漏和不足之处，恳请广大读者批评指正。

为了方便读者学习，《After Effects CC移动UI动效设计必修课》为每个案例提供了教学视频，只要扫描一下书中案例名称旁边的二维码，即可直接打开视频进行观看，或者推送到自己的邮箱中下载后进行观看。《After Effects CC移动UI动效设计必修课》配套的学习资源中提供了书中所有案例的工程文件、教学视频和PPT 课件。读者在学习时可扫描下面的二维码，然后将内容推送到自己的邮箱中，即可下载获取相应的资源( 注意：请将这两个二维码下的压缩文件全部下载完毕后，再进行解压，即可得到完整的文件内容)。

 

编    者