【包邮】SVG动画+深入理解SVG+SVG精髓 第2版 SVG绘画教程书籍 pdf epub mobi txt 电子书 下载 2025

简体网页||繁体网页

☆☆☆☆☆

图书标签:

• SVG
• SVG动画
• SVG精髓
• SVG绘画
• 前端开发
• 网页设计
• 矢量图形
• 技术教程
• 书籍
• 包邮

店铺： 蓝墨水图书专营店

出版社： 电子工业出版社

ISBN：9787121337901

商品编码：22214963880

著    者：（美）Sarah Drasner（莎拉 德拉斯纳）

作 译 者：大漠等

出版时间：2018-05    千 字 数：301

版    次：01-01    页    数：220

开    本：16开

装    帧：

I S B N ：9787121337901     

换    版：

所属分类：科技 >> 计算机 >> 多媒体技术

纸质书定价：￥79.0

在制作Web动画效果时，使用SVG制作动画是我们应该掌握的技能之一。本书详细介绍了 SVG的基础知识、如何使用SVG制作动画、制作SVG动画的工具及相关的库。除些之外，本书也探讨了SVG还能做的一些十分有趣的事情，比如数据可视化、可伸缩的矢量图、响应式设计等。Sarah为广大读者提供了一本非常优秀的书籍，可帮助读者更系统地掌握SVG和 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章 动“不可动者”：通过改变属性使用原生 实现动画....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

 

SVG动画

出版信息

书 名深入理解SVG

系列书名图灵程序设计丛书

执行编辑关于本书的内容有任何问题，请联系 朱巍

书 号978-7-115-46758-4

定 价59.00 元

页 数252

印刷方式四色

开 本大32开

出版状态正在排版

2017.9

 

 

本书特色

SVG必读。本书介绍SVG绘画，包括基础知识和如何通过混合和搭配工具来生成复杂的效果。主要内容包括：把SVG代码转换为可视图形的渲染模型，如何使用颜色，透明度的控制方法以及它对图片的影响，渲染服务和渐变。 本书适合所有想利用SVG提高Web体验的读者。

目录

正在加工……

作者介绍

Amelia Bellamy-Royds 位专门从事科学和技术交流的自由撰稿人。她在网络设计圈内因关于SVG的著作而出名。Amelia是W3C SVG工作组的特邀专家，并且积极参与SVG辅助工作组的工作。她通过参与在线社区（例如Web Platform Docs、Stack Exchange和 Codepen）来帮助促进Web标准和设计的发展。

SVG精髓（第2版） 

Web开发和设计人员必备手册，透彻讲解SVG的技术细节！

基本信息

作者： [美] J. David Eisenberg    [加] Amelia Bellamy-Royds   

译者： 易郑超, 何鹏飞

丛书名： 图灵程序设计丛书

出版社：人民邮电出版社

ISBN：9787115402547

上架时间：2015-9-21

出版日期：2015 年10月

开本：16开

页码：296

版次：2-1

所属分类： 计算机 > 软件与程序设计 > 网络编程 > 综合

 

编辑推荐

本书详尽介绍了可缩放矢量图形（SVG）技术。SVG是一种标记语言，为大多数矢量绘图程序和交互式Web图形工具所使用。本书将带你详细了解SVG的功能，首先学习简单的SVG应用，如绘制线条，然后逐步探索复杂的特性，比如滤镜、变换、渐变和图案等。

本书第2版扩展了动画、交互式图形以及SVG编程等内容。交互式的在线示例让你很容易在Web浏览器中实验SVG的特性。本书还为经验丰富的设计师准备了6个附录，解释了XML标记和CSS样式等基本概念，因此即使你没有网页设计的经验，也可以开始学习SVG。

通过阅读本书，你将能够：

为网页创建高质量、高分辨率的图形；

创建通过搜索引擎或辅助技术易于访问的图表和装饰性标题；

用SVG蒙版、滤镜以及变换给图形、文本和照片添加艺术效果；

用SVG标记动画绘制图形，使用CSS和添加交互；

根据现有的矢量数据或XML数据使用编程语言或XSLT创建SVG。

 

内容简介

    书籍

    计算机书籍

《SVG精髓（第2版）》通过实例透彻讲解了SVG（可缩放矢量图形）这种标记语言的规范及应用。作者从简单的SVG应用开始，带领读者逐步探索了SVG的复杂功能，包括滤镜、变换、渐变和模式。从应用层面看，本书涵盖了动画、交互图形和动态SVG编程等技术，不仅能为有经验的开发人员提供重要参考，同时通过讲解基本的XML和CSS技术，为没有Web开发经验的读者提供了入门捷径。 

作译者

J. David Eisenberg 

一名程序员和教师。他开发了CSS、、CGI、XML和Perl等多门编程课程，并在加州圣何塞常青谷学院教授计算机信息技术课程。他还著有études for Erlang、Let's Read Hiragana以及本书第1版。 

 

Amelia Bellamy-Royds 

一位专门从事科学和技术交流的自由撰稿人。她通过参与Web Platform Docs、Stack Exchange和Codepen等在线社区，帮助推动Web标准和设计。 

目录

前言 xii

第1章 入门指南 1

1.1 图形系统 1

1.1.1 栅格图形 1

1.1.2 矢量图形 2

1.1.3 栅格图形的用途 2

1.1.4 矢量图形的用途 2

1.2 可缩放 3

1.3 SVG的作用 5

1.4 创建一个SVG图像 5

1.4.1 文档结构 5

1.4.2 基本形状 6

1.4.3 指定样式属性 6

1.4.4 图形对象分组 7

1.4.5 变换坐标系统 8

1.4.6 其他基本图形 8

1.4.7 路径 9

1.4.8 文本 10

第2章 在网页中使用SVG 12

2.1 将SVG作为图像 12

2.1.1 在元素内包含SVG 13

2.1.2 在CSS中包含SVG 14

2.2 将SVG作为应用程序 15

2.3 混合文档中的SVG标记 16

2.3.1 SVG中的foreign object 16

2.3.2 在XHTML或者HTML5中内联SVG 18

2.3.3 其他XML应用程序中的SVG 20

第3章 坐标系统 21

3.1 视口 21

3.2 使用默认用户坐标 22

。、、、、

《SVG动画与交互设计：从入门到精通》（全新修订版） 本书内容简介 序言 在数字时代，视觉传达的力量日益凸显，而SVG（Scalable Vector Graphics）以其无限缩放、代码化、易于交互的特性，正成为网页设计、数据可视化、交互式应用等领域不可或缺的强大工具。本书《SVG动画与交互设计：从入门到精通》（全新修订版）正是为你精心打造的学习指南，它不仅系统梳理了SVG的基础知识，更将重心放在如何运用SVG创造出动态、引人入胜的视觉体验。我们力求通过深入浅出的讲解和大量实战案例，帮助您掌握SVG动画与交互设计的核心技术，成为新一代数字创意领域的佼佼者。 第一部分：SVG基础与原理 第一章：SVG的诞生与演进 矢量图形的优势： 探讨矢量图形与像素图形在不同场景下的优劣，强调SVG在网页和UI设计中的不可替代性。 SVG的历史沿革： 回顾SVG标准的诞生、发展历程，以及它如何在Web技术生态中占据一席之地。 SVG在现代Web开发中的角色： 分析SVG在响应式设计、性能优化、可访问性等方面的价值。 第二章：SVG的语法与结构 XML基础回顾： 简要介绍XML的基本概念，为理解SVG的结构奠定基础。 SVG文档结构： 讲解SVG文档的根元素`

评分☆☆☆☆☆

说实话，我本来对“深入理解SVG”和“SVG精髓”这些章节并没有抱太大的期待，总觉得这些概念性的东西比较枯燥，可能就是一些基础知识的罗列。但这本书却颠覆了我的看法！它不仅仅是罗列，而是把SVG的各个方面都串联起来，让读者能够从一个更高的维度去理解SVG。作者花了很大的篇幅去讲解SVG的坐标系统、视口（viewport）和用户坐标系统（user coordinate system）之间的关系，以及如何利用`viewBox`和`preserveAspectRatio`属性来灵活地控制SVG元素的缩放和布局，这一点对我来说至关重要，因为我经常需要在不同的屏幕尺寸上展示SVG图形，而这本书给了我解决这个问题的利器。书中还深入探讨了SVG的滤镜和渐变效果，不仅仅是简单地介绍语法，而是讲解了它们是如何工作的，以及如何组合使用来实现更丰富的视觉效果。我之前一直对SVG滤镜的使用感到很困惑，觉得效果很难控制，看完这本书后，我终于明白了其中的奥妙，并且能够熟练地运用各种滤镜来增强图形的表现力。而且，作者还分享了一些在实际项目中优化SVG性能的技巧，比如如何压缩SVG代码，如何合理使用CSS来替代部分SVG图形属性，这些都非常有价值。

评分☆☆☆☆☆

我一直觉得，一本好的技术书籍，不仅要讲解“怎么做”，更要讲解“为什么这么做”。这本书在这方面做得非常出色，尤其是在SVG绘画教程这部分。作者没有直接丢给我们一堆代码，而是循序渐进地引导我们理解SVG的基本图形元素，比如`path`、`circle`、`rect`等。他详细讲解了`path`元素的d属性，每一个指令，比如M、L、H、V、C、S、Q、T、A、Z，都给出了清晰的解释和直观的图示，让我能够准确地理解如何通过路径指令绘制出任意形状。更让我惊喜的是，作者还结合了很多实际的绘画案例，比如如何绘制一个复杂的图标，如何绘制一个平滑的曲线，甚至是如何用SVG来模拟一些矢量绘图软件中的效果。我一直以为SVG绘画只是简单的图形组合，看完这本书我才知道，原来SVG的`path`元素竟然有如此强大的表现力！作者还讲解了如何利用CSS来控制SVG图形的样式，比如填充、描边、透明度等，并且还介绍了如何使用JavaScript来动态地修改SVG图形的属性，实现交互式的效果。这些内容对于我这种需要将SVG应用于网页设计和UI开发的读者来说，简直是太实用了。

评分☆☆☆☆☆

这本书我拿到手后，迫不及待地翻开了，发现它真的在好多方面都给了我意想不到的惊喜！最让我觉得惊艳的是它对SVG动画原理的讲解，完全不是那种停留在表面、告诉你怎么用某个库或者某个工具就行了的教学。作者深入剖析了SVG动画底层的实现机制，比如SMIL动画标签的运用、CSS动画和JavaScript动画在SVG中的融合，甚至还讲解了如何利用SMIL的特性实现更复杂的动态效果，比如路径动画的描绘和路径点变化的控制。这一点对于我这种想要深入理解“为什么”而不是仅仅“怎么做”的读者来说，简直是福音。书中对动画性能的优化建议也相当实用，比如如何减少不必要的重绘和回流，如何合理使用CSS的transform属性来提高动画的流畅度，这些都是在其他很多教程里很难找到的干货。我之前一直对SVG动画的性能问题感到头疼，这本书提供了一些非常具有指导意义的思路，让我可以更有信心地去构建复杂和流畅的SVG动画。而且，作者的行文风格非常清晰，即使是比较复杂的概念，也能通过生动的比喻和详细的图示变得易于理解。总的来说，这本书在动画这块的内容，远远超出了我的预期，让我对SVG动画有了全新的认识。

评分☆☆☆☆☆

坦白说，我一开始是因为“SVG精髓”这几个字才买的这本书，总觉得这部分内容会是对SVG整个体系的一个高度概括和总结，能帮我建立起一个全面的认知框架。这本书果然没有让我失望！作者在讲解SVG的图形模型和渲染流程时，非常注重基础知识的铺垫，从SVG的XML结构开始，到DOM树的构建，再到最终的屏幕渲染，一步一步地把整个过程讲得非常透彻。让我印象深刻的是，它详细讲解了SVG的坐标变换，比如`translate`、`rotate`、`scale`和`skew`等变换是如何影响元素的定位和形状的，以及如何组合使用这些变换来实现复杂的视觉效果。这一点对于我这种需要精确控制图形布局和变换的读者来说，非常有价值。此外，作者还深入探讨了SVG的滤镜效果，不仅仅是简单介绍一些滤镜的用法，而是讲解了它们背后的原理，以及如何通过组合和调整滤镜参数来创造出各种独特的视觉效果。我之前对SVG滤镜的应用一直感觉很模糊，看完这本书后，我终于能够理解滤镜的实现机制，并且能够更加自如地运用它们来增强图形的表现力。

评分☆☆☆☆☆

这本书在讲解SVG动画的部分，绝对是市面上少有的深入且实用的教程。作者并没有仅仅停留在介绍SMIL标签或者CSS `keyframes`动画，而是非常巧妙地将SVG的底层原理和动画的实现机制结合起来。让我印象深刻的是，它花了大量的篇幅去剖析SVG动画的事件驱动模型，以及如何利用JavaScript来精确控制动画的执行时序和状态。比如，它详细讲解了如何监听SVG元素的事件，然后触发相应的动画效果，这对于构建复杂的交互式SVG动画至关重要。我之前在尝试制作一些需要用户交互才能触发的动画时，总是遇到各种问题，而这本书提供的解决方案，让我豁然开朗。作者还深入探讨了SVG动画的性能优化问题，比如如何减少DOM操作，如何利用`requestAnimationFrame`来提高动画的流畅度，以及如何通过缓存和预加载来提升用户体验。这些都是在其他很多书籍里很难找到的宝贵经验。而且，作者还鼓励读者去探索更高级的SVG动画技术，比如利用`GSAP`等第三方库来简化复杂的动画编写过程，但同时又不失对底层原理的理解。