SVG动画(用复杂交互动画改善用户体验)

目录
序. ..xiv
前言xvi

第 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