SVG动画 by （美）莎拉·德拉斯纳（Sarah Drasner）著.pdf

CMYCMMYCYCMYK33790fy.pdf 1 2018/4/13 10:49:15版权.indd 12018/5/11 14:09:20内 容 简 介在制作Web动画效果时，使用SVG制作动画是我们应该掌握的技能之一。本书详细介绍了SVG的基础知识、如何使用SVG制作动画、制作SVG动画的工具及相关的JavaScript库。除此之外，本书也探讨了SVG还能做的一些十分有趣的事情，比如数据可视化、可伸缩的矢量图、响应式设计等。Sarah为广大读者提供了一本非常优秀的书籍，可帮助读者系统地掌握SVG和SVG制作动画相关的技术知识。如果你想掌握这项技术，那么本书是值得你花时间去阅读和研究的一本书。2017 by Sarah Drasner.Simplified Chinese Edition,jointly published by OReilly Media,Inc.and Publishing House of Electronics Industry,2018.Authorized translation of the English edition,2017 OReilly Media,Inc.,the owner of all rights to publish and sell the same.All rights reserved including the rights of reproduction in whole or in part in any form.本书简体中文版专有出版权由OReilly Media,Inc.授予电子工业出版社。未经许可，不得以任何方式复制或抄袭本书的任何部分。专有出版权受法律保护。版权贸易合同登记号图字：01-2017-3324图书在版编目（CIP）数据SVG动画/（美）莎拉德拉斯纳（Sarah Drasner）著；大漠等译.北京：电子工业出版社，2018.5书名原文：SVG AnimationsISBN 978-7-121-33790-1.S.莎 大.图形软件.TP391.412中国版本图书馆CIP数据核字（2018）第039911号策划编辑：张春雨责任编辑：刘舫封面设计：Karen Montgomery张健印刷：北京天宇星印刷厂装订：北京天宇星印刷厂出版发行：电子工业出版社北京市海淀区万寿路173信箱 邮编：100036开本：7879801/16 印张：13.75字数：301千字版次：2018年5月第1版印次：2018年5月第1次印刷定价：79.00元凡所购买电子工业出版社图书有缺损问题，请向购买书店调换。若书店售缺，请与本社发行部联系，联系及邮购电话：（010）88254888，88258888。质量投诉请发邮件至，盗版侵权举报请发邮件至。本书咨询联系方式：010-51260888-819，。版权.indd 22018/5/11 14:09:21 OReilly Media,Inc.介绍 OReilly Media 通过图书、杂志、在线服务、调查研究和会议等方式传播创新知识。自1978 年开始，OReilly 一直都是前沿发展的见证者和推动者。超级极客们正在开创着未来，而我们关注真正重要的技术趋势通过放大那些“细微的信号”来刺激社会对新科技的应用。作为技术社区中活跃的参与者，OReilly 的发展充满了对创新的倡导、创造和发扬光大。OReilly 为软件开发人员带来革命性的“动物书”；创建第一个商业网站（GNN）；组织了影响深远的开放源代码峰会，以至于开源软件运动以此命名；创立了 Make 杂志，从而成为 DIY 革命的主要先锋；公司一如既往地通过多种形式缔结信息与人的纽带。OReilly 的会议和峰会集聚了众多超级极客和高瞻远瞩的商业领袖，共同描绘出开创新产业的革命性思想。作为技术人士获取信息的选择，OReilly 现在还将先锋专家的知识传递给普通的计算机用户。无论是通过书籍出版、在线服务或者面授课程，每一项 OReilly 的产品都反映了公司不可动摇的理念信息是激发创新的力量。业界评论“OReilly Radar 博客有口皆碑。”Wired“OReilly 凭借一系列（真希望当初我也想到了）非凡想法建立了数百万美元的业务。”Business 2.0“OReilly Conference 是聚集关键思想领袖的绝对典范。”CRN“一本 OReilly 的书就代表一个有用、有前途、需要学习的主题。”Irish Times“Tim 是位特立独行的商人，他不光放眼于最长远、最广阔的视野并且切实地按照 Yogi Berra 的建议去做了：如果你在路上遇到岔路口，走小路（岔路）。回顾过去 Tim 似乎每一次都选择了小路，而且有几次都是一闪即逝的机会，尽管大路也不错。”Linux Journal 版权.indd 32018/5/11 14:09:21版权.indd 42018/5/11 14:09:21谨以此书献给 Dizzy！版权.indd 52018/5/11 14:09:21本书赢得的赞誉很少有人像 Sarah 那样热衷于 Web 动画，她的新书就是一个宝库。如果你想在 Web 上使用 SVG 动画，那么必须阅读这本书。Jack Doyle，GreenSockSarah Drasner 写的动画总是令人愉悦，流畅而优雅。她不仅是一位优秀的动画设计师，她还解释了为什么以及如何使用这些工具来创造你想要的动画。她通过简单明了的方式指导读者理解重要的概念，并为读者推荐能用于跨浏览器制作动效的库。即使你对 SVG和动画原理有所了解，也不会后悔拥有这本书，因为书中的内容能让你变得更强大。Chris Lilley，SVG 之父SVG 动画对于任何使用 SVG 的人来说都是必须掌握的。Sarah Drasner 把她所知道的动画知识点整合在一起，向读者展示了如何在动画中做出最好的选择，以及如何用最专业的技术来完成动画。Val Head，设计界知名动画设计师Sarah Drasner 既是一位令人难以置信的艺术家，也是一位务实、注重细节的 Web 开发者。SVG 动画为 Web 上的矢量动画提供了实用的解决方案，并且通过一系列的工具帮助你不让技术限制你的创造力。Amelia Bellamy-Royds，SVG Colors,Patterns&Gradient、SVG Essentials(second edition)、SVG Text Layout 和 Using SVG with CSS3 and HTML5 的作者前言.indd 62018/5/11 14:09:48 vii译者序众所周知，SVG（可缩放矢量图）对于 Web 而言并不是一个全新的课题，只不过近些年SVG 在 Web 页面或者 Web 应用程序中使用的频率越来越高。这次非常荣幸能和社区的小伙伴一起参与翻译 Sarah 的著作。SVG 自发明以来沉寂了非常长的一段时间，由于浏览器厂商对 SVG 技术支持不够强大，所以在 Web 中的使用机会并不多，而且其发展也是曲折的。不过值得庆幸的是，SVG以它优秀的兼容性、可适配性在开源社区重新拥有了重要的地位，而且近一两年来，使用 SVG 的场景也越来越多。相对而言，SVG 具有如下一些独特的优点。y数据可视化：真实的数据直观地表达了人们想要表达的想法，并且易于复杂思想的交流和展现，而 SVG 对于数据可视化的展示来说具有一定的优势和可扩展性。y响应式：对于设备品类繁多的今天，如果要让一张图片能很好地兼容各种设备平台，那么 SVG 是最佳选择之一。因为 SVG 是矢量图，其具有独特的可伸缩性，能很好地适应各种屏幕尺寸的设备。y性能表现：如果在 Web 应用或 Web 页面中正确使用 SVG，可以减少网站加载的资源，特别是在响应式 Web 应用中，这个特性显得更为显著。y可操作的 DOM 结构：对于开发者而言，SVG 还有另一个有吸引力的特性，那就是它类似于 HTML，具有可操作的 DOM。这意味着用户可以使用代码直接实现想要的矢量图效果，而且还能为屏幕阅读器提供更多的信息，并且可以很好地通过给DOM 添加适合的动画，让 SVG 炫动起来。本书由始至终都贯穿着 SVG 的相关知识。我们将讨论 SVG DOM 的基础知识，它结构简单，能让人感觉代码浅显易懂。还将讨论 SVG 性能方面的知识，将学到如何精简 SVG 文件的体积和结构，借此避免网站性能由于 SVG 的原因大打折扣。必不可少的，我们还会讨论如何通过 CSS 和 JavaScript 制作 SVG 动画，来完成优美且有趣的动画效前言.indd 72018/5/11 14:09:48viii 译者序果。如果你想了解如何设计 SVG（编码+优化），那么请阅读本书的前半部分。本书的后半部分将更加适合 JavaScript 开发者学习如何使用 JavaScript 控制 SVG 动画。SVG 这一技术将设计和开发的世界交融起来，所以本书对这两个方面都会涉及。通过学习本书，读者能比较全面和深入地了解 SVG 的基础知识，特别是SVG动画的制作。为了能更好地帮助读者快速有效地使用 SVG 制作动效，Sarah 还介绍了各种工具和原生JavaScript 库。能将这本书翻译出来，非常感谢社区的同学（姜天意、欧阳湘粤、田淮仁和 张耀春）花费宝贵的时间参与翻译，同时要特别感谢博文视点的张春雨、刘舫以及其他工作人员的帮助，在此一并表示由衷的感谢。本书主要由我和社区的同学共同翻译，虽然我们经常参与社区前端技术文档的翻译，但翻译 SVG 动画相关的书籍还是第一次，因此全书难免存在一些错误或者不当之处，敬请广大读者批评指正。我们非常愿意通过电子邮件（）与各位同行探讨有关于 SVG 或 SVG 动画相关的技术问题。大漠 2018 年 3 月于杭州前言.indd 82018/5/11 14:09:48 ix目录序.xiv前言.xvi第 1 章剖析 SVG.1SVG DOM 语法.2viewBox 和 preserveAspectRatio.2绘制图形.5响应式 SVG、组和绘制路径.6SVG 的导出、建议及优化.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目录.indd 92018/5/11 14:10:16x 目录第 4 章创建响应式.SVG.Sprite.32用于响应式的 SVG Sprite 图和 CSS.33分组和导出.35viewBox 的技巧.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原生动画.65CSS/Sass/SCSS.65requestAnimationFrame().67canvas.67Web 动画 API.68第三方框架.68GreenSock（GSAP）.68mo.js.69Bodymovin .70不推荐使用.70目录.indd 102018/5/11 14:10:16目录 xiSMIL.70Velocity.js.70Snap.svg.71基于 React 的动画工作流.71React-Motion.72