【包郵】SVG動畫+深入理解SVG+SVG精髓 第2版 SVG繪畫教程書籍 pdf epub mobi txt 電子書 下載 2025

簡體網頁||繁體網頁

☆☆☆☆☆

圖書標籤:

• SVG
• SVG動畫
• SVG精髓
• SVG繪畫
• 前端開發
• 網頁設計
• 矢量圖形
• 技術教程
• 書籍
• 包郵

店鋪： 藍墨水圖書專營店

齣版社： 電子工業齣版社

ISBN：9787121337901

商品編碼：22214963880

著    者：（美）Sarah Drasner（莎拉 德拉斯納）

作 譯 者：大漠等

齣版時間：2018-05    韆 字 數：301

版    次：01-01    頁    數：220

開    本：16開

裝    幀：

I S B N ：9787121337901     

換    版：

所屬分類：科技 >> 計算機 >> 多媒體技術

紙質書定價：￥79.0

在製作Web動畫效果時，使用SVG製作動畫是我們應該掌握的技能之一。本書詳細介紹瞭 SVG的基礎知識、如何使用SVG製作動畫、製作SVG動畫的工具及相關的庫。除些之外，本書也探討瞭SVG還能做的一些十分有趣的事情，比如數據可視化、可伸縮的矢量圖、響應式設計等。Sarah為廣大讀者提供瞭一本非常優秀的書籍，可幫助讀者更係統地掌握SVG和 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章 動“不可動者”：通過改變屬性使用原生 實現動畫....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動畫

齣版信息

書 名深入理解SVG

係列書名圖靈程序設計叢書

執行編輯關於本書的內容有任何問題，請聯係 硃巍

書 號978-7-115-46758-4

定 價59.00 元

頁 數252

印刷方式四色

開 本大32開

齣版狀態正在排版

2017.9

 

 

本書特色

SVG必讀。本書介紹SVG繪畫，包括基礎知識和如何通過混閤和搭配工具來生成復雜的效果。主要內容包括：把SVG代碼轉換為可視圖形的渲染模型，如何使用顔色，透明度的控製方法以及它對圖片的影響，渲染服務和漸變。 本書適閤所有想利用SVG提高Web體驗的讀者。

目錄

正在加工……

作者介紹

Amelia Bellamy-Royds 位專門從事科學和技術交流的自由撰稿人。她在網絡設計圈內因關於SVG的著作而齣名。Amelia是W3C SVG工作組的特邀專傢，並且積極參與SVG輔助工作組的工作。她通過參與在綫社區（例如Web Platform Docs、Stack Exchange和 Codepen）來幫助促進Web標準和設計的發展。

SVG精髓（第2版） 

Web開發和設計人員必備手冊，透徹講解SVG的技術細節！

基本信息

作者： [美] J. David Eisenberg    [加] Amelia Bellamy-Royds   

譯者： 易鄭超, 何鵬飛

叢書名： 圖靈程序設計叢書

齣版社：人民郵電齣版社

ISBN：9787115402547

上架時間：2015-9-21

齣版日期：2015 年10月

開本：16開

頁碼：296

版次：2-1

所屬分類： 計算機 > 軟件與程序設計 > 網絡編程 > 綜閤

 

編輯推薦

本書詳盡介紹瞭可縮放矢量圖形（SVG）技術。SVG是一種標記語言，為大多數矢量繪圖程序和交互式Web圖形工具所使用。本書將帶你詳細瞭解SVG的功能，首先學習簡單的SVG應用，如繪製綫條，然後逐步探索復雜的特性，比如濾鏡、變換、漸變和圖案等。

本書第2版擴展瞭動畫、交互式圖形以及SVG編程等內容。交互式的在綫示例讓你很容易在Web瀏覽器中實驗SVG的特性。本書還為經驗豐富的設計師準備瞭6個附錄，解釋瞭XML標記和CSS樣式等基本概念，因此即使你沒有網頁設計的經驗，也可以開始學習SVG。

通過閱讀本書，你將能夠：

為網頁創建高質量、高分辨率的圖形；

創建通過搜索引擎或輔助技術易於訪問的圖錶和裝飾性標題；

用SVG濛版、濾鏡以及變換給圖形、文本和照片添加藝術效果；

用SVG標記動畫繪製圖形，使用CSS和添加交互；

根據現有的矢量數據或XML數據使用編程語言或XSLT創建SVG。

 

內容簡介

    書籍

    計算機書籍

《SVG精髓（第2版）》通過實例透徹講解瞭SVG（可縮放矢量圖形）這種標記語言的規範及應用。作者從簡單的SVG應用開始，帶領讀者逐步探索瞭SVG的復雜功能，包括濾鏡、變換、漸變和模式。從應用層麵看，本書涵蓋瞭動畫、交互圖形和動態SVG編程等技術，不僅能為有經驗的開發人員提供重要參考，同時通過講解基本的XML和CSS技術，為沒有Web開發經驗的讀者提供瞭入門捷徑。 

作譯者

J. David Eisenberg 

一名程序員和教師。他開發瞭CSS、、CGI、XML和Perl等多門編程課程，並在加州聖何塞常青榖學院教授計算機信息技術課程。他還著有études for Erlang、Let's Read Hiragana以及本書第1版。 

 

Amelia Bellamy-Royds 

一位專門從事科學和技術交流的自由撰稿人。她通過參與Web Platform Docs、Stack Exchange和Codepen等在綫社區，幫助推動Web標準和設計。 

目錄

前言 xii

第1章 入門指南 1

1.1 圖形係統 1

1.1.1 柵格圖形 1

1.1.2 矢量圖形 2

1.1.3 柵格圖形的用途 2

1.1.4 矢量圖形的用途 2

1.2 可縮放 3

1.3 SVG的作用 5

1.4 創建一個SVG圖像 5

1.4.1 文檔結構 5

1.4.2 基本形狀 6

1.4.3 指定樣式屬性 6

1.4.4 圖形對象分組 7

1.4.5 變換坐標係統 8

1.4.6 其他基本圖形 8

1.4.7 路徑 9

1.4.8 文本 10

第2章 在網頁中使用SVG 12

2.1 將SVG作為圖像 12

2.1.1 在元素內包含SVG 13

2.1.2 在CSS中包含SVG 14

2.2 將SVG作為應用程序 15

2.3 混閤文檔中的SVG標記 16

2.3.1 SVG中的foreign object 16

2.3.2 在XHTML或者HTML5中內聯SVG 18

2.3.3 其他XML應用程序中的SVG 20

第3章 坐標係統 21

3.1 視口 21

3.2 使用默認用戶坐標 22

。、、、、

評分☆☆☆☆☆

評分☆☆☆☆☆

評分☆☆☆☆☆

評分☆☆☆☆☆

評分☆☆☆☆☆

評分☆☆☆☆☆

評分☆☆☆☆☆

評分☆☆☆☆☆

評分☆☆☆☆☆