第1章 剖析SVG 1
SVG DOM语法 2
viewBox和preserveAspectRatio 2
绘制图形 5
响应式SVG、组和绘制路径 6
SVG的导出、建议及优化 9
减少路径点 11
优化工具 12
第2章 使用CSS制作SVG动画 14
用SVG做动画 16
使用SVG绘图的优势 18
顺畅的动画体验 20
第3章 CSS动画和手绘SVG Sprite 21
使用steps()和SVG Sprite制作关键帧动画 21
在Illustrator中使用模板绘制 24
在SVG编辑器或图纸中逐帧绘制并且使用Gruntiocon生成Sprite 26
用简易代码模拟复杂运动 26
简单重复行走 27
第4章 创建响应式SVG Sprite 32
用于响应式的SVG Sprite图和CSS 33
分组和导出 35
viewBox的技巧 36
响应式动画 37
第5章 不使用任何额外库来创建UI/UX动画 39
用户体验模式中的上下文切换 39
变形 41
展现 41
隔离 42
样式 43
预期提示 45
交互 46
节约空间 47
总结 48
变换的图标 48
第6章 动态数据可视化 55
为什么要在数据可视化中使用动画 56
使用CSS动画的D3示例 56
使用CSS动画的Chartist示例 59
用D3来做动画 61
链式和重复 64
第7章 Web动画技术大比拼 65
原生动画 65
CSS/Sass/SCSS 65
requestAnimationFrame() 67
canvas 67
Web动画API 68
第三方框架 68
GreenSock（GSAP） 68
mo.js 69
Bodymovin’ 70
不推荐使用 70
SMIL 70
Velocity.js 70
Snap.svg 71
基于React的动画工作流 71
React-Motion 72
在React中使用GSAP 73
在React中使用canvas 73
在React中使用CSS 73
总结 74
第8章 用GreenSock做动画 75
GreenSock的基本语法 76
TweenMax/TweenLite 76
.to/.from/.fromTo 76
Staggering 77
element 79
Duration 79
delay 79
动画的属性 79
easing 81
第9章 GreenSock中的时间轴 83
一个简单的时间轴 83
相对标签 85
主时间轴和所嵌套的场景 89
代码的逻辑组织 90
循环 92
暂停和暂停事件 94
其他关于时间轴的方法 95
第10章 MorphSVG和路径动画 98
MorphSVG 98
findShapeIndex() 99
路径动画 101
第11章 交错效果、Tweening HSL和SplitText的文本动画 106
交错的动画 106
HSL颜色渐变动画 110
文字切分 114
第12章 DrawSVG和Draggable 117
Draggable 117
drag类型 119
hitTest() 119
用Draggable来控制时间轴 120
DrawSVG 122
第13章 mo.js 125
mo.js基础介绍 125
图形 125
图形的运动 128
链式调用 130
旋涡动画 131
爆炸式的效果 133
时间轴控制工具 134
补间动画 135
路径函数 136
mo.js提供的辅助工具 137
第14章 React-Motion 140
<Motion/> 141
<StaggeredMotion/> 146
第15章 动“不可动者”：通过改变属性使用原生JavaScript实现动画 150
requestAnimationFrame() 150
GreenSock的AttrPlugin 155
实际应用：viewBox动画 158
另一个演示：一个有引导作用的信息图 164
第16章 响应式动画 165
快速响应的技巧 165
GreenSock和响应式SVG 165
不使用GreenSock实现响应式SVG 169
通过更新viewBox实现响应式 170
具有多个SVG和媒体查询的响应式 173
花更少的精力在移动端 176
有一个计划 176
第17章 组件库的设计、原型化和动画原理 177
动画设计方面 177
学会勾勒实际运动中的细节 178
合理控制动画的使用 179
拥有特色的设计主见 180
提升开发水平 181
设计原型 182
逐步分割动画细节 182
工具 184
杀死汝爱 186
设计和编码的工作流程 187
制作动画组件库 187
权衡动画开发的优先级 190
时间就是金钱 191
其他方面的限制 193
索引 194