第1章 动效基础知识

1.1 为什么要为APP设计动效

1.2 动效应用

1.2.1 移动APP动效

1.2.2 Web网站动效

1.3 移动APP动效设计

1.3.1 什么是移动APP的交互动效设计

1.3.2 移动APP动效的作用

1.3.3 移动APP动效设计原则

1.3.4 移动APP交互动效分类

1.4 Web网站动效设计

1.4.1 Web网站动效设计原则

1.4.2 动效网站设计欣赏

1.5 动效设计方法

1.6 动效制作软件

1.6.1 After Effects

1.6.2 Adobe Photoshop

1.6.3 Adobe Illustrator

1.6.4 Adobe Edge Animate

1.6.5 Adobe Animate CC

1.6.6 Quartz Composer

1.6.7 Principle

1.6.8 Framer

1.6.9 jQuery

1.6.10 Origami

1.6.11 Cinema 4D

1.6.12 Flinto

1.6.13 Hype

1.7 动效设计流程

1.8 本章小结

第2章 动效的分类和作用

2.1 基础动效

2.1.1 运动

2.1.2 放大和缩小

2.1.3 消失和出现

2.1.4 翻转

2.1.5 旋转

2.1.6 变形

2.1.7 变色

2.2 动效作用

2.2.1 使界面充满动感

2.2.2 系统状态动态提示

2.2.3 使界面友好有趣

2.2.4 流畅的过渡

2.2.5 界面元素的灵活隐藏和展示

2.2.6 增强操纵感

2.2.7 高效反馈

2.2.8 引导作用

2.2.9 创新体验

2.3 动效分类

2.3.1 视觉反馈动效

2.3.2 空间拓展动效

2.3.3 功能改变动效

2.3.4 层次结构交互动效

2.3.5 视觉提示动效

2.3.6 系统应用提示动效

2.3.7 趣味交互动效

2.3.8 转场动效

2.4 动效评判

2.5 本章小结

第3章 After Effects的应用

3.1 After Effects简介

3.1.1 After Effects软件及特点

3.1.2 After Effects CC工作界面

3.1.3 After Effects CC的合成

3.1.4 After Effects CC的图层

3.1.5 After Effects CC的渲染

3.2 After Effects CC动画

3.2.1 关键帧动画

3.2.2 效果动画

3.2.3 蒙版动画

3.2.4 文字动画

3.2.5 表达式动画

3.2.6 3D动画

3.3 After Effects动画导出

3.3.1 导出为视频和图像序列

3.3.2 应用Bodymovin把After Effects动画转换成Web/Android/iOS原生动画

3.3.3 应用Lottie库实现Android/iOS/Web加载After Effects动画

3.4 在Android中应用After Effects动画

3.5 在Web中应用After Effects动画

3.6 本章小结

第4章 Android基础动画

4.1 绘图动画

4.1.1 Graphics类基础

4.1.2 Matrix类变换图片

4.1.3 绘制路径文字

4.1.4 绘制图片倒影

4.1.5 drawBitmapMesh实现图像扭曲

4.2 矢量动画

4.2.1 Android SVG动画

4.2.2 插值动画

4.3 Drawable动画

4.3.1 Drawable类

4.3.2 Drawable实现Frame动画效果

4.3.3 Drawable的高效用法

4.4 Tween补间动画

4.5 属性动画

4.5.1 Animator

4.5.2 ObjectAnimator

4.5.3 AnimatorSet

4.6 控件动画

4.6.1 图片滑动切换

4.6.2 图片手势放大缩小

4.6.3 PhotoView和ViewPager实现图片滑动和缩放

4.6.4 列表折叠

4.7 本章小结

第5章 APP基本动效

5.1 滑动

5.2 缩放

5.3 展开折叠

5.4 横竖屏切换

5.5 堆叠切换

5.6 提示

5.7 图表

5.7.1 MPAndroidChart

5.7.2 HelloCharts

5.7.3 AChartEngine

5.7.4 XCL-Charts

5.7.5 GraphView

5.7.6 HTML5数据图表

5.8 滑动删除

5.9 GitHub中优秀的开源动效项目

5.10 本章小结

第6章 APP进阶动效

6.1 图标

6.1.1 PS打造相机图标

6.1.2 AI打造动感立体图标

6.2 导航和菜单动效

6.2.1 BottomTabBar实现导航动效

6.2.2 DrawerLayout和Navigation View实现Android策划菜单

6.2.3 jQuery和CSS3制作手风琴折叠菜单

6.2.4 jQuery和CSS3实现导航菜单

6.3 Loading动效

6.3.1 Android中进度条

6.3.2 Progress Wheel

6.3.3 AE制作水波纹Loading

6.3.4 AE插件Loadup轻松创建各式Loading进度条

6.4 手势动画

6.4.1 Android手势动画

6.4.2 点击波网页动画特效

6.4.3 AE手势动画库

6.5 文字动效

6.5.1 AI与AE打造漂亮字体动效

6.5.2 AE Saber插件制作字体动效

6.5.3 jQuery和CSS3实现彩色霓虹灯发光文字动效

6.5.4 网页SVG文字动效

6.5.5 AE Super Text Pack

6.6 AE Trapcode插件

6.6.1 安装Trapcode

6.6.2 Trapcode Particular粒子特效

6.6.3 Trapcode 3D Stroke制作文字描边

6.6.4 Trapcode Mir制作变形动画

6.7 本章小结

第7章 Android中的3D动画

7.1 Camera 3D动画实现

7.1.1 Camera 3D实现图片旋转动画

7.1.2 Roate3dAnimation实现旋转图片动画

7.1.3 Rotate3D实现3D旋转动画

7.1.4 Camera与Matrix实现3D立方体

7.2 OpenGL ES

7.2.1 OpenGL ES基础

7.2.2 在Android中使用OpenGL ES

7.2.3 Android中OpenGL ES基本操作

7.2.4 OpenGL ES实现彩色旋转的立方体

7.3 本章小结

第8章 HTML5动画

8.1 HTML5动画简介

8.1.1 canvas元素结合JavaScript

8.1.2 纯粹的CSS3动画

8.1.3 jQuery动画

8.1.4 HTML5动画制作工具

8.2 DragonBones

8.2.1 DragonBones基本操作

8.2.2 骨骼动画——人行走

8.2.3 动漫动画——飞舞的蝴蝶

8.3 Adobe Animate CC

8.3.1 Adobe Animate CC基本操作

8.3.2 制作烛光动画

8.3.3 制作喷泉动画

8.4 本章小结

第9章 Cinema 4D制作3D特效

9.1 Cinema 4D简介

9.2 Cinema 4D基本操作

9.3 模拟标签

9.3.1 圆球抖落

9.3.2 布料飘落

9.4 Cinema 4D运动图形

9.4.1 Cinema 4D运动图形菜单

9.4.2 文字变碎片的抖落动画

9.5 Cinema 4D角色动画

9.5.1 Mixamo3D人物模型和动画平台

9.5.2 CMotion实现人物路径运动

9.6 RealFlow插件实现流水动画

9.7 After Effects与Cinema 4D

9.8 本章小结