移动互联网之路：APP交互动画设计从入门到精通 After Effects篇

出版者:清华大学出版社

作者:李万军

页数:316

出版时间:2016-9-1

价格:49.00

装帧:平装

isbn号码:9787302441489

具体描述

本书介绍了APP交互动画的制作方法，具体操作时以After Effects CC为主要软件，输出时结合Photoshop CC进行全方位的学习。全书内容由浅入深，采用知识点和实例相结合的方法，在介绍After Effects CC基础知识的同时，着重讲解了交互动画的制作技巧。

全书共分9章，分别为交互动画设计的基础知识、辅助设计软件基础知识、使用After Effects中的图层与时间轴、制作关键帧动画、交互动画制作中蒙版的使用、制作文字动画、色彩校正特效与抠像技术、交互动画的渲染输出等。

本书附赠1张DVD光盘，其中不仅提供了书中所有实例的源文件和素材，还提供了所有实例的教学视频，以帮助读者迅速掌握使用After Effects CC进行APP交互动画制作的精髓，可以让新手能够零起步，进而跨入高手行列。

本书案例丰富、讲解细致，适合有一定After Effects软件操作基础的交互动画设计初学者以及相关从业人员阅读，也可作为各大院校相关设计专业的参考教材使用。

作者简介

李万军，北京市骨干教师，中国商业统计学会理事。从事交互设计工作多年。熟知交互设计在APP设计中的应用。有着丰富的设计基础。并参与多个大型网站项目的开发。Adobe认证讲师。并编写出版相关教材多本。并在多家设计公司任职设计总监。

目录信息

第1章　交互动画设计的基础知识
1.1　交互设计与交互动画 1
1.1.1　交互设计概述 1
1.1.2　关于交互动画设计 2
1.2　交互动画实现法则 3
1.2.1　易用性 3
1.2.2　有效性 4
1.2.3　高效性 5
1.2.4　容错性 6
1.3　不同领域中的交互动画 6
1.3.1　网页设计中的交互动画 7
1.3.2　软件界面中的交互动画 7
1.4　交互动画展示 8
1.5　After Effects基础知识 8
1.5.1　了解视频的相关术语 9
1.5.2　了解After Effects 11
1.5.3　 After Effects的应用领域 12
1.6　After Effects与交互动画设计 16
1.6.1　常见的交互动画效果 17
实例1　制作简单的位移效果交互动画 18
1.6.2　保存与格式的输出 20
1.7　本章小结 20
1.8　课后练习 21
========================================================
第2章　辅助设计软件基础知识
2.1　安装软件的系统要求 22
实例2　安装并启动After Effects CC 23
2.2　After Effects CC界面介绍 25
2.2.1　如何切换工作区 26
2.2.2　工具栏的使用 27
2.2.3　“项目”面板 27
2.2.4　“合成”窗口 28
2.2.5　“时间轴”面板 28
2.2.6　使用菜单栏 29
2.2.7　“信息”面板 32
2.2.8　“对齐”面板 32
2.2.9　“音频”面板 33
2.2.10　“预览”面板 33
2.2.11　“效果和预设”面板 33
2.2.12　“图层”面板 34
2.2.13　“效果控件”面板 34
2.2.14　“字符”面板 35
2.3　After Effects的基础操作 35
2.3.1　项目文件的基础操作 35
2.3.2　导入素材的文件 37
2.3.3　素材的基本操作 40
实例3　图形之间的相互转换 44
2.3.4　辅助功能的使用 48
实例4　在三维视图模式中编辑图像 54
2.3.5　After Effects中的基本工作流程 56
实例5　制作简单的交互动画 56
2.4　本章小结 62
2.5　课后练习 62
========================================================
第3章　使用After Effects中的图层与时间轴
3.1　图层的类型 63
3.1.1　素材图层 63
3.1.2　文本图层 64
实例6　交互动画制作中文本图层的使用 64
3.1.3　纯色图层 69
实例7　创建纯色背景 70
3.1.4　灯光图层 72
实例8　交互动画制作中灯光图层的使用 74
3.1.5　摄像机图层 79
实例9　交互动画制作中摄像机的使用 79
3.1.6　空对象图层 81
3.1.7　形状图层 81
3.1.8　调整图层 82
3.1.9　 Adobe Photoshop File(Photoshop文件层) 82
实例10　制作iOS 9关闭后台操作动画效果 83
3.2　图层的基本操作 92
3.2.1　创建层 92
3.2.2　选择层 92
3.2.3　删除层 93
3.2.4　改变层上下顺序 93
3.2.5　复制替换层 94
实例11　素材自动适合图像尺寸 95
3.2.6　序列层 96
3.2.7　图层与图层对齐和自动分布功能 97
3.2.8　为图层添加标记 97
3.3　图层的基本属性 99
3.3.1　锚点 99
3.3.2　位置 100
3.3.3　缩放 100
3.3.4　旋转 101
3.3.5　不透明度 101
3.4　图层的混合模式 102
3.4.1　图层混合模式的使用方法 102
3.4.2　图层混合模式的类型 103
实例12　制作简单的APP加载动画 104
3.5　认识“时间轴”面板 111
3.5.1　“音频/视频”控制选项 112
3.5.2　“图层”控制选项 112
3.5.3　“转换面板”控制选项 112
3.5.4　“模式”控制选项 113
3.5.5　Parent(父子链接)控制选项 114
3.5.6　“时间拉伸”控制选项 114
3.6　创建时间轴特效 114
3.6.1　颠倒时间 114
3.6.2　使用入点和出点控制面板 115
3.6.3　应用重置时间命令 116
3.6.4　倒退播放 116
3.6.5　延长时间 116
3.6.6　停止时间 117
3.7　本章小结 117
3.8　课后练习 118
========================================================
第4章　制作关键帧动画
4.1　关键帧的概念与基本操作 119
4.1.1　什么是关键帧 119
4.1.2　创建关键帧 120
实例13　交互动画制作中如何创建关键帧 120
4.1.3　选择关键帧 122
4.1.4　移动关键帧 123
4.1.5　复制关键帧 124
实例14　交互动画制作中的关键帧复制 124
4.1.6　删除关键帧 126
4.2　制作图层属性动画 127
4.2.1　变换选项 127
4.2.2　位移关键帧动画 129
实例15　交互动画制作中的位移关键帧 129
4.2.3　缩放关键帧 131
实例16　制作缩放关键帧动画 131
4.2.4　翻转关键帧 133
实例17　交互动画制作中的翻转关键帧 133
4.2.5　旋转关键帧 134
实例18　交互动画制作中的旋转关键帧 135
4.2.6　淡入淡出动画 136
实例19　制作交互动画中的淡入淡出效果 136
4.3　使用曲线编辑器 137
4.4　制作APP常用手势动画 138
实例20　常见的手势APP动画 138
4.5　本章小结 145
4.6　课后练习 145
========================================================
第5章　交互动画制作中蒙版的使用
5.1　使用After Effects中的蒙版 147
5.1.1　使用矩形工具创建矩形蒙版 148
实例21　交互动画制作中的矩形蒙版 149
5.1.2　使用椭圆工具创建椭圆形蒙版 150
实例22　交互动画制作中的椭圆蒙版 151
5.1.3　使用钢笔工具创建自由形状蒙版 153
实例23　交互动画制作中的自由形状蒙版 153
5.1.4　使用橡皮擦工具创建自由形状蒙版 155
实例24　交互动画制作中橡皮擦工具的使用 155
5.2　修改与设置蒙版 158
5.2.1　选择节点 158
5.2.2　移动节点 159
5.2.3　使用钢笔工具进行修改 160
5.2.4　锁定蒙版 161
5.2.5　变换蒙版 162
5.2.6　设置蒙版的属性 163
5.2.7　制作淡入动画效果 165
实例25　制作淡入动画效果 165
5.3　实现微信交互动画效果 168
实例26　实现微信交互动画效果 169
5.4　本章小结 175
5.5　课后练习 175
========================================================
第6章　制作文字动画
6.1　输入文字 177
6.1.1　通过文本图层创建点文字 178
实例27　交互动画制作中文本图层的使用 178
6.1.2　通过文字工具创建点文字 180
实例28　交互动画制作中创建点文字 180
6.1.3　创建段落文字 182
实例29　交互动画制作中创建段落文字 182
6.1.4　点文字与段落文字相互转换 184
实例30　点文字与段落文字的转换 184
6.2　设置文字属性 185
6.2.1　设置字符属性 186
6.2.2　设置段落属性 186
6.3　文字的动画属性 186
6.3.1　动画 187
实例31　制作文字动画效果 187
6.3.2　源文本 190
6.3.3　动画选择器 192
6.3.4　路径 192
6.3.5　文本动画预设 193
6.4　制作文字特效 195
6.4.1　基础文字特效 195
6.4.2　路径文字特效 195
6.4.3　数字特效 195
6.4.4　时间码特效 196
6.4.5　简单文字动画 196
实例32　制作简单的QQ发表心情动画效果 197
6.5　制作交互动画 205
实例33　制作简单的APP交互动画效果 205
6.6　本章小结 212
6.7　课后练习 212
========================================================
第7章　色彩校正特效与抠像技术
7.1　如何应用色彩调整 214
7.2　色彩校正特效 214
7.2.1　CC Color Neutralizer(CC色彩调和) 215
7.2.2　CC Color Offset(CC色彩偏移) 216
7.2.3　CC Kernel(CC颗粒) 216
7.2.4　CC Toner(CC色调) 217
7.2.5　PS任意映射 218
7.2.6　保留颜色 219
7.2.7　更改为颜色和更改颜色 219
7.2.8　广播颜色和黑白颜色 221
7.2.9　灰度系数/基值/增益和可选颜色 222
7.2.10　亮度和对比度以及曝光度 224
7.2.11　曲线和三色调 225
7.2.12　色调、色调均化和色光 226
7.2.13　色阶和色阶(单独控件) 228
7.2.14　色相/饱和度 230
7.2.15　通道混合器和颜色链接 231
7.2.16　颜色平衡和颜色平衡(HLS) 232
7.2.17　颜色稳定器和阴影/高光 234
7.2.18　照片滤镜 235
7.2.19　自动对比度、色阶和颜色 235
7.2.20　自然饱和度 237
7.3　色彩校正特效的应用 238
实例34　交互动画制作中色彩校正的应用 238
7.4　了解抠像的应用 247
7.5　键控抠像技术 247
7.5.1　CC Simple Wire Removal(CC线性擦除) 248
7.5.2　颜色差值键 249
7.5.3　颜色范围 249
7.5.4　差值遮罩 250
7.5.5　提取 251
7.5.6　内部/外部键 252
7.5.7　线性颜色键控 253
7.5.8　高级溢出抑制器 254
7.5.9　Keylight(外挂键控) 255
7.6　抠像技术的应用 256
实例35　掌握简单的抠像技术 256
7.7　本章小结 258
7.8　课后练习 258
========================================================
第8章　跟踪、稳定、表达式与特效
8.1　跟踪与稳定的应用 260
8.1.1　认识“跟踪器”面板 260
8.1.2　跟踪范围框 261
8.2　摇摆器 262
8.3　运动草图 262
实例36　运动草图实现的加载动画效果 263
8.4　了解表达式 267
8.4.1　复制应用表达式 267
8.4.2　将表达式转化为关键帧 267
8.5　表达式的操作 268
8.5.1　添加表达式 268
8.5.2　编辑表达式 269
8.5.3　删除表达式 269
8.5.4　保存和调整表达式 269
8.5.5　为表达式添加注释 270
8.5.6　表达式中的量 270
实例37　交互动画制作中表达式的使用 271
8.6　表达式语言菜单 276
8.7　使用After Effects中的特效 277
8.7.1　了解内置特效与使用方法 277
8.7.2　了解内置特效组 278
8.7.3　了解应用模拟特效 282
实例38　交互动画中特效的使用 283
8.8　本章小结 291
8.9　课后练习 291
========================================================
第9章　交互动画的渲染输出
9.1　什么是渲染动画 293
9.2　渲染工作区 293
实例39　手动调整渲染工作区 294
9.3　“渲染队列”面板 296
9.4　渲染设置 298
9.5　输出设置 299
9.6　动画的输出 300
实例40　输出标准的QuickTime格式文件 300
9.7　利用Photoshop生成最终动画 302
实例41　生成最终的GIF 格式动画 302
9.8　课后练习 304
· · · · · · (收起)

用户评价

这本书最打动我的地方，在于它始终贯穿的“用户导向”的设计理念。在《移动互联网之路：APP交互动画设计从入门到精通 After Effects篇》中，每一项动画的设计都不仅仅是为了好看，而是为了服务于用户，提升用户的使用体验。书中反复强调，好的交互动画应该是“无感”的，也就是说，用户在不经意间就能感受到它的便捷和愉悦。它讲解了如何通过恰当的动画来引导用户操作，如何通过细微的动画反馈来增强用户的成就感，以及如何通过流畅的转场来减少用户的认知负荷。我尤其欣赏书中关于“错误提示动画”和“等待加载动画”的设计，它们看似简单，却能在用户遇到问题或等待时，提供最及时、最友好的反馈，极大地缓解用户的焦虑情绪。这本书让我深刻理解到，交互动画的价值在于它能够真正地“润物细无声”，悄无声息地提升产品的整体品质。

在学习《移动互联网之路：APP交互动画设计从入门到精通 After Effects篇》的过程中，我最大的感触是这本书的“系统性”和“全面性”。它不是零散的技术点堆砌，而是一个完整知识体系的构建。从最基础的AE操作，到APP交互动画的核心理念，再到高级的动画技巧和优化方法，它覆盖了从入门到精通的整个学习过程。我特别喜欢书中对于“动效设计流程”的梳理，它清晰地展示了从需求分析、方案设计、动画制作到最终交付的完整链条，让我能够清晰地认识到自己在整个流程中的位置，以及如何更有效地与团队协作。此外，书中还涉及了一些关于“动画规范”的讨论，比如如何为团队建立统一的动效标准，这对于保证项目质量和提升效率都至关重要。总的来说，这本书为我提供了一个非常扎实的学习框架，让我能够更有条理地去学习和掌握APP交互动画设计。

作为一名资深的AE用户，我一直觉得AE的性能优化和效率提升是重中之重。《移动互联网之路：APP交互动画设计从入门到精通 After Effects篇》这本书在这方面也给了我不少启发。书中不仅教我们如何使用AE的各项功能，更重要的是教会我们如何“聪明”地使用AE。比如，它分享了一些关于文件管理、项目结构优化的技巧，如何合理地组织图层、预合成，如何利用表达式和脚本来减少重复劳动。我曾经在处理一些大型的APP交互动画项目时，经常会遇到性能瓶颈，导致AE卡顿甚至崩溃。而这本书中介绍的“缓存策略”、“渲染优化”等技巧，则为我指明了方向，让我能够更流畅地完成复杂项目。此外，书中还推荐了一些与AE配套使用的工具，比如用于快速制作UI动效的插件，这让我深刻体会到，高效的工具和方法论是提升工作效率的关键。

对于我这样一个追求效率的上班族来说，时间就是金钱，学习也是如此。这本书在时间管理和学习效率方面给了我很大的启发。《移动互联网之路：APP交互动画设计从入门到精通 After Effects篇》的结构设计非常合理，每一章节都紧密联系，循序渐进。它不会让你感到信息过载，而是让你有足够的时间去消化和实践。而且，书中提供的配套资源也非常丰富，比如源文件、素材包等，这极大地节省了我们自己寻找素材和反复尝试的时间。我尤其欣赏书中关于“快速原型动画”的讲解，它强调了在产品早期阶段，利用AE快速制作可交互的原型动画，以便于团队沟通和用户测试的重要性。书中提供了一些高效的AE插件和脚本的推荐，并教会了如何利用它们来提高工作效率，这一点对我来说简直是福音。总而言之，这本书在兼顾深度和广度的同时，还非常注重实操性和效率，让我感觉每一分钟的学习都得到了最大化的回报。

这本书最让我惊喜的，是它在案例选择上的独到之处。它并没有一味追求炫酷、复杂的动画效果，而是将重点放在了APP中最常用、最能提升用户体验的交互动画上，比如按钮的点击反馈、列表的加载动画、界面的切换转场、加载提示、错误提示等等。每一个案例都非常贴合实际工作中的需求，而且步骤讲解得异常细致。它不仅仅是告诉你“怎么做”，更重要的是“为什么这么做”。在讲解每个动画时，作者都会穿插对交互设计原则的阐述，比如动画的时机、缓动曲线对感受的影响、信息层级的传达等等。这让我不仅仅学会了AE的操作技巧，更重要的是在潜移默化中提升了对交互动画设计的理解和思考能力。我特别喜欢书中对缓动曲线的讲解，它详细分析了不同缓动曲线对动画节奏和情绪的影响，并通过大量的实例对比，让我彻底理解了“四两拨千斤”的奥妙。这本书让我意识到，好的交互动画不仅仅是视觉上的锦上添花，更是关乎用户情绪和操作效率的关键环节。

对于任何一款APP而言，流畅的交互动画都是其用户体验的灵魂。《移动互联网之路：APP交互动画设计从入门到精通 After Effects篇》这本书，恰恰点燃了这个灵魂。它不仅仅是一个技术教程，更是一本关于“如何让APP活起来”的设计指南。我尤其欣赏书中对于“动画的节奏感”和“运动的物理规律”的深入剖析。它详细讲解了如何利用缓动曲线（Ease Curve）来控制动画的加速和减速，从而赋予动画更自然的运动轨迹，避免生硬的机械感。书中还通过大量图示和实际案例，阐述了牛顿运动定律在动画设计中的应用，比如惯性、反作用力等，这些都让动画效果更加真实、生动。读完这本书，我仿佛打开了一个新的维度，看到了APP界面背后隐藏的无限可能性，也让我更加坚定了在交互动画领域深耕的决心。

在阅读《移动互联网之路：APP交互动画设计从入门到精通 After Effects篇》的过程中，我深刻体会到了“精通”二字背后的匠心。这本书并非停留在基础操作的层面，而是深入到了一些更高级的技巧和理念。比如，书中对“形变动画”（Shape Layer Animation）的讲解就非常透彻，它不只演示了如何制作复杂的图形动画，更重要的是分析了形变动画在传达动态信息、增强视觉趣味性方面的巨大潜力。此外，书中还涉及了一些关于“3D动画”在APP交互中的应用，虽然可能在大多数APP中不常用，但了解这些高级技巧，能极大地拓展我们的设计思维。最让我印象深刻的是，作者在讲解一些复杂的动画效果时，会反复强调“分解”和“模块化”的思想，教我们如何将一个复杂的动画拆解成若干个可控的小单元，再进行组合和优化。这种“化繁为简”的思路，不仅在AE操作上是高效的，在整个设计过程中也是非常有价值的。

我是一名UI/UX设计师，一直在思考如何让我的作品更具“生命力”。《移动互联网之路：APP交互动画设计从入门到精通 After Effects篇》这本书，就像为我打开了一扇新的大门。它让我明白了，优秀的APP交互动画并非只是让东西动起来那么简单，而是需要与用户的情感、操作逻辑紧密相连。书中对“动画情绪”的探讨让我耳目一新，它分析了不同动画速度、节奏、运动轨迹如何影响用户的情绪感知，比如平缓的动画传递的是稳定和可靠，快速跳跃的动画则带来活力和惊喜。我尤其喜欢书中关于“微交互动画”的设计案例，那些细微之处的动画反馈，比如按钮按下时的轻微形变、加载完成时的柔和过渡，它们虽然不起眼，却能极大地提升用户的满意度和信任感。这本书让我从一个单纯的“视觉设计者”向一个更全面的“体验设计者”转变。

刚拿到这本《移动互联网之路：APP交互动画设计从入门到精通 After Effects篇》，迫不及待地翻阅起来。作为一名初涉APP交互设计的小白，我对After Effects（AE）一直心存敬畏，总觉得它是个功能庞大、门槛极高的软件。然而，这本书从一开始就展现了一种循序渐进、耐心引导的态度。序言部分就点明了移动互联网时代APP交互动画的重要性，并清晰地勾勒出了学习AE进行APP交互动画设计的完整路径。我尤其喜欢它没有一开始就抛出复杂的案例，而是从最基础的AE界面介绍、关键概念讲解开始，比如图层、关键帧、时间轴、合成等，这些都是构建动画的基石。作者的语言通俗易懂，避免了过多的技术术语堆砌，用了很多生动的比喻来解释抽象的概念，让我这种零基础的人也能很快建立起对AE工作流程的基本认知。而且，它并没有回避AE的一些难点，比如表达式和脚本，但处理得非常巧妙，像是为我们铺垫好了学习的阶梯，让我觉得这些看似高深的功能也并非遥不可及。整体感觉这本书是在“带”着你学，而不是“教”你学，更像是一个经验丰富的同行在旁边手把手地指导，让人充满了学习的动力和信心。

从我个人的角度来看，《移动互联网之路：APP交互动画设计从入门到精通 After Effects篇》最成功的地方在于它能够激发读者的创造力。它不仅仅是教你技术，更重要的是引导你思考。书中在讲解一些基础动画技巧后，都会鼓励读者去进行二次创作，提出一些开放性的问题，引导你去探索更多的可能性。我特别喜欢书中关于“动效预设”的讲解，它展示了如何将常用的动画效果打包成预设，方便以后快速调用。但这不仅仅是节省时间，更重要的是，它让我们学会了将设计思维转化为可复用的“动效模块”。我曾经尝试着根据书中的方法，将我日常设计中的一些交互动效做成自己的动效库，这极大地提升了我后续项目的效率。而且，书中还鼓励我们去模仿优秀的APP动效，并尝试着去分析和复刻，这是一种非常有效的学习方式，能够快速提升我们的审美和技术水平。