SVG動畫

序. ..xiv
前言xvi
第 1章　剖析 SVG. ....................... 1
SVG DOM語法 ............................ 2
viewBox 和 preserveAspectRatio .. 2
繪制圖形 ....................................... 5
響應式 SVG、組和繪制路徑 ........ 6
SVG 的導出、建議及優(yōu)化 ............ 9
減少路徑點 ................................. 11
優(yōu)化工具 ..................................... 12
第 2章　使用 CSS制作 SVG動畫...14
用 SVG做動畫............................ 16
使用 SVG繪圖的優(yōu)勢 ................ 18
順暢的動畫體驗 .......................... 20
第 3章　CSS.動畫和手繪 SVG.Sprite. .....................................21
使用 steps()和 SVG Sprite制作關鍵幀動畫 ....................... 21
在 Illustrator中使用模板繪制 ..... 24
在 SVG編輯器或圖紙中逐幀繪制并且使用 Gruntiocon生成 Sprite .......................... 26
用簡易代碼模擬復雜運動 ........... 26
簡單重復行走 ............................. 27
第 4章　創(chuàng)建響應式.SVG.Sprite. ... 32
用于響應式的 SVG Sprite圖和 CSS ................................... 33
分組和導出 ................................. 35
viewBox的技巧 .......................... 36
響應式動畫 ................................. 37
第 5章　不使用任何額外庫來創(chuàng)建 UI/UX動畫............................. 39
用戶體驗模式中的上下文切換 ... 39
變形 ..................................... 41
展現(xiàn) ..................................... 41
隔離 ..................................... 42
樣式 ..................................... 43
預期提示 ............................. 45
交互 ..................................... 46
節(jié)約空間 ............................. 47
總結(jié) .... 48
變換的圖標.......................... 48
第 6章　動態(tài)數(shù)據(jù)可視化............... 55
為什么要在數(shù)據(jù)可視化中使用動畫 .................................... 56
使用 CSS動畫的 D3示例 ........... 56
使用 CSS動畫的 Chartist示例 ... 59
用 D3 來做動畫........................... 61
鏈式和重復.......................... 64
第 7章　Web動畫技術(shù)大比拼........ 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
總結(jié) .... 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
循環(huán) ..................................... 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
鏈式調(diào)用 ........................... 130
旋渦動畫 ........................... 131
爆炸式的效果 .................... 133
時間軸控制工具 ................ 134
補間動畫 ........................... 135
路徑函數(shù) ........................... 136
mo.js提供的輔助工具 .............. 137
第 14章　React-Motion...........140
................................ 141
................. 146
第 15章　動“不可動者”：通過改變屬性使用原生 JavaScript實現(xiàn)動畫....150
requestAnimationFrame() .......... 150
GreenSock的 AttrPlugin ........... 155
實際應用： viewBox動畫 ......... 158
另一個演示 :一個有引導作用的信息圖 .................... 164
第 16章　響應式動畫..................165
快速響應的技巧 ........................ 165
GreenSock和響應式 SVG ......... 165
不使用 GreenSock實現(xiàn)響應式 SVG ................................. 169
通過更新 viewBox實現(xiàn)響應式 . 170
具有多個 SVG和媒體查詢的響應式 ................................ 173
花更少的精力在移動端 ..... 176
有一個計劃........................ 176
第 17章　組件庫的設計、原型化和動畫原理...............................177
動畫設計方面 ........................... 177
學會勾勒實際運動中的細節(jié) ..................................... 178
合理控制動畫的使用 ......... 179
擁有特色的設計主見 ................................................. 180
提升開發(fā)水平 .................... 181
設計原型 ................................... 182
逐步分割動畫細節(jié) ............ 182
工具 ................................... 184
殺死汝愛 ........................... 186
設計和編碼的工作流程 ..... 187
制作動畫組件庫 ........................ 187
權(quán)衡動畫開發(fā)的優(yōu)先級 ..... 190
時間就是金錢 .................... 191
其他方面的限制 ................ 193
索引.......................................194