SVG動畫

在製作Web動畫效果時，使用SVG製作動畫是我們應該掌握的技能之一。本書詳細介紹了 SVG的基礎知識、如何使用SVG製作動畫、製作SVG動畫的工具及相關的JavaScript庫。除些之外，本書也探討了SVG還能做的一些十分有趣的事情，比如數據可視化、可伸縮的矢量圖、響應式設計等。Sarah為廣大讀者提供了一本非常優秀的書籍，可幫助讀者更系統地掌握SVG和 SVG製作動畫相關的技術知識。如果你想掌握這項技術，那麼本書是值得你花時間去閲讀和研究的一本書。 ^[1] 

目錄

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

................................ 141

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