中图网(原中国图书网):网上书店,尾货特色书店,30万种特价书低至2折!

歡迎光臨中圖網 請 | 注冊
> >
SVG動畫(用復雜交互動畫改善用戶體驗)

包郵 SVG動畫(用復雜交互動畫改善用戶體驗)

出版社:電子工業出版社出版時間:2018-05-01
開本: 128開 頁數: 220
中 圖 價:¥31.0(3.9折) 定價  ¥79.0 登錄后可看到會員價
加入購物車 收藏
開年大促, 全場包郵
?新疆、西藏除外
溫馨提示:5折以下圖書主要為出版社尾貨,大部分為全新(有塑封/無塑封),個別圖書品相8-9成新、切口
有劃線標記、光盤等附件不全詳細品相說明>>
本類五星書更多>

SVG動畫(用復雜交互動畫改善用戶體驗) 版權信息

SVG動畫(用復雜交互動畫改善用戶體驗) 本書特色

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

SVG動畫(用復雜交互動畫改善用戶體驗) 內容簡介

在互聯網上,沒有什么能像運動中的物體那樣引起人們的注意。使用SVG動畫,你可以講述故事、創建引人注目的可視化數據,并使用戶交互感覺更加自然。本書通過講解SVG 動畫的基本實踐,向網頁設計師和開發人員展示了如何使用多種技術、動畫庫,以及JavaScript插件來創建漂亮和獨特的效果。作者Sarah Drasner解釋了SVG DOM如何幫助大家使圖形變得更具可訪問性,并演示了優化SVG性能的方法如何使得圖形更簡潔,以及避免網站陷入麻煩。你還將從本書中學習到如何使用SVG實現跨瀏覽器和向后兼容、優化及響應式相關的知識。■ 深入剖析SVG動畫■ 使用SVG和CSS創建獨立的UI/UX動畫■ 比較多種Web動畫技術,包括一些JavaScript庫■ 使用D3和圖表庫創建帶有動畫的數據可視化圖表■ 使用GreenSock創建高性能的HTML5動畫■ 探索一些庫和插件,比如mo.js、MorphSVG和React-Motion。

SVG動畫(用復雜交互動畫改善用戶體驗) 目錄

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

<Motion /> ................................ 141
<StaggeredMotion /> ................. 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動畫(用復雜交互動畫改善用戶體驗) 作者簡介

Sarah Drasner是一獲獎的布道者、顧問和技術人員。Sarah也是Web動畫工作室的聯合創始人,擁有Val Head。她被授予高級SVG動畫前端之師之稱,并曾擔任Truli(Zillow)的UX設計師和經理。Sarah贏得一系列獎項,包括CSS Dev Conf的“最佳最佳獎”,以及來自CSS設計獎的“最佳代碼辯論者”。作為一名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 本前端書籍,最近一本:國內第一本 Vue.js 書籍《Vue.js權威指南》;樂于分享和學習交流,參加過 vueconf、SDCC 2016 中國軟件開發者大會等。

商品評論(0條)
暫無評論……
書友推薦
本類暢銷
編輯推薦
返回頂部
中圖網
在線客服
主站蜘蛛池模板: 北京翻译公司-专业合同翻译-医学标书翻译收费标准-慕迪灵 | 镀锌角钢_槽钢_扁钢_圆钢_方矩管厂家_镀锌花纹板-海邦钢铁(天津)有限公司 | 液压压力机,液压折弯机,液压剪板机,模锻液压机-鲁南新力机床有限公司 | 臭氧老化试验箱,高低温试验箱,恒温恒湿试验箱,防水试验设备-苏州亚诺天下仪器有限公司 | 东莞办公家具厂家直销-美鑫【免费3D效果图】全国办公桌/会议桌定制 | 合肥卓创建筑装饰,专业办公室装饰、商业空间装修与设计。 | 干洗加盟网-洗衣店品牌排行-干洗设备价格-干洗连锁加盟指南 | 金环宇|金环宇电线|金环宇电缆|金环宇电线电缆|深圳市金环宇电线电缆有限公司|金环宇电缆集团 | 定做大型恒温循环水浴槽-工业用不锈钢恒温水箱-大容量低温恒温水槽-常州精达仪器 | 储气罐,真空罐,缓冲罐,隔膜气压罐厂家批发价格,空压机储气罐规格型号-上海申容压力容器集团有限公司 | 【孔氏陶粒】建筑回填陶粒-南京/合肥/武汉/郑州/重庆/成都/杭州陶粒厂家 | 消电检公司,消电检价格,北京消电检报告-北京设施检测公司-亿杰(北京)消防工程有限公司 | 潜水搅拌机-双曲面搅拌机-潜水推进器|奥伯尔环保 | 深圳快餐店设计-餐饮设计公司-餐饮空间品牌全案设计-深圳市勤蜂装饰工程 | 真空泵厂家_真空泵机组_水环泵_旋片泵_罗茨泵_耐腐蚀防爆_中德制泵 | 出国劳务公司_正规派遣公司[严海] | 多功能真空滤油机_润滑油全自动滤油机_高效真空滤油机价格-重庆润华通驰 | 环球电气之家-中国专业电气电子产品行业服务网站! | 深圳市简易检测技术有限公司 | 膜片万向弹性联轴器-冲压铸造模具「沧州昌运模具」 | BAUER减速机|ROSSI-MERSEN熔断器-APTECH调压阀-上海爱泽工业设备有限公司 | 工业冷却塔维修厂家_方形不锈钢工业凉水塔维修改造方案-广东康明节能空调有限公司 | 挤奶设备过滤纸,牛奶过滤纸,挤奶机过滤袋-济南蓝贝尔工贸有限公司 | 超声波分散机-均质机-萃取仪-超声波涂料分散设备-杭州精浩 | 国产离子色谱仪,红外分光测油仪,自动烟尘烟气测试仪-青岛埃仑通用科技有限公司 | 气动绞车,山东气动绞车,气动绞车厂家-烟台博海石油机械有限公司 气动隔膜泵厂家-温州永嘉定远泵阀有限公司 | 皮带机_移动皮带机_大倾角皮带机_皮带机厂家 - 新乡市国盛机械设备有限公司 | 股指期货-期货开户-交易手续费佣金加1分-保证金低-期货公司排名靠前-万利信息开户 | 杭州可当科技有限公司—流量卡_随身WiFi_AI摄像头一站式解决方案 | 生产加气砖设备厂家很多,杜甫机械加气砖设备价格公道 | 玉米深加工设备-玉米深加工机械-新型玉米工机械生产厂家-河南粮院机械制造有限公司 | 衬塑管道_衬四氟管道厂家-淄博恒固化工设备有限公司 | 镀锌角钢_槽钢_扁钢_圆钢_方矩管厂家_镀锌花纹板-海邦钢铁(天津)有限公司 | 蓝莓施肥机,智能施肥机,自动施肥机,水肥一体化项目,水肥一体机厂家,小型施肥机,圣大节水,滴灌施工方案,山东圣大节水科技有限公司官网17864474793 | 广西正涛环保工程有限公司【官网】 | 桁架楼承板-钢筋桁架楼承板-江苏众力达钢筋楼承板厂 | 山东led显示屏,山东led全彩显示屏,山东LED小间距屏,临沂全彩电子屏-山东亚泰视讯传媒有限公司 | 有机肥设备生产制造厂家,BB掺混肥搅拌机、复合肥设备生产线,有机肥料全部加工设备多少钱,对辊挤压造粒机,有机肥造粒设备 -- 郑州程翔重工机械有限公司 | NM-02立式吸污机_ZHCS-02软轴刷_二合一吸刷软轴刷-厦门地坤科技有限公司 | 凝胶成像仪,化学发光凝胶成像系统,凝胶成像分析系统-上海培清科技有限公司 | 欧美日韩国产一区二区三区不_久久久久国产精品无码不卡_亚洲欧洲美洲无码精品AV_精品一区美女视频_日韩黄色性爱一级视频_日本五十路人妻斩_国产99视频免费精品是看4_亚洲中文字幕无码一二三四区_国产小萍萍挤奶喷奶水_亚洲另类精品无码在线一区 |