具体描述
在制作Web动画效果时，使用SVG制作动画是我们应该掌握的技能之一。本书详细介绍了SVG的基础知识、如何使用SVG制作动画、制作SVG动画的工具及相关的JavaScript库。除此之外，本书也探讨了SVG还能做的一些十分有趣的事情， 比如数据可视化、可伸缩的矢量图、响应式设计等。 Sarah为广大读者提供了一本非常优秀的书籍，可帮助读者系统地掌握SVG和SVG制作动画相关的技术知识。 如果你想掌握这项技术，那么本书是值得你花时间去阅读和研究的一本书。
作者简介
Sarah Drasner是一获奖的布道者、顾问和技术人员。Sarah也是Web动画工作室的联合创始人，拥有Val Head。她被授予高级SVG动画前端之师之称，并曾担任Truli(Zillow)的UX设计师和经理。Sarah赢得一系列奖项，包括CSS Dev Conf的“最佳最佳奖”，以及来自CSS设计奖的“最佳代码辩论者”。作为一名Web开发人员和设计师，她已经有了15年之久的工作经验，她还曾担任过插画师和大学教授，并在Santorini教过一个Byzantine的图标画师。
译者简介
大漠
W3CPlus创始人，目前就职于淘宝。对HTML5、CSS3和CSS处理器等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3和动画的研究，是国内最早研究和使用CSS3和CSS处理器技术的一批人。现在主要在探讨学习JavaScript、React和Vue相关技术知识。CSS3、CSS处理器和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。
姜天意
昵称99，阿里巴巴盒马鲜生前端开发专家，目前主要负责盒马数据可视化相关产品的研发。
田淮仁
腾讯前端开发，PWA 和 httplive 开源项目作者。热爱分享，有自己的博客：villainhr.com 和微信公众号：前端小吉米。对 H5 音视频技术，直播和 P2P 有一定的技术积累。
欧阳湘粤
大四准毕业码农，曾在百度和腾讯实习，对新技术有着强烈的热爱，喜欢折腾新事物，希望未来能够继续学到更多有意思的东西，Long May The Sunshine。
小春
摩拜前端负责人，前滴滴公共前端负责人。担任过 GIAC 全球互联网架构大会 - 前端出品人；写过 3 本前端书籍，最近一本：国内第一本 Vue.js 书籍《Vue.js权威指南》；乐于分享和学习交流，参加过 vueconf、SDCC 2016 中国软件开发者大会等。
目录信息
前言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
· · · · · · (收起)
读后感
用户评价
天哪，我得说，这本书的排版和视觉效果简直让人精神一振！那种现代、干净的界面设计风格，配上大量的彩色插图和清晰的代码区块，读起来简直是一种享受。我一直觉得技术书要是能像艺术品一样赏心悦目，学习的效率都会提升不少。我尤其欣赏作者在讲解复杂概念时，总是能用一个非常形象的比喻或者一个精心制作的视觉流程图来辅助说明。比如，当他们讲到视图（Viewport）和内容（ViewBox）的适配问题时，那种通过拖拽和缩放的动态示意图，让我瞬间就理解了那些晦涩的数学比例关系。这本书的优点在于它的“可操作性”——每一章后面都有一个“挑战项目”，要求你实际动手去实现一个小的动画场景，这比单纯的理论灌输有效得多。我跟着做完了好几个案例，发现很多之前困扰我的小细节，比如如何处理不同浏览器下的渲染差异，或者如何让动画在移动端保持流畅，都在实践中得到了解答。不过，话说回来，虽然视觉上满分，但在某些更深层次的技术探讨上，我还是感觉有点意犹未尽。例如，关于Web Workers在SVG动画中的潜在应用，或者如何利用新的CSS特性与SVG更深层次地结合，书中涉及不多。它更像是为你铺好了一条安全、舒适的康庄大道，让你能轻松地从A点走到B点，但如果你想偏离主路，自己去探索一些崎岖但可能更有趣的捷径，这本书提供的指引就相对有限了。总体而言，这是一本非常棒的入门和进阶的桥梁书，尤其适合那些对美感有要求的学习者。
这本书在处理“性能优化”这一块的内容，绝对是让人眼前一亮，也是我购买它最重要的原因之一。在这个时代，光能动起来的动画已经不算什么了，如何让它在任何设备上都保持每秒60帧的丝滑体验，才是王道。作者在这个环节的处理非常老到和务实。他们没有空谈理论，而是直接给出了大量的实战对比案例：比如，用变换矩阵（Transforms）代替DOM属性操作的性能提升；如何合理地利用CSS的`will-change`属性来预先触发硬件加速；以及在处理大量元素动画时，选择Canvas层级渲染SVG组件的策略。我印象最深的是关于“垃圾回收”和“动画滴答（tick）”的章节，作者详细解释了为什么在动画循环中过度频繁地修改布局属性会导致浏览器重新计算，并提供了规避的最佳实践。这些内容，在很多入门级的教程中是完全被忽略的。这本书真正体现了“资深开发者”的视角，它不是教你怎么写出动画，而是教你怎么写出**健壮、高效**的动画。虽然，在动画的“创意表现力”方面，它不如某些专注于视觉设计的书籍那样天马行空，但在确保技术可行性和工程质量上，这本书无疑是业内顶尖水准。如果你是一个已经掌握了基本动画编写，但正被性能问题困扰的开发者，这本书简直就是一本救命稻草。
我必须承认，这本书的“实战案例”部分，是其最能体现价值的地方，但同时也暴露了它在“通用性”上的弱点。作者似乎非常偏爱于某种特定风格的UI组件动画，例如那种现代、扁平化设计中的微交互和过渡效果。书中提供的代码示例都非常精致，每一个按钮的点击反馈、每一个列表的载入动画，都充满了设计感。我跟着书中的案例复刻了几个非常漂亮的loading动画，立即拿去自己的项目里试用，效果惊艳，同事们都以为我新请了动画设计师。然而，问题在于，这些案例的复杂度相对固定，它们往往是为特定的视觉风格服务的。一旦我需要实现一些更具表现力、更偏向于传统插画风格的复杂叙事动画（比如需要大量路径变形和逐帧控制的场景），这本书提供的工具和思路就显得有些力不从成了。它更像是一本关于“如何把标准Web组件做得更漂亮”的指南，而不是一本关于“如何用SVG讲述一个动画故事”的教材。所以，这本书非常适合那些专注于构建现代、高效Web应用界面（如Dashboard、企业级SaaS产品）的前端工程师。但对于那些希望涉足广告、品牌宣传页或者动画短片制作的读者来说，这本书可能需要搭配其他更侧重于艺术表现力的书籍一起阅读，才能达到理想的效果。它的“实用主义”倾向非常明显，优点突出，但适用范围也因此受到了限制。
这本《SVG动画》的书，说实话，我本来是抱着极大的期待去买的。毕竟，现在网页设计和前端开发中，SVG的地位越来越重要，掌握动态效果的制作是硬刚需。我希望能在这本书里找到一套系统且深入的教程，从最基础的路径绘制、形状变换，到复杂的路径插值、时间轴控制，最好还能涉及一些高级的性能优化和Web动画库的集成应用。然而，当我翻开第一页，我就感觉到一股扑面而来的……基础知识的罗列感。它似乎花了大篇幅去解释SVG的基本语法，比如`<circle>`、`<rect>`这些元素是什么，属性值怎么设置，这对于一个已经有一定前端基础的读者来说，显得有些冗余和拖沓。我更期待的是那些“如何制作一个流畅的弹跳效果”、“如何用SMIL实现复杂的路径跟随动画”这类干货。书中对动画部分的讲解，更多的是停留在对现有工具或简单代码片段的罗列上，缺乏那种“解构动画原理，重构个性化效果”的深度。读完后，我感觉自己好像是看了一本更偏向于SVG“字典”的电子书，而不是一本教授“动画制作艺术”的实战指南。如果作者能把篇幅更多地放在讲解动画曲线的数学原理，或者如何利用JavaScript实现高精度的控制，而不是在基础元素上花费大量篇幅，这本书的价值可能会翻倍。现在的体验，更像是在一个已经搭建好的游乐场里，作者只是指着每一个设施的功能说明书给我看，而我真正想知道的是，如何自己设计并搭建一个全新的、更刺激的项目。总而言之，对于希望快速提升SVG动画实战能力的人来说，这本书的深度可能略显不足，它更适合完全零基础，需要温和入门的读者。
坦白讲，这本书的结构安排让我感到一丝困惑，它似乎在努力地平衡“广度”和“深度”，但最终的结果是两边都没能完全顾及到。前半部分，作者用了大量篇幅去介绍各种SVG动画实现的技术路径，什么SMIL、CSS Animation、JS库（比如GreenSock）的用法都被提到了。这本该是好事，但问题在于，每种技术都只是点到为止。你学到了如何调用一个库的函数，但对于这个函数背后的渲染机制，它为什么比另一个方案更高效，或者在特定场景下应该如何取舍，书中鲜有深入的剖析。这就像一个巨大的工具箱，里面塞满了各种工具，但没有一本详细的说明书告诉你每把工具的“最佳使用场景”和“维护保养方法”。我尝试跟着书中的例子去构建一个稍微复杂一点的互动动画，很快就发现，一旦我想要加入一些自定义的交互逻辑——比如根据用户鼠标移动的速度来调整动画的加速度——书中的知识点就跟不上了。我不得不跳出书本，去查阅各个技术栈的官方文档来补全缺失的逻辑链条。这本书给我的感觉是，它是一份非常好的“技术概览”，让你知道SVG动画江湖里有哪些门派，各门派的看家本领是什么。但如果你想真正成为某个门派的武林高手，这本书提供的内功心法可能不够扎实。对于追求技术原理和底层逻辑的读者来说，可能会觉得它略显浮于表面，更像是一个高效率的知识索引。
刚看完这本书，来看评论，只有一个人写了评论。。还真是冷门。作为一个svg新手，表示还是有很多收获，的确重在介绍各种框架，但例子很多，看完可以挑选自己喜欢的框架做一些动画，容易上手和培养兴趣。如果是为了学习svg的底层操作，的确不适合。书中大部分例子是作者本人的作品，都不错。至于上个评论中提到张旭鑫的blog，我看的时候也是震惊，张的文风我知道，废话挺多，歪果仁是一定看不懂的，后来仔细看上下文，是译者加的。
刚看完这本书，来看评论，只有一个人写了评论。。还真是冷门。作为一个svg新手，表示还是有很多收获，的确重在介绍各种框架，但例子很多，看完可以挑选自己喜欢的框架做一些动画，容易上手和培养兴趣。如果是为了学习svg的底层操作，的确不适合。书中大部分例子是作者本人的作品，都不错。至于上个评论中提到张旭鑫的blog，我看的时候也是震惊，张的文风我知道，废话挺多，歪果仁是一定看不懂的，后来仔细看上下文，是译者加的。
刚看完这本书，来看评论，只有一个人写了评论。。还真是冷门。作为一个svg新手，表示还是有很多收获，的确重在介绍各种框架，但例子很多，看完可以挑选自己喜欢的框架做一些动画，容易上手和培养兴趣。如果是为了学习svg的底层操作，的确不适合。书中大部分例子是作者本人的作品，都不错。至于上个评论中提到张旭鑫的blog，我看的时候也是震惊，张的文风我知道，废话挺多，歪果仁是一定看不懂的，后来仔细看上下文，是译者加的。
也难得写个评论，这个书卖79我真的想哭，看了等于什么没讲，如果会svg，还用看这个书教我怎么用js的库吗？
请不要购买这类低质量书籍。 里面没有对SVG进行过多的讲解，一直在介绍动画库，里面的例子十分过时，不推荐购买。 收到手的时候我看到这么薄，内容应该挺实用才对，花了两天工作业余时间就能看完， 因为整本书充斥着大量的介绍，有些动画库的介绍里面还掺杂一些demo，然后这些demo的字体放大，感觉就是凑页数的，在这种情况下页数也只有仅仅的200页不到。 这个价格卖这个质量真得太坑了。 一个普通例子用了几个框架，只有有其中一门没使用过你就懵了。 真正应该讲的地方就扔个张鑫旭的blog地址，花着钱还不如花时间看张鑫旭的blog。 很多效果很差，而且没必要使用svg去实现。 这时我从业以来买过最差的技术书籍了。
