SVG动画

✍ Scribed by Sarah Drasner

• Publisher: 电子工业出版社
• Year: 2018
• Tongue: Chinese
• Leaves: 221
• Category: Library

✦ Synopsis

在制作Web动画效果时，使用SVG制作动画是我们应该掌握的技能之一。本书详细介绍了SVG的基础知识、如何使用SVG制作动画、制作SVG动画的工具及相关的JavaScript库。除此之外，本书也探讨了SVG还能做的一些十分有趣的事情， 比如数据可视化、可伸缩的矢量图、响应式设计等。 Sarah为广大读者提供了一本非常优秀的书籍，可帮助读者系统地掌握SVG和SVG制作动画相关的技术知识。 如果你想掌握这项技术，那么本书是值得你花时间去阅读和研究的一本书。

✦ Table of Contents

扉页
版权页
O’Reilly Media, Inc.介绍
本书赢得的赞誉
译者序
目录
序
前言
本书赢得的赞誉
第1章 剖析SVG
SVG DOM语法
viewBox 和 preserveAspectRatio
绘制图形
响应式SVG、组和绘制路径
SVG 的导出、建议及优化
减少路径点
优化工具
第2章 使用CSS制作SVG动画
用SVG做动画
使用SVG绘图的优势
顺畅的动画体验
第3章 CSS 动画和手绘SVG Sprite
使用和SVG Sprite制作关键帧动画
在Illustrator中使用模板绘制
在SVG编辑器或图纸中逐帧绘制并且使用 Gruntiocon生成Sprite
用简易代码模拟复杂运动
简单重复行走
第4章 创建响应式 SVG Sprite
用于响应式的SVG Sprite图和CSS
分组和导出
的技巧
响应式动画
第5章 不使用任何额外库来创建UI/UX动画
用户体验模式中的上下文切换
变形
展现
隔离
样式
预期提示
交互
节约空间
总结
变换的图标
第6章 动态数据可视化
为什么要在数据可视化中使用动画
使用CSS动画的D3示例
使用CSS动画的Chartist示例
用 D3 来做动画
链式和重复
第7章 Web动画技术大比拼
原生动画
CSS/Sass/SCSS
requestAnimationFrame()
canvas
Web 动画 API
第三方框架
GreenSock（GSAP）
mo.js
Bodymovin’
不推荐使用
SMIL
Velocity.js
Snap.svg
基于React的动画工作流
React-Motion
在React中使用GSAP
在React中使用canvas
在React中使用CSS
总结
第8章 用GreenSock做动画
GreenSock的基本语法
TweenMax/TweenLite
.to/.from/.fromTo
Staggering
element
Duration
delay
动画的属性
easing
第9章 GreenSock中的时间轴
一个简单的时间轴
相对标签
主时间轴和所嵌套的场景
代码的逻辑组织
循环
暂停和暂停事件
其他关于时间轴的方法
第10章 MorphSVG 和路径动画
MorphSVG
findShapeIndex()
路径动画
第11章 交错效果、Tweening HSL和SplitText的文本动画
交错的动画
HSL颜色渐变动画
文字切分
第12章 DrawSVG和Draggable
Draggable
drag类型
hitTest()
用Draggable来控制时间轴
DrawSVG
第13章 mo.js
mo.js基础介绍
图形
图形的运动
链式调用
旋涡动画
爆炸式的效果
时间轴控制工具
补间动画
路径函数
mo.js提供的辅助工具
第14章 React-Motion


第15章 动“不可动者”：通过改变属性使用原生JavaScript实现动画
requestAnimationFrame()
GreenSock的AttrPlugin
实际应用：viewBox动画
另一个演示:一个有引导作用的信息图
第16章 响应式动画
快速响应的技巧
GreenSock和响应式SVG
不使用GreenSock实现响应式SVG
通过更新viewBox实现响应式
具有多个SVG和媒体查询的响应式
花更少的精力在移动端
有一个计划
第17章 组件库的设计、原型化和动画原理
动画设计方面
学会勾勒实际运动中的细节
合理控制动画的使用
拥有特色的设计主见
提升开发水平
设计原型
逐步分割动画细节
工具
杀死汝爱
设计和编码的工作流程
制作动画组件库
权衡动画开发的优先级
时间就是金钱
其他方面的限制
索引