UI动效设计从入门到精通

动效是科技产品“情感化设计”的纽带，的动效设计在提升产品体验、用户黏性方面能够起到积极作用，让产品充满生命力，使用户和界面之间产生情感的联系，从而提升用户体验。目前，动效已成为APP产品交互设计和界面设计必不可少的元素之一。本书是关于UI动效设计的实战教程图书，内容涵盖两种*典型、应用*广泛的动效应用端：移动端和Web端，包括动效的作用、设计原则、分类、动效设计方法、动效典型制作软件及各类动效实例，其中，制作平台包括After Effects、Android、Adobe Illustrator、 JavaScript、CSS3、DragonBones、Adobe Animate和 Cinema 4D等，动效实例包括基础动效、高级动效、3D动效等。本书可作为UI设计等相关从业人员的参考手册，也可作为大中专院校设计相关专业的培训教程，还可作为广大视觉设计和动效开发爱好者的拓展学习资料。

前言
第1章动效基础知识
1.1为什么要为APP设计动效
1.2动效应用
1.2.1移动APP动效
1.2.2Web网站动效
1.3移动APP动效设计
1.3.1什么是移动APP的交互动效设计
1.3.2移动APP动效的作用
1.3.3移动APP动效设计原则
1.3.4移动APP交互动效分类
1.4Web网站动效设计
1.4.1Web网站动效设计原则
1.4.2动效网站设计欣赏
1.5动效设计方法
1.6动效制作软件
1.6.1After Effects
1.6.2Adobe Photoshop
1.6.3Adobe Illustrator
1.6.4Adobe Edge Animate
1.6.5Adobe Animate CC
1.6.6Quartz Composer
1.6.7Principle
1.6.8Framer
1.6.9jQuery
1.6.10Origami
1.6.11Cinema 4D
1.6.12Flinto
1.6.13Hype
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.1After Effects简介
3.1.1After Effects软件及特点
3.1.2After Effects CC工作界面
3.1.3After Effects CC的合成
3.1.4After Effects CC的图层
3.1.5After Effects CC的渲染
3.2After Effects CC动画
3.2.1关键帧动画
3.2.2效果动画
3.2.3蒙版动画
3.2.4文字动画
3.2.5表达式动画
3.2.63D动画
3.3After Effects动画导出
3.3.1导出为视频和图像序列
3.3.2应用Bodymovin把After Effects动画转换成WebAndroidiOS原生动画
3.3.3应用Lottie库实现Android iOSWeb加载After Effects动画
3.4在Android中应用After Effects 动画
3.5在Web中应用After Effects动画
3.6本章小结
第4章Android基础动画
4.1绘图动画
4.1.1Graphics类基础
4.1.2Matrix类变换图片
4.1.3绘制路径文字
4.1.4绘制图片倒影
4.1.5drawBitmapMesh实现图像扭曲
4.2矢量动画
4.2.1Android SVG动画
4.2.2插值动画
4.3Drawable动画
4.3.1Drawable类
4.3.2Drawable实现Frame动画效果
4.3.3Drawable的高效用法
4.4Tween补间动画
4.5属性动画
4.5.1Animator
4.5.2ObjectAnimator
4.5.3AnimatorSet
4.6控件动画
4.6.1图片滑动切换
4.6.2图片手势放大缩小
4.6.3PhotoView和ViewPager
实现图片滑动和缩放
4.6.4列表折叠
4.7本章小结
第5章APP基本动效
5.1滑动
5.2缩放
5.3展开折叠
5.4横竖屏切换
5.5堆叠切换
5.6提示
5.7图表
5.7.1MPAndroidChart
5.7.2HelloCharts
5.7.3AChartEngine
5.7.4XCL.Charts
5.7.5GraphView
5.7.6HTML5数据图表
5.8滑动删除
5.9GitHub中优秀的开源动效项目
5.10本章小结
第6章APP进阶动效
6.1图标
6.1.1PS打造相机图标
6.1.2AI打造动感立体图标
6.2导航和菜单动效
6.2.1BottomTabBar实现导航动效
6.2.2DrawerLayout和Navigation View实现Android策划菜单
6.2.3jQuery和CSS3制作手风琴折叠菜单
6.2.4jQuery和CSS3实现导航菜单
6.3Loading动效
6.3.1Android中进度条
6.3.2Progress Wheel
6.3.3AE制作水波纹 Loading
6.3.4AE插件Loadup轻松创建 各式Loading进度条
6.4手势动画
6.4.1Android手势动画
6.4.2点击波网页动画特效
6.4.3AE手势动画库
6.5文字动效
6.5.1AI与AE打造漂亮字体动效
6.5.2AE Saber插件制作字体动效
6.5.3jQuery和CSS3实现彩色霓虹灯发光文字动效
6.5.4网页SVG文字动效
6.5.5AE Super Text Pack
6.6AE Trapcode 插件
6.6.1安装Trapcode
6.6.2Trapcode Particular粒子特效
6.6.3Trapcode 3D Stroke制作文字描边
6.6.4Trapcode Mir制作变形动画
6.7本章小结
第7章Android中的3D动画
7.1Camera 3D动画实现
7.1.1Camera 3D实现图片旋转动画
7.1.2Roate3dAnimation实现旋转图片动画
7.1.3Rotate3D实现3D旋转动画
7.1.4Camera与Matrix实现3D立方体
7.2OpenGL ES
7.2.1OpenGL ES基础
7.2.2在Android中使用OpenGL ES
7.2.3Android中OpenGL ES基本操作
7.2.4OpenGL ES实现彩色旋转的立方体
7.3本章小结
第8章HTML5动画
8.1HTML5动画简介
8.1.1canvas元素结合JavaScript
……