掃一掃
關(guān)注中圖網(wǎng)
官方微博
包郵 SVG動畫(用復(fù)雜交互動畫改善用戶體驗(yàn))
開本：
128開
頁數(shù)：
220
本類五星書更多>
-
>
全國計算機(jī)等級考試最新真考題庫模擬考場及詳解·二級MSOffice高級應(yīng)用
-
>
決戰(zhàn)行測5000題(言語理解與表達(dá))
-
>
軟件性能測試.分析與調(diào)優(yōu)實(shí)踐之路
-
>
第一行代碼Android
-
>
JAVA持續(xù)交付
-
>
EXCEL最強(qiáng)教科書(完全版)(全彩印刷)
-
>
深度學(xué)習(xí)
SVG動畫(用復(fù)雜交互動畫改善用戶體驗(yàn)) 版權(quán)信息
- ISBN：9787121337901
- 條形碼：9787121337901 ; 978-7-121-33790-1
- 裝幀：一般膠版紙
- 冊數(shù)：暫無
- 重量：暫無
- 所屬分類：>
SVG動畫(用復(fù)雜交互動畫改善用戶體驗(yàn)) 本書特色
在制作Web動畫效果時，使用SVG制作動畫是我們應(yīng)該掌握的技能之一。本書詳細(xì)介紹了 SVG的基礎(chǔ)知識、如何使用SVG制作動畫、制作SVG動畫的工具及相關(guān)的JavaScript庫。除些之外，本書也探討了SVG還能做的一些十分有趣的事情，比如數(shù)據(jù)可視化、可伸縮的矢量圖、響應(yīng)式設(shè)計等。Sarah為廣大讀者提供了一本非常優(yōu)秀的書籍，可幫助讀者更系統(tǒng)地掌握SVG和 SVG制作動畫相關(guān)的技術(shù)知識。如果你想掌握這項(xiàng)技術(shù)，那么本書是值得你花時間去閱讀和研究的一本書。
SVG動畫(用復(fù)雜交互動畫改善用戶體驗(yàn)) 內(nèi)容簡介
在互聯(lián)網(wǎng)上，沒有什么能像運(yùn)動中的物體那樣引起人們的注意。使用SVG動畫，你可以講述故事、創(chuàng)建引人注目的可視化數(shù)據(jù)，并使用戶交互感覺更加自然。本書通過講解SVG 動畫的基本實(shí)踐，向網(wǎng)頁設(shè)計師和開發(fā)人員展示了如何使用多種技術(shù)、動畫庫，以及JavaScript插件來創(chuàng)建漂亮和獨(dú)特的效果。作者Sarah Drasner解釋了SVG DOM如何幫助大家使圖形變得更具可訪問性，并演示了優(yōu)化SVG性能的方法如何使得圖形更簡潔，以及避免網(wǎng)站陷入麻煩。你還將從本書中學(xué)習(xí)到如何使用SVG實(shí)現(xiàn)跨瀏覽器和向后兼容、優(yōu)化及響應(yīng)式相關(guān)的知識。■ 深入剖析SVG動畫■ 使用SVG和CSS創(chuàng)建獨(dú)立的UI/UX動畫■ 比較多種Web動畫技術(shù)，包括一些JavaScript庫■ 使用D3和圖表庫創(chuàng)建帶有動畫的數(shù)據(jù)可視化圖表■ 使用GreenSock創(chuàng)建高性能的HTML5動畫■ 探索一些庫和插件，比如mo.js、MorphSVG和React-Motion。
SVG動畫(用復(fù)雜交互動畫改善用戶體驗(yàn)) 目錄
目錄
序. ..xiv
前言xvi
第 1章 剖析 SVG. ....................... 1
SVG DOM語法 ............................ 2
viewBox 和 preserveAspectRatio .. 2
繪制圖形 ....................................... 5
響應(yīng)式 SVG、組和繪制路徑 ........ 6
SVG 的導(dǎo)出、建議及優(yōu)化 ............ 9
減少路徑點(diǎn) ................................. 11
優(yōu)化工具 ..................................... 12
第 2章 使用 CSS制作 SVG動畫...14
用 SVG做動畫............................ 16
使用 SVG繪圖的優(yōu)勢 ................ 18
順暢的動畫體驗(yàn) .......................... 20
第 3章 CSS.動畫和手繪 SVG.Sprite. .....................................21
使用 steps()和 SVG Sprite制作關(guān)鍵幀動畫 ....................... 21
在 Illustrator中使用模板繪制 ..... 24
在 SVG編輯器或圖紙中逐幀繪制并且使用 Gruntiocon生成 Sprite .......................... 26
用簡易代碼模擬復(fù)雜運(yùn)動 ........... 26
簡單重復(fù)行走 ............................. 27
第 4章 創(chuàng)建響應(yīng)式.SVG.Sprite. ... 32
用于響應(yīng)式的 SVG Sprite圖和 CSS ................................... 33
分組和導(dǎo)出 ................................. 35
viewBox的技巧 .......................... 36
響應(yīng)式動畫 ................................. 37
第 5章 不使用任何額外庫來創(chuàng)建 UI/UX動畫............................. 39
用戶體驗(yàn)?zāi)Ｊ街械纳舷挛那袚Q ... 39
變形 ..................................... 41
展現(xiàn) ..................................... 41
隔離 ..................................... 42
樣式 ..................................... 43
預(yù)期提示 ............................. 45
交互 ..................................... 46
節(jié)約空間 ............................. 47
總結(jié) .... 48
變換的圖標(biāo).......................... 48
第 6章 動態(tài)數(shù)據(jù)可視化............... 55
為什么要在數(shù)據(jù)可視化中使用動畫 .................................... 56
使用 CSS動畫的 D3示例 ........... 56
使用 CSS動畫的 Chartist示例 ... 59
用 D3 來做動畫........................... 61
鏈?zhǔn)胶椭貜?fù).......................... 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
相對標(biāo)簽 ..................................... 85
主時間軸和所嵌套的場景 ........... 89
代碼的邏輯組織 .................. 90
循環(huán) ..................................... 92
暫停和暫停事件 .................. 94
其他關(guān)于時間軸的方法 ....... 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基礎(chǔ)介紹 .......................... 125
圖形 .. 125
圖形的運(yùn)動 ............................... 128
鏈?zhǔn)秸{(diào)用 ........................... 130
旋渦動畫 ........................... 131
爆炸式的效果 .................... 133
時間軸控制工具 ................ 134
補(bǔ)間動畫 ........................... 135
路徑函數(shù) ........................... 136
mo.js提供的輔助工具 .............. 137
第 14章 React-Motion...........140
＜Motion /＞ ................................ 141
＜StaggeredMotion /＞ ................. 146
第 15章 動“不可動者”：通過改變屬性使用原生 JavaScript實(shí)現(xiàn)動畫....150
requestAnimationFrame() .......... 150
GreenSock的 AttrPlugin ........... 155
實(shí)際應(yīng)用： viewBox動畫 ......... 158
另一個演示 :一個有引導(dǎo)作用的信息圖 .................... 164
第 16章 響應(yīng)式動畫..................165
快速響應(yīng)的技巧 ........................ 165
GreenSock和響應(yīng)式 SVG ......... 165
不使用 GreenSock實(shí)現(xiàn)響應(yīng)式 SVG ................................. 169
通過更新 viewBox實(shí)現(xiàn)響應(yīng)式 . 170
具有多個 SVG和媒體查詢的響應(yīng)式 ................................ 173
花更少的精力在移動端 ..... 176
有一個計劃........................ 176
第 17章 組件庫的設(shè)計、原型化和動畫原理...............................177
動畫設(shè)計方面 ........................... 177
學(xué)會勾勒實(shí)際運(yùn)動中的細(xì)節(jié) ..................................... 178
合理控制動畫的使用 ......... 179
擁有特色的設(shè)計主見 ................................................. 180
提升開發(fā)水平 .................... 181
設(shè)計原型 ................................... 182
逐步分割動畫細(xì)節(jié) ............ 182
工具 ................................... 184
殺死汝愛 ........................... 186
設(shè)計和編碼的工作流程 ..... 187
制作動畫組件庫 ........................ 187
權(quán)衡動畫開發(fā)的優(yōu)先級 ..... 190
時間就是金錢 .................... 191
其他方面的限制 ................ 193
索引.......................................194
序. ..xiv
前言xvi
第 1章 剖析 SVG. ....................... 1
SVG DOM語法 ............................ 2
viewBox 和 preserveAspectRatio .. 2
繪制圖形 ....................................... 5
響應(yīng)式 SVG、組和繪制路徑 ........ 6
SVG 的導(dǎo)出、建議及優(yōu)化 ............ 9
減少路徑點(diǎn) ................................. 11
優(yōu)化工具 ..................................... 12
第 2章 使用 CSS制作 SVG動畫...14
用 SVG做動畫............................ 16
使用 SVG繪圖的優(yōu)勢 ................ 18
順暢的動畫體驗(yàn) .......................... 20
第 3章 CSS.動畫和手繪 SVG.Sprite. .....................................21
使用 steps()和 SVG Sprite制作關(guān)鍵幀動畫 ....................... 21
在 Illustrator中使用模板繪制 ..... 24
在 SVG編輯器或圖紙中逐幀繪制并且使用 Gruntiocon生成 Sprite .......................... 26
用簡易代碼模擬復(fù)雜運(yùn)動 ........... 26
簡單重復(fù)行走 ............................. 27
第 4章 創(chuàng)建響應(yīng)式.SVG.Sprite. ... 32
用于響應(yīng)式的 SVG Sprite圖和 CSS ................................... 33
分組和導(dǎo)出 ................................. 35
viewBox的技巧 .......................... 36
響應(yīng)式動畫 ................................. 37
第 5章 不使用任何額外庫來創(chuàng)建 UI/UX動畫............................. 39
用戶體驗(yàn)?zāi)Ｊ街械纳舷挛那袚Q ... 39
變形 ..................................... 41
展現(xiàn) ..................................... 41
隔離 ..................................... 42
樣式 ..................................... 43
預(yù)期提示 ............................. 45
交互 ..................................... 46
節(jié)約空間 ............................. 47
總結(jié) .... 48
變換的圖標(biāo).......................... 48
第 6章 動態(tài)數(shù)據(jù)可視化............... 55
為什么要在數(shù)據(jù)可視化中使用動畫 .................................... 56
使用 CSS動畫的 D3示例 ........... 56
使用 CSS動畫的 Chartist示例 ... 59
用 D3 來做動畫........................... 61
鏈?zhǔn)胶椭貜?fù).......................... 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
相對標(biāo)簽 ..................................... 85
主時間軸和所嵌套的場景 ........... 89
代碼的邏輯組織 .................. 90
循環(huán) ..................................... 92
暫停和暫停事件 .................. 94
其他關(guān)于時間軸的方法 ....... 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基礎(chǔ)介紹 .......................... 125
圖形 .. 125
圖形的運(yùn)動 ............................... 128
鏈?zhǔn)秸{(diào)用 ........................... 130
旋渦動畫 ........................... 131
爆炸式的效果 .................... 133
時間軸控制工具 ................ 134
補(bǔ)間動畫 ........................... 135
路徑函數(shù) ........................... 136
mo.js提供的輔助工具 .............. 137
第 14章 React-Motion...........140
＜Motion /＞ ................................ 141
＜StaggeredMotion /＞ ................. 146
第 15章 動“不可動者”：通過改變屬性使用原生 JavaScript實(shí)現(xiàn)動畫....150
requestAnimationFrame() .......... 150
GreenSock的 AttrPlugin ........... 155
實(shí)際應(yīng)用： viewBox動畫 ......... 158
另一個演示 :一個有引導(dǎo)作用的信息圖 .................... 164
第 16章 響應(yīng)式動畫..................165
快速響應(yīng)的技巧 ........................ 165
GreenSock和響應(yīng)式 SVG ......... 165
不使用 GreenSock實(shí)現(xiàn)響應(yīng)式 SVG ................................. 169
通過更新 viewBox實(shí)現(xiàn)響應(yīng)式 . 170
具有多個 SVG和媒體查詢的響應(yīng)式 ................................ 173
花更少的精力在移動端 ..... 176
有一個計劃........................ 176
第 17章 組件庫的設(shè)計、原型化和動畫原理...............................177
動畫設(shè)計方面 ........................... 177
學(xué)會勾勒實(shí)際運(yùn)動中的細(xì)節(jié) ..................................... 178
合理控制動畫的使用 ......... 179
擁有特色的設(shè)計主見 ................................................. 180
提升開發(fā)水平 .................... 181
設(shè)計原型 ................................... 182
逐步分割動畫細(xì)節(jié) ............ 182
工具 ................................... 184
殺死汝愛 ........................... 186
設(shè)計和編碼的工作流程 ..... 187
制作動畫組件庫 ........................ 187
權(quán)衡動畫開發(fā)的優(yōu)先級 ..... 190
時間就是金錢 .................... 191
其他方面的限制 ................ 193
索引.......................................194
展開全部
SVG動畫(用復(fù)雜交互動畫改善用戶體驗(yàn)) 作者簡介
Sarah Drasner是一獲獎的布道者、顧問和技術(shù)人員。Sarah也是Web動畫工作室的聯(lián)合創(chuàng)始人，擁有Val Head。她被授予高級SVG動畫前端之師之稱，并曾擔(dān)任Truli(Zillow)的UX設(shè)計師和經(jīng)理。Sarah贏得一系列獎項(xiàng)，包括CSS Dev Conf的“最佳最佳獎”，以及來自CSS設(shè)計獎的“最佳代碼辯論者”。作為一名Web開發(fā)人員和設(shè)計師，她已經(jīng)有了15年之久的工作經(jīng)驗(yàn)，她還曾擔(dān)任過插畫師和大學(xué)教授，并在Santorini教過一個Byzantine的圖標(biāo)畫師。
大漠：W3CPlus創(chuàng)始人，目前就職于淘寶。對HTML5、CSS3和CSS處理器等前端腳本語言有非常深入的認(rèn)識和豐富的實(shí)踐經(jīng)驗(yàn)，尤其專注對CSS3和動畫的研究，是國內(nèi)最早研究和使用CSS3和CSS處理器技術(shù)的一批人。現(xiàn)在主要在探討學(xué)習(xí)JavaScript、React和Vue相關(guān)技術(shù)知識。CSS3、CSS處理器和Drupal中國布道者。2014年出版《圖解CSS3：核心技術(shù)與案例實(shí)戰(zhàn)》。姜天意： 昵稱99，阿里巴巴盒馬鮮生前端開發(fā)專家，目前主要負(fù)責(zé)盒馬數(shù)據(jù)可視化相關(guān)產(chǎn)品的研發(fā)。田淮仁:騰訊前端開發(fā)，PWA 和 httplive 開源項(xiàng)目作者。熱愛分享，有自己的博客：villainhr.com 和微信公眾號：前端小吉米。對 H5 音視頻技術(shù)，直播和 P2P 有一定的技術(shù)積累。歐陽湘粵: 大四準(zhǔn)畢業(yè)碼農(nóng)，曾在百度和騰訊實(shí)習(xí)，對新技術(shù)有著強(qiáng)烈的熱愛，喜歡折騰新事物，希望未來能夠繼續(xù)學(xué)到更多有意思的東西，Long May The Sunshine。小春:摩拜前端負(fù)責(zé)人，前滴滴公共前端負(fù)責(zé)人。擔(dān)任過 GIAC 全球互聯(lián)網(wǎng)架構(gòu)大會 - 前端出品人；寫過 3 本前端書籍，最近一本：國內(nèi)第一本 Vue.js 書籍《Vue.js權(quán)威指南》；樂于分享和學(xué)習(xí)交流，參加過 vueconf、SDCC 2016 中國軟件開發(fā)者大會等。
書友推薦
- >
山海經(jīng)
- >
二體千字文
- >
李白與唐代文化
- >
小考拉的故事-套裝共3冊
- >
回憶愛瑪儂
- >
苦雨齋序跋文-周作人自編集
- >
羅曼·羅蘭讀書隨筆-精裝
- >
推拿
本類暢銷
