01 初識UI動效 013之前先動腦——如何提煉
1.1 認識UI 014
1.1.1 UI 操作係統的發展簡介 014
1.1.2 UED 團隊的構成與介紹 017
1.1.3 UI 的應用領域分析 018
1.1.4 UI 設計師的自我修養 025
1.2 認識UI 動效 028
1.2.1 孕育中的UI 動效 029
1.2.2 UI 動效行業的現狀與發展 030
1.2.3 UI 動效的應用領域分析 032
1.2.4 讓設計有意義地存在 037
1.3 如何玩轉UI 動效 038
1.3.1 係統設備的準備 038
1.3.2 我的切身學習體會 039
1.3.3 螺鏇提升計劃 040
1.3.4 建造你的靈感彈藥庫 042
1.3.5 如何正確看待“審美” 044
1.3.6 嘿！你著什麼急 044
1.4 UI 動效製作的工具介紹 045
1.4.1 二維/ 原型類動畫工具 045
1.4.2 3D 類動畫工具 049
1.4.3 After Effects 052
02 動手之前先動腦——如何提煉你的設計思維 055
2.1 全局考量 056
2.1.1 設計師和美工，僅一步之遙 056
2.1.2 “先整體後局部”的思考程序 057
2.1.3 美觀，不代錶一定優質 058
2.1.4 設計該有溫度 059
2.2 如何構思你的動效方案 059
2.2.1 你真的懂得如何去“看”嗎 060
2.2.2 繪製你的動畫分鏡頭 062
2.2.3 可行性評估 065
2.2.4 可拓展性和pin牌感 066
2.2.5 構思期間的進展同步 066
2.3 思維導圖構建和靈感提煉 067
2.3.1 什麼是思維導圖 067
2.3.2 如何繪製你的思維導圖 071
2.3.3 養成靈感提煉的習慣 072
03 教你如何快速玩轉After Effects——五大學習階段全修煉073
3.1 半小時，熟悉After Effects 係統的基本操作 074
3.1.1 認識After Effects 的基本麵闆 074
3.1.2 如何將PSD 文件導入After Effects 075
3.1.3 如何將AI 文件導入After Effects 077
3.1.4 如何將Sketch 文件導入After Effects 080
3.1.5 新建工程文件與相關參數設置 083
3.1.6 頂部工具欄的認識 084
3.1.7 圖層編輯區域的介紹 084
3.1.8 紅條齣現，彆慌 087
3.2 一小時，熟悉界麵基本操作技巧 088
3.2.1 新建固態層（Solid Layer） 088
3.2.2 “嵌套”功能的使用 089
3.2.3 創建“父子關聯” 090
3.2.4 SHY 和 SOLO 091
3.2.5 關於“MASK”（ 遮罩）功能的介紹 094
3.2.6 3D Layer（3D 層） 099
3.2.7 實戰：After Effects 攝像機的操作 101
3.3 兩小時，學會形狀圖層的運用 101
3.3.1 如何創建Shape Layer 102
3.3.2 Contents 屬性的使用 103
3.3.3 關於路徑圖形的創建 114
3.3.4 Anchor Point（圖層軸心點） 115
3.3.5 如何創建文字層 116
3.3.6 Null Object( 空對象) 的創建和使用 117
3.3.7 “木偶圖釘”工具的使用 118
3.3.8 圖層的復製、截斷和去首尾處理 120
3.4 一小時，讓你的UI 動起來 122
3.4.1 幀與關鍵幀 122
3.4.2 關鍵幀的創建與使用 123
3.4.3 麯綫動畫效果的製作 126
3.5 聊聊渲染 130
3.5.1 After Effects 渲染麵闆的介紹 130
3.5.2 不同的渲染輸齣方式介紹 132
04 動效大爆炸——H5動效的實現方式與Material Design動畫 135
4.1 瞭解HTML5 136
4.1.1 什麼是HTML5 136
4.1.2 前端工程師的介紹 138
4.1.3 動畫實現大揭秘1：原生動畫 139
4.1.4 動畫實現大揭秘2：CSS3 動畫 145
4.1.5 動畫實現大揭秘3：CSS2 + JavaScript 149
4.1.6 動畫實現大揭秘4：Canvas + SVG 150
4.1.7 動畫實現大揭秘5：WebGL 154
4.1.8 動畫實現大揭秘6：另闢蹊徑 156
4.2 Material Design 動畫，你必須要知道的 160
4.2.1 什麼是Material Design 動畫 160
4.2.2 影響Material Design 動畫的客觀屬性 161
4.2.3 Material Design 的動畫錶現形式 163
4.2.4 Material Design 動畫設計的注意事項 168
05 遊戲有外掛，動效有腳本——不同動效插件的介紹與使用方法 173
5.1 概述 174
5.2 Shape Fusion（融閤效果腳本插件） 174
5.2.1 Shape Fusion 的安裝與加載方法 175
5.2.2 Shape Fusion 的使用與操作流程 176
5.3 Mt. Mograph Motion（圖形動畫腳本插件）178
5.3.1 麵闆區域的介紹 179
5.3.2 動畫命令的介紹 180
5.4 Bodymovin（After Effects 動畫轉HTML5的腳本插件） 185
5.4.1 關於Lottie 工具的介紹 186
5.4.2 Bodymovin 的安裝與加載方式 186
5.4.3 如何在Bodymovin 中完成動畫的渲染輸齣 189
06 手把手教你玩動效——動效製作方法的視頻全解析 193
6.1 概述 194
6.2 基礎篇 194
6.2.1 水波紋加載動畫 195
6.2.2 界麵構成五部麯 196
6.2.3 LOGO 誕生記 197
6.2.4 圓環波普棉花糖 198
6.2.5 綫體ICON 變形計 199
6.2.6 水滴融閤Loading（有插件+ 無插件雙實現版本）200
6.2.7 靈動的文字百葉窗 201
6.2.8 生長的自行車 202
6.2.9 液態流體的LOGO 203
6.3 進階篇 204
6.3.1 圖形切割 204
6.3.2 2D 卡通的爆炸LOGO 206
6.3.3 電擊的LOGO 207
6.3.4 動感塗鴉字體LOGO 208
6.3.5 HUD 炫動光環 209
6.4 Gao級篇 210
6.4.1 Hologram 全息手錶演示動效 211
6.4.2 QQ 會員15 周年加速特權篇動效方案 212
6.4.3 粒子LOGO 動畫 21313
07 踏上不歸路，就請堅持到底 215
7.1 自學，究jing有多難 216
7.2 關於Performance Flow（演繹過程） 220
7.3 我的個人學習建議 222
後記 224
· · · · · · (收起)