第1章 动效基础知识 1
1.1 为什么要为APP设计动效 1
1.2 动效应用 2
1.2.1 移动APP动效 2
1.2.2 Web网站动效 3
1.3 移动APP动效设计 4
1.3.1 什么是移动APP的交互动效设计 4
1.3.2 移动APP动效的作用 4
1.3.3 移动APP动效设计原则 5
1.3.4 移动APP交互动效分类 7
1.4 Web网站动效设计 8
1.4.1 Web网站动效设计原则 8
1.4.2 动效网站设计欣赏 8
1.5 动效设计方法 11
1.6 动效制作软件 12
1.6.1 After Effects 12
1.6.2 Adobe Photoshop 12
1.6.3 Adobe Illustrator 13
1.6.4 Adobe Edge Animate 14
1.6.5 Adobe Animate CC 14
1.6.6 Quartz Composer 15
1.6.7 Principle 15
1.6.8 Framer 15
1.6.9 jQuery 15
1.6.10 Origami 16
1.6.11 Cinema 4D 17
1.6.12 Flinto 17
1.6.13 Hype 18
1.7 动效设计流程 18
1.8 本章小结 18
第2章 动效的分类和作用 19
2.1 基础动效 19
2.1.1 运动 19
2.1.2 放大和缩小 21
2.1.3 消失和出现 21
2.1.4 翻转 22
2.1.5 旋转 23
2.1.6 变形 23
2.1.7 变色 25
2.2 动效作用 26
2.2.1 使界面充满动感 26
2.2.2 系统状态动态提示 27
2.2.3 使界面友好有趣 27
2.2.4 流畅的过渡 28
2.2.5 界面元素的灵活隐藏和展示 29
2.2.6 增强操纵感 31
2.2.7 高效反馈 32
2.2.8 引导作用 33
2.2.9 创新体验 34
2.3 动效分类 34
2.3.1 视觉反馈动效 34
2.3.2 空间拓展动效 35
2.3.3 功能改变动效 35
2.3.4 层次结构交互动效 36
2.3.5 视觉提示动效 36
2.3.6 系统应用提示动效 37
2.3.7 趣味交互动效 37
2.3.8 转场动效 37
2.4 动效评判 37
2.5 本章小结 38
第3章 After Effects的应用 39
3.1 After Effects简介 39
3.1.1 After Effects软件及特点 39
3.1.2 After Effects CC工作界面 40
3.1.3 After Effects CC的合成 44
3.1.4 After Effects CC的图层 45
3.1.5 After Effects CC的渲染 46
3.2 After Effects CC动画 47
3.2.1 关键帧动画 47
3.2.2 效果动画 48
3.2.3 蒙版动画 49
3.2.4 文字动画 50
3.2.5 表达式动画 51
3.2.6 3D动画 52
3.3 After Effects动画导出 53
3.3.1 导出为视频和图像序列 53
3.3.2 应用Bodymovin把After Effects动画转换成Web/Android/iOS原生动画 54
3.3.3 应用Lottie库实现Android/iOS/Web加载After Effects动画 56
3.4 在Android中应用After Effects动画 57
3.5 在Web中应用After Effects动画 60
3.6 本章小结 61
第4章 Android基础动画 62
4.1 绘图动画 62
4.1.1 Graphics类基础 62
4.1.2 Matrix类变换图片 63
4.1.3 绘制路径文字 64
4.1.4 绘制图片倒影 65
4.1.5 drawBitmapMesh实现图像扭曲 66
4.2 矢量动画 68
4.2.1 Android SVG动画 69
4.2.2 插值动画 72
4.3 Drawable动画 73
4.3.1 Drawable类 74
4.3.2 Drawable实现Frame动画效果 75
4.3.3 Drawable的高效用法 76
4.4 Tween补间动画 78
4.5 属性动画 79
4.5.1 Animator 79
4.5.2 ObjectAnimator 79
4.5.3 AnimatorSet 80
4.6 控件动画 82
4.6.1 图片滑动切换 82
4.6.2 图片手势放大缩小 90
4.6.3 PhotoView和ViewPager实现图片滑动和缩放 93
4.6.4 列表折叠 96
4.7 本章小结 101
第5章 APP基本动效 102
5.1 滑动 102
5.2 缩放 104
5.3 展开折叠 106
5.4 横竖屏切换 108
5.5 堆叠切换 110
5.6 提示 113
5.7 图表 115
5.7.1 MPAndroidChart 115
5.7.2 HelloCharts 116
5.7.3 AChartEngine 119
5.7.4 XCL-Charts 120
5.7.5 GraphView 122
5.7.6 HTML5数据图表 124
5.8 滑动删除 125
5.9 GitHub中优秀的开源动效项目 127
5.10 本章小结 132
第6章 APP进阶动效 133
6.1 图标 133
6.1.1 PS打造相机图标 133
6.1.2 AI打造动感立体图标 135
6.2 导航和菜单动效 138
6.2.1 BottomTabBar实现导航动效 138
6.2.2 DrawerLayout和Navigation View实现Android策划菜单 139
6.2.3 jQuery和CSS3制作手风琴折叠菜单 141
6.2.4 jQuery和CSS3实现导航菜单 143
6.3 Loading动效 146
6.3.1 Android中进度条 146
6.3.2 Progress Wheel 149
6.3.3 AE制作水波纹Loading 150
6.3.4 AE插件Loadup轻松创建各式Loading进度条 152
6.4 手势动画 155
6.4.1 Android手势动画 155
6.4.2 点击波网页动画特效 157
6.4.3 AE手势动画库 158
6.5 文字动效 160
6.5.1 AI与AE打造漂亮字体动效 160
6.5.2 AE Saber插件制作字体动效 162
6.5.3 jQuery和CSS3实现彩色霓虹灯发光文字动效 164
6.5.4 网页SVG文字动效 164
6.5.5 AE Super Text Pack 167
6.6 AE Trapcode插件 169
6.6.1 安装Trapcode 169
6.6.2 Trapcode Particular粒子特效 171
6.6.3 Trapcode 3D Stroke制作文字描边 175
6.6.4 Trapcode Mir制作变形动画 178
6.7 本章小结 183
第7章 Android中的3D动画 184
7.1 Camera 3D动画实现 184
7.1.1 Camera 3D实现图片旋转动画 184
7.1.2 Roate3dAnimation实现旋转图片动画 186
7.1.3 Rotate3D实现3D旋转动画 188
7.1.4 Camera与Matrix实现3D立方体 191
7.2 OpenGL ES 193
7.2.1 OpenGL ES基础 194
7.2.2 在Android中使用OpenGL ES 195
7.2.3 Android中OpenGL ES基本操作 196
7.2.4 OpenGL ES实现彩色旋转的立方体 198
7.3 本章小结 202
第8章 HTML5动画 203
8.1 HTML5动画简介 203
8.1.1 canvas元素结合JavaScript 203
8.1.2 纯粹的CSS3动画 204
8.1.3 jQuery动画 207
8.1.4 HTML5动画制作工具 210
8.2 DragonBones 211
8.2.1 DragonBones基本操作 212
8.2.2 骨骼动画——人行走 216
8.2.3 动漫动画——飞舞的蝴蝶 220
8.3 Adobe Animate CC 223
8.3.1 Adobe Animate CC基本操作 223
8.3.2 制作烛光动画 228
8.3.3 制作喷泉动画 231
8.4 本章小结 235
第9章 Cinema 4D制作3D特效 236
9.1 Cinema 4D简介 236
9.2 Cinema 4D基本操作 238
9.3 模拟标签 242
9.3.1 圆球抖落 243
9.3.2 布料飘落 245
9.4 Cinema 4D运动图形 247
9.4.1 Cinema 4D运动图形菜单 248
9.4.2 文字变碎片的抖落动画 249
9.5 Cinema 4D角色动画 255
9.5.1 Mixamo3D人物模型和动画平台 256
9.5.2 CMotion实现人物路径运动 257
9.6 RealFlow插件实现流水动画 260
9.7 After Effects与Cinema 4D 265
9.8 本章小结 267