SVG動(dòng)畫

定　價(jià)：￥79.00

作　者：	[美] Sarah Drasner（莎拉·德拉斯納）著，大漠等譯
出版社：	電子工業(yè)出版社
叢編項(xiàng)：
標(biāo)　簽：	暫缺

購(gòu)買這本書可以去

ISBN：	9787121337901	出版時(shí)間：	2018-06-01	包裝：	平裝
開本：	16開	頁(yè)數(shù)：	220	字?jǐn)?shù)：

內(nèi)容簡(jiǎn)介

　　在制作Web動(dòng)畫效果時(shí)，使用SVG制作動(dòng)畫是我們應(yīng)該掌握的技能之一。本書詳細(xì)介紹了 SVG的基礎(chǔ)知識(shí)、如何使用SVG制作動(dòng)畫、制作SVG動(dòng)畫的工具及相關(guān)的JavaScript庫(kù)。除些之外，本書也探討了SVG還能做的一些十分有趣的事情，比如數(shù)據(jù)可視化、可伸縮的矢量圖、響應(yīng)式設(shè)計(jì)等。Sarah為廣大讀者提供了一本非常優(yōu)秀的書籍，可幫助讀者更系統(tǒng)地掌握SVG和 SVG制作動(dòng)畫相關(guān)的技術(shù)知識(shí)。如果你想掌握這項(xiàng)技術(shù)，那么本書是值得你花時(shí)間去閱讀和研究的一本書。

作者簡(jiǎn)介

　　Sarah Drasner是一獲獎(jiǎng)的布道者、顧問(wèn)和技術(shù)人員。Sarah也是Web動(dòng)畫工作室的聯(lián)合創(chuàng)始人，擁有Val Head。她被授予高級(jí)SVG動(dòng)畫前端之師之稱，并曾擔(dān)任Truli（Zillow）的UX設(shè)計(jì)師和經(jīng)理。Sarah贏得一系列獎(jiǎng)項(xiàng)。作為一名Web開發(fā)人員和設(shè)計(jì)師，她已經(jīng)有了15年之久的工作經(jīng)驗(yàn)，她還曾擔(dān)任過(guò)插畫師和大學(xué)教授，并在Santorini教過(guò)一個(gè)Byzantine的圖標(biāo)畫師。譯者簡(jiǎn)介大漠 W3CPlus創(chuàng)始人，目前就職于淘寶。對(duì)HTML5、CSS3和CSS處理器等前端腳本語(yǔ)言有非常深入的認(rèn)識(shí)和豐富的實(shí)踐經(jīng)驗(yàn)，尤其專注對(duì)CSS3和動(dòng)畫的研究，是國(guó)內(nèi)早研究和使用CSS3和CSS處理器技術(shù)的一批人。現(xiàn)在主要在探討學(xué)習(xí)JavaScript、React和Vue相關(guān)技術(shù)知識(shí)。CSS3、CSS處理器和Drupal中國(guó)布道者。2014年出版《圖解CSS3：核心技術(shù)與案例實(shí)戰(zhàn)》。姜天意昵稱99，阿里巴巴盒馬鮮生前端開發(fā)專家，目前主要負(fù)責(zé)盒馬數(shù)據(jù)可視化相關(guān)產(chǎn)品的研發(fā)。田淮仁騰訊前端開發(fā)，PWA 和 httplive 開源項(xiàng)目作者。熱愛(ài)分享，有自己的博客：villainhr.com 和微信公眾號(hào)：前端小吉米。對(duì) H5 音視頻技術(shù)，直播和 P2P 有一定的技術(shù)積累。歐陽(yáng)湘粵大四準(zhǔn)畢業(yè)碼農(nóng)，曾在百度和騰訊實(shí)習(xí)，對(duì)新技術(shù)有著強(qiáng)烈的熱愛(ài)，喜歡折騰新事物，希望未來(lái)能夠繼續(xù)學(xué)到更多有意思的東西，Long May The Sunshine。小春摩拜前端負(fù)責(zé)人，前滴滴公共前端負(fù)責(zé)人。擔(dān)任過(guò) GIAC 全球互聯(lián)網(wǎng)架構(gòu)大會(huì) - 前端出品人；寫過(guò) 3 本前端書籍，近一本：國(guó)內(nèi)第1本 Vue.js 書籍《Vue.js指南》；樂(lè)于分享和學(xué)習(xí)交流，參加過(guò) vueconf、SDCC 2016 中國(guó)軟件開發(fā)者大會(huì)等。

圖書目錄

序. ..xiv
前言xvi
第 1章　剖析 SVG. ....................... 1
SVG DOM語(yǔ)法 ............................ 2
viewBox 和 preserveAspectRatio .. 2
繪制圖形 ....................................... 5
響應(yīng)式 SVG、組和繪制路徑 ........ 6
SVG 的導(dǎo)出、建議及優(yōu)化 ............ 9
減少路徑點(diǎn) ................................. 11
優(yōu)化工具 ..................................... 12
第 2章　使用 CSS制作 SVG動(dòng)畫...14
用 SVG做動(dòng)畫............................ 16
使用 SVG繪圖的優(yōu)勢(shì) ................ 18
順暢的動(dòng)畫體驗(yàn) .......................... 20
第 3章　CSS.動(dòng)畫和手繪 SVG.Sprite. .....................................21
使用 steps()和 SVG Sprite制作關(guān)鍵幀動(dòng)畫 ....................... 21
在 Illustrator中使用模板繪制 ..... 24
在 SVG編輯器或圖紙中逐幀繪制并且使用 Gruntiocon生成 Sprite .......................... 26
用簡(jiǎn)易代碼模擬復(fù)雜運(yùn)動(dòng) ........... 26
簡(jiǎn)單重復(fù)行走 ............................. 27
第 4章　創(chuàng)建響應(yīng)式.SVG.Sprite. ... 32
用于響應(yīng)式的 SVG Sprite圖和 CSS ................................... 33
分組和導(dǎo)出 ................................. 35
viewBox的技巧 .......................... 36
響應(yīng)式動(dòng)畫 ................................. 37
第 5章　不使用任何額外庫(kù)來(lái)創(chuàng)建 UI/UX動(dòng)畫............................. 39
用戶體驗(yàn)?zāi)Ｊ街械纳舷挛那袚Q ... 39
變形 ..................................... 41
展現(xiàn) ..................................... 41
隔離 ..................................... 42
樣式 ..................................... 43
預(yù)期提示 ............................. 45
交互 ..................................... 46
節(jié)約空間 ............................. 47
總結(jié) .... 48
變換的圖標(biāo).......................... 48
第 6章　動(dòng)態(tài)數(shù)據(jù)可視化............... 55
為什么要在數(shù)據(jù)可視化中使用動(dòng)畫 .................................... 56
使用 CSS動(dòng)畫的 D3示例 ........... 56
使用 CSS動(dòng)畫的 Chartist示例 ... 59
用 D3 來(lái)做動(dòng)畫........................... 61
鏈?zhǔn)胶椭貜?fù).......................... 64
第 7章　Web動(dòng)畫技術(shù)大比拼........ 65
原生動(dòng)畫 ..................................... 65
CSS/Sass/SCSS.................... 65
requestAnimationFrame() .... 67
canvas .................................. 67
Web 動(dòng)畫 API ...................... 68
第三方框架 ................................. 68
GreenSock（GSAP） ............ 68
mo.js .................................... 69
Bodymovin’ ........................ 70
不推薦使用 ................................. 70
SMIL ................................... 70
Velocity.js ............................ 70
Snap.svg .............................. 71
基于 React的動(dòng)畫工作流 ........... 71
React-Motion ....................... 72
在 React中使用 GSAP ........ 73
在 React中使用 canvas ....... 73
在 React中使用 CSS ........... 73
總結(jié) .... 74
第 8章　用 GreenSock做動(dòng)畫...... 75
GreenSock的基本語(yǔ)法 ............... 76
TweenMax/TweenLite .......... 76
.to/.from/.fromTo ................. 76
Staggering ........................... 77
element ................................ 79
Duration .............................. 79
delay .................................... 79
動(dòng)畫的屬性 ................................. 79
easing .................................. 81
第 9章　GreenSock中的時(shí)間軸. ... 83
一個(gè)簡(jiǎn)單的時(shí)間軸 ...................... 83
相對(duì)標(biāo)簽 ..................................... 85
主時(shí)間軸和所嵌套的場(chǎng)景 ........... 89
代碼的邏輯組織 .................. 90
循環(huán) ..................................... 92
暫停和暫停事件 .................. 94
其他關(guān)于時(shí)間軸的方法 ....... 95
第 10章　MorphSVG.和路徑動(dòng)畫.. 98
MorphSVG .................................. 98
findShapeIndex() ................. 99
路徑動(dòng)畫 ................................... 101
第 11章　交錯(cuò)效果、Tweening.HSL和 SplitText的文本動(dòng)畫......106
交錯(cuò)的動(dòng)畫 ............................... 106
HSL顏色漸變動(dòng)畫 ................... 110
文字切分 ................................... 114
第 12章　DrawSVG和 Draggable...................................... 117
Draggable.................................. 117
drag類型 ........................... 119
hitTest() ............................. 119
用 Draggable來(lái)控制時(shí)間軸 ...................................... 120
DrawSVG .................................. 122
第 13章　mo.js. .......................125
mo.js基礎(chǔ)介紹 .......................... 125
圖形 .. 125
圖形的運(yùn)動(dòng) ............................... 128
鏈?zhǔn)秸{(diào)用 ........................... 130
旋渦動(dòng)畫 ........................... 131
爆炸式的效果 .................... 133
時(shí)間軸控制工具 ................ 134
補(bǔ)間動(dòng)畫 ........................... 135
路徑函數(shù) ........................... 136
mo.js提供的輔助工具 .............. 137
第 14章　React-Motion...........140
................................ 141
................. 146
第 15章　動(dòng)“不可動(dòng)者”：通過(guò)改變屬性使用原生 JavaScript實(shí)現(xiàn)動(dòng)畫....150
requestAnimationFrame() .......... 150
GreenSock的 AttrPlugin ........... 155
實(shí)際應(yīng)用： viewBox動(dòng)畫 ......... 158
另一個(gè)演示 :一個(gè)有引導(dǎo)作用的信息圖 .................... 164
第 16章　響應(yīng)式動(dòng)畫..................165
快速響應(yīng)的技巧 ........................ 165
GreenSock和響應(yīng)式 SVG ......... 165
不使用 GreenSock實(shí)現(xiàn)響應(yīng)式 SVG ................................. 169
通過(guò)更新 viewBox實(shí)現(xiàn)響應(yīng)式 . 170
具有多個(gè) SVG和媒體查詢的響應(yīng)式 ................................ 173
花更少的精力在移動(dòng)端 ..... 176
有一個(gè)計(jì)劃........................ 176
第 17章　組件庫(kù)的設(shè)計(jì)、原型化和動(dòng)畫原理...............................177
動(dòng)畫設(shè)計(jì)方面 ........................... 177
學(xué)會(huì)勾勒實(shí)際運(yùn)動(dòng)中的細(xì)節(jié) ..................................... 178
合理控制動(dòng)畫的使用 ......... 179
擁有特色的設(shè)計(jì)主見(jiàn) ................................................. 180
提升開發(fā)水平 .................... 181
設(shè)計(jì)原型 ................................... 182
逐步分割動(dòng)畫細(xì)節(jié) ............ 182
工具 ................................... 184
殺死汝愛(ài) ........................... 186
設(shè)計(jì)和編碼的工作流程 ..... 187
制作動(dòng)畫組件庫(kù) ........................ 187
權(quán)衡動(dòng)畫開發(fā)的優(yōu)先級(jí) ..... 190
時(shí)間就是金錢 .................... 191
其他方面的限制 ................ 193
索引.......................................194