內容簡介

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

作者簡介

Sarah Drasner是一獲奬的布道者、顧問和技術人員。Sarah也是Web動畫工作室的聯閤創始人，擁有Val Head。她被授予高級SVG動畫前端之師之稱，並曾擔任Truli(Zillow)的UX設計師和經理。Sarah贏得一係列奬項。作為一名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 本前端書籍，近一本：國內第1本 Vue.js 書籍《Vue.js指南》；樂於分享和學習交流，參加過 vueconf、SDCC 2016 中國軟件開發者大會等。

精彩書評

很少有人像 Sarah那樣熱衷於 Web動畫，她的新書就是一個寶庫。如果你想在 Web上使用 SVG動畫，那麼必須閱讀這本書。

——Jack Doyle，GreenSock

Sarah Drasner寫的動畫總是令人愉悅，流暢而優雅。她不僅是一位優秀的動畫設計師，她還解釋瞭為什麼以及如何使用這些工具來創造你想要的動畫。她通過簡單明瞭的方式指導讀者理解重要的概念，並為讀者推薦能用於跨瀏覽器製作動效的庫。即使你對 SVG和動畫原理有所瞭解，也不會後悔擁有這本書，因為書中的內容能讓你變得更強大。

——Chris Lilley，SVG之父

SVG動畫對於任何使用 SVG的人來說都是必須掌握的。Sarah Drasner把她所知道的動畫知識點整閤在一起，嚮讀者展示瞭如何在動畫中做齣好的選擇，以及如何用專業的技術來完成動畫。

——Val Head，設計界知名動畫設計師

Sarah Drasner既是一位令人難以置信的藝術傢，也是一位務實、注重細節的 Web開發者。 SVG動畫為 Web上的矢量動畫提供瞭實用的解決方案，並且通過一係列的工具幫助你不讓技術限製你的創造力。

——Amelia Bellamy-Royds，SVG Colors, Patterns & Gradient、 SVG Essentials (第二版 )、SVG Text Layout和 Using SVG with CSS3 and HTML5的作者

目錄

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

前言/序言

譯者序

眾所周知，SVG（可縮放矢量圖）對於 Web而言並不是一個全新的課題，隻不過近些年 SVG在 Web頁麵或者 Web應用程序中使用的頻率越來越高。這次非常榮幸能和社區的小夥伴一起參與翻譯 Sarah的著作。

SVG自發明以來沉寂瞭非常長的一段時間，由於瀏覽器廠商對 SVG技術支持不夠強大，所以在 Web中的使用機會並不多，而且其發展也是麯摺的。不過值得慶幸的是， SVG以它優秀的兼容性、可適配性在開源社區重新擁有瞭重要的地位，而且近一兩年來，使用 SVG的場景也越來越多。

相對而言，SVG具有如下一些獨特的優點。

數據可視化：真實的數據直觀地錶達瞭人們想要錶達的想法，並且易於復雜思想的交流和展現，而 SVG對於數據可視化的展示來說具有一定的優勢和可擴展性。

響應式：對於設備品類繁多的今天，如果要讓一張圖片能很好地兼容各種設備平颱，那麼 SVG是最佳選擇之一。因為 SVG是矢量圖，其具有獨特的可伸縮性，能很好地適應各種屏幕尺寸的設備。

性能錶現：如果在 Web應用或 Web頁麵中正確使用 SVG，可以減少網站加載的資源，特彆是在響應式 Web應用中，這個特性顯得更為顯著。

可操作的 DOM結構：對於開發者而言， SVG還有另一個有吸引力的特性，那就是它類似於 HTML，具有可操作的 DOM。這意味著用戶可以使用代碼直接實現想要的矢量圖效果，而且還能為屏幕閱讀器提供更多的信息，並且可以很好地通過給 DOM添加適閤的動畫，讓 SVG炫動起來。

本書由始至終都貫穿著 SVG的相關知識。我們將討論 SVG DOM的基礎知識，它結構簡單，能讓人感覺代碼淺顯易懂。還將討論 SVG性能方麵的知識，將學到如何精簡 SVG文件的體積和結構，藉此避免網站性能由於 SVG的原因大打摺扣。必不可少的，我們還會討論如何通過 CSS 和 JavaScript 製作 SVG 動畫，來完成優美且有趣的動畫效