SVG动画

作者: [美] Sarah Drasner(莎拉德拉斯纳

出版社: 电子工业出版社

出版时间: 2018-05

版次: 1

ISBN: 9787121337901

定价: 79.00

装帧: 其他

开本: 128开

纸张: 胶版纸

分类: 计算机与互联网

4 张插图图片

在制作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 中国软件开发者大会等。目录

序. ..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
内容简介:
在制作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 中国软件开发者大会等。
目录:
目录

序. ..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

查看详情

SVG动画

内容简介:

作者简介:

目录: