☆☆☆☆☆
簡體網頁||繁體網頁



點擊這裡下載

類似圖書 點擊查看全場最低價

---

編輯推薦

　　網絡時代，用戶體驗的重要性毋庸置疑，動畫在這一過程中的重要性也明顯提升。如何在不分散用戶注意的情況下達到動畫設計加強頁麵目的的效果，已經成為用戶界麵設計師和Web開發人員孜孜以求的目標。本書將為此提供的知識。
　　書中內容共分為8章，以作者開發的動畫庫Velocity。js為工具，簡明扼要地探討瞭JavaScript動畫的特點和工作流方麵的優勢，涵蓋開發者們關心的文本動畫、SVG、動畫性能等問題。掌握書中內容，即可自信實現視覺上效果震撼、技術上易於維護的動畫效果。

內容簡介

　　本書由業界先進的動畫庫Velocity。js的作者所著，書中內容共分為8章，簡明扼要地總結瞭在網頁上使用動畫的技術技巧，讓讀者掌握如何有效利用動畫實現無與倫比的用戶體驗。具體內容包括：JavaScript動畫優勢，Velocity。js的利用，動畫工作流，文本動畫，SVG，動畫性能。
　　本書適閤所有Web開發工程師和動畫設計師晉階學習。

作者簡介

　　Julian Shapiro 業界先進的動畫庫Velocity.js的作者，JavaScript開發人員，曾獲Stripe開源奬金。

目錄

第1 章 JavaScript 動畫的優勢 1
1．1 JavaScript 動畫與CSS 動畫 2
1．2 強大的性能 3
1．3 功能 4
1．3．1 頁麵滾動 4
1．3．2 動畫反轉 4
1．3．3 基於物理的動效 5
1．4 易維護的工作流 5
1．5 小結 6
第2 章 使用Velocity．js 實現動畫 7
2．1 JavaScript 動畫庫的種類 8
2．2 安裝jQuery 和Velocity 8
2．3 使用Velocity：基礎知識 8
2．3．1 Velocity 和jQuery 9
2．3．2 參數 9
2．3．3 屬性 10
2．3．4 值 11
2．3．5 鏈式操作 12
2．4 使用Velocity：選項 13
2．4．1 duration（持續時間） 13
2．4．2 easing（緩動） 13
2．4．3 begin（開始）和complete（完成） 15
2．4．4 loop（循環） 16
2．4．5 delay（延遲） 17
2．4．6 display（顯示）和visibility（可見性） 18
2．5 使用Velocity：其他功能 19
2．5．1 reverse（反轉）命令 20
2．5．2 scrolling（滾動） 20
2．5．3 color（顔色） 21
2．5．4 transform（變換） 22
2．6 使用Velocity：不用jQuery（中級技巧） 22
2．7 小結 24
第3 章 動效設計理論 25
3．1 動效設計提升用戶體驗 26
3．2 實用 27
3．2．1 藉鑒慣例 27
3．2．2 預覽結果 27
3．2．3 無聊時的消遣 28
3．2．4 用本能反應 29
3．2．5 使人對互動充滿欲望 29
3．2．6 體現重要性 29
3．2．7 減少同時發生的動畫 29
3．2．8 減少動畫種類 30
3．2．9 鏡像動畫 30
3．2．10 限製持續時間 30
3．2．11 限製動畫 31
3．3 優雅 32
3．3．1 不要華而不實 32
3．3．2 唯一華而不實的機會 32
3．3．3 考慮個性化 32
3．3．4 不要拘泥於不透明度動畫 33
3．3．5 將動畫拆分為多步 33
3．3．6 錯開動畫 33
3．3．7 從觸發元素處産生動畫 34
3．3．8 使用圖形 34
3．4 小結 36
第4 章 動畫工作流 37
4．1 CSS 動畫工作流 38
4．1．1 CSS 的問題 38
4．1．2 什麼時候用CSS 比較明智 38
4．2 代碼技巧：將樣式與邏輯分離 40
4．2．1 一般做法 40
4．2．2 優化做法 41
4．3 代碼技巧：組織排序動畫 44
4．3．1 一般做法 45
4．3．2 優化做法 46
4．4 代碼技巧：打包你的效果 47
4．4．1 一般做法 47
4．4．2 優化做法 48
4．5 設計技巧 51
4．5．1 定時乘數 51
4．5．2 使用Velocity 動效設計器 52
4．6 小結 53
第5 章 文本動畫 55
5．1 文本動畫的一般做法 56
5．2 為使用Blast．js 實現動畫準備文本元素 57
5．2．1 Blast．js 的工作原理 58
5．2．2 安裝 59
5．2．3 選項：delimiter（分隔符） 60
5．2．4 選項：customClass（自定義類） 61
5．2．5 選項：generateValueClass（生成值類） 61
5．2．6 選項：tag（標簽） 62
5．2．7 命令：reverse（反轉） 63
5．3 讓文本過渡進入視圖或離開視圖 64
5．3．1 替換已有文本 64
5．3．2 錯開動畫 65
5．3．3 過渡文本離開視圖 65
5．4 過渡單個文本部分 67
5．5 華麗地過渡文本 68
5．6 文字裝飾 68
5．7 小結 70
第6 章 SVG 入門 71
6．1 用代碼創建圖片 72
6．2 SVG 標記的寫法 72
6．3 SVG 樣式設置 73
6．4 對SVG 的支持 74
6．5 SVG 動畫 74
6．5．1 傳入屬性 75
6．5．2 錶象屬性 75
6．5．3 定位屬性（positional attribute）VS 變換（transform） 75
6．6 應用實例：logo 動畫 76
6．7 小結 78
第7 章 動畫性能 79
7．1 網絡性能的實際情況 80
7．2 技術：去除布局顛簸 82
7．2．1 問題 82
7．2．2 解決辦法 82
7．2．3 jQuery 元素對象 83
7．2．4 強製給值 85
7．3 批量添加DOM 86
7．3．1 問題 86
7．3．2 解決辦法 87
7．4 技巧：避免影響臨近的元素 88
7．4．1 問題 88
7．4．2 解決辦法 89
7．5 技巧：減少並發加載 90
7．5．1 問題 90
7．5．2 解決辦法 90
7．6 技巧：不用持續響應滾動（scroll）和調整大小（resize）事件 92
7．6．1 問題 92
7．6．2 解決辦法 92
7．7 技巧：減少圖片渲染 93
7．7．1 問題 93
7．7．2 解決辦法 93
7．7．3 暗中潛入的圖片 94
7．8 在舊瀏覽器上降級動畫 94
7．8．1 問題 94
7．8．2 解決辦法 95
7．9 盡早找到你的性能門限 95
7．10 小結 98
第8 章 動畫演示 99
8．1 行為 100
8．2 代碼結構 101
8．3 代碼段：動畫設置 103
8．4 代碼段：圓形創建 104
8．5 代碼段：容器動畫 105
8．5．1 三維CSS 入門 105
8．5．2 屬性 106
8．5．3 選項 107
8．6 代碼段：圓形動畫 107
8．6．1 值函數 108
8．6．2 不透明度動畫 109
8．6．3 平移動畫 109
8．6．4 反轉命令 110
8．7 小結 111

前言/序言

　　在網絡剛起步時，動畫（animation）主要是在開發新手實在沒有其他辦法時纔會使用的，為的是強調頁麵上的重要部分以吸引人們的注意。即使他們想讓動畫突破限製而發揮更大作用，也做不到，因為瀏覽器（以及電腦）的速度太慢，無法流暢地呈現基於網絡的動畫效果。
　　我們從閃爍的橫幅廣告、滾動的跑馬燈新聞和Flash介紹視頻的舊時光一路走來，取得瞭長足的發展。時至今日，iOS以及Android中嘆為觀止的動效設計（motion design）不僅沒有降低用戶體驗，反而使其大大改善。最優秀的網站和應用的開發人員利用動畫來提升用戶界麵的感覺和直覺性。動畫在設計開發中的重要性明顯提升，這不僅僅是因為硬件的處理能力提高瞭，更體現瞭網絡開發群體對於最佳實踐有瞭更深的理解。現如今，人們普遍認為最終用戶體驗的質量比開發網站用什麼工具更加重要。當然，盡管這是個看似明顯的結論，但事實卻並非總是如此。
　　那麼，究竟是什麼偏偏讓動畫變得這麼有用？不論是內容塊之間的過渡效果、復雜加載次序的設計還是對用戶下一步操作的提示，動畫都是文字和布局的有效補充，強化瞭網站的預期行為、彰顯瞭個性、豐富瞭視覺體驗。內容究竟是要以友好的方式彈跳齣現呢，還是要猛然甩到屏幕上？這正是動效設計研究的問題。同時，你的選擇將會決定應用的總體感覺。
　　當用戶將你的應用推薦給他人的時候，他們經常會試著用“順滑”或“精緻”這樣的字眼來形容，但卻沒有意識到，他們描述的大多是界麵上的動效設計。作為外行人，他們沒法明確區分應用和應用的動效設計，而這正是優秀的用戶界麵（UI）設計師孜孜以求的效果：用動畫來加強頁麵所要達到的目標，但同時又不分散用戶的注意。
　　本書為你提供瞭一些必備的知識。掌握瞭它，就可以自信地實現動畫效果，不僅視覺上效果震撼而且技術上也易於維護。一方麵要通過動效設計豐富頁麵體驗，另一方麵又要避免纍贅的花哨。本書自始至終都努力在這兩者之間達到平衡。
　　為什麼所有這一切都如此重要？為什麼值得花費時間去優化過渡和淡入淡齣效果？以上這些問題的答案也正是設計師花費幾個小時優化字體和顔色的原因：隻是因為使産品越來越完美，這種感覺棒極瞭。是他們讓用戶嘖嘖稱贊、口口相傳：“哇，這簡直太酷瞭。”然後馬上轉頭對朋友叫道：“你可得看看這個！”
　　注意　如果不熟悉基本的CSS屬性，那就需要先找本介紹HTML和CSS的書看看，然後再來讀本書。

JavaScript網頁動畫設計 下載 mobi epub pdf txt 電子書

評分☆☆☆☆☆

不錯

評分☆☆☆☆☆

小薄書，適閤高級讀者，js初入門的就不必買瞭。

評分☆☆☆☆☆

書不錯，給力。大神就是大神。沒辦法。

評分☆☆☆☆☆

還不錯，研究中

評分☆☆☆☆☆

好

評分☆☆☆☆☆

還行

評分☆☆☆☆☆

書挺好

評分☆☆☆☆☆

書中的ux概念都挺乾貨的，雖然內容不多。

評分☆☆☆☆☆

給力~~~~~~~~~~~~~~~

類似圖書 點擊查看全場最低價