UI動效大爆炸：After Effects移動UI動效制作學習手冊

01 初識UI動效 013之前先動腦——如何提煉

1.1 認識UI 014

1.1.1 UI 操作系統(tǒng)的發(fā)展簡介 014

1.1.2 UED 團隊的構(gòu)成與介紹 017

1.1.3 UI 的應用領域分析 018

1.1.4 UI 設計師的自我修養(yǎng) 025

1.2 認識UI 動效 028

1.2.1 孕育中的UI 動效 029

1.2.2 UI 動效行業(yè)的現(xiàn)狀與發(fā)展 030

1.2.3 UI 動效的應用領域分析 032

1.2.4 讓設計有意義地存在 037

1.3 如何玩轉(zhuǎn)UI 動效 038

1.3.1 系統(tǒng)設備的準備 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 美觀，不代表一定優(yōu)質(zhì) 058

2.1.4 設計該有溫度 059

2.2 如何構(gòu)思你的動效方案 059

2.2.1 你真的懂得如何去“看”嗎 060

2.2.2 繪制你的動畫分鏡頭 062

2.2.3 可行性評估 065

2.2.4 可拓展性和pin牌感 066

2.2.5 構(gòu)思期間的進展同步 066

2.3 思維導圖構(gòu)建和靈感提煉 067

2.3.1 什么是思維導圖 067

2.3.2 如何繪制你的思維導圖 071

2.3.3 養(yǎng)成靈感提煉的習慣 072


03 教你如何快速玩轉(zhuǎn)After Effects——五大學習階段全修煉073

3.1 半小時，熟悉After Effects 系統(tǒng)的基本操作 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 新建工程文件與相關參數(shù)設置 083

3.1.6 頂部工具欄的認識 084

3.1.7 圖層編輯區(qū)域的介紹 084

3.1.8 紅條出現(xiàn)，別慌 087

3.2 一小時，熟悉界面基本操作技巧 088

3.2.1 新建固態(tài)層（Solid Layer） 088

3.2.2 “嵌套”功能的使用 089

3.2.3 創(chuàng)建“父子關聯(lián)” 090

3.2.4 SHY 和 SOLO 091

3.2.5 關于“MASK”（ 遮罩）功能的介紹 094

3.2.6 3D Layer（3D 層） 099

3.2.7 實戰(zhàn)：After Effects 攝像機的操作 101

3.3 兩小時，學會形狀圖層的運用 101

3.3.1 如何創(chuàng)建Shape Layer 102

3.3.2 Contents 屬性的使用 103

3.3.3 關于路徑圖形的創(chuàng)建 114

3.3.4 Anchor Point（圖層軸心點） 115

3.3.5 如何創(chuàng)建文字層 116

3.3.6 Null Object( 空對象) 的創(chuàng)建和使用 117

3.3.7 “木偶圖釘”工具的使用 118

3.3.8 圖層的復制、截斷和去首尾處理 120

3.4 一小時，讓你的UI 動起來 122

3.4.1 幀與關鍵幀 122

3.4.2 關鍵幀的創(chuàng)建與使用 123

3.4.3 曲線動畫效果的制作 126

3.5 聊聊渲染 130

3.5.1 After Effects 渲染面板的介紹 130

3.5.2 不同的渲染輸出方式介紹 132


04 動效大爆炸——H5動效的實現(xiàn)方式與Material Design動畫 135

4.1 了解HTML5 136

4.1.1 什么是HTML5 136

4.1.2 前端工程師的介紹 138

4.1.3 動畫實現(xiàn)大揭秘1：原生動畫 139

4.1.4 動畫實現(xiàn)大揭秘2：CSS3 動畫 145

4.1.5 動畫實現(xiàn)大揭秘3：CSS2 + JavaScript 149

4.1.6 動畫實現(xiàn)大揭秘4：Canvas + SVG 150

4.1.7 動畫實現(xiàn)大揭秘5：WebGL 154

4.1.8 動畫實現(xiàn)大揭秘6：另辟蹊徑 156

4.2 Material Design 動畫，你必須要知道的 160

4.2.1 什么是Material Design 動畫 160

4.2.2 影響Material Design 動畫的客觀屬性 161

4.2.3 Material Design 的動畫表現(xiàn)形式 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 面板區(qū)域的介紹 179

5.3.2 動畫命令的介紹 180

5.4 Bodymovin（After Effects 動畫轉(zhuǎn)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 界面構(gòu)成五部曲 196

6.2.3 LOGO 誕生記 197

6.2.4 圓環(huán)波普棉花糖 198

6.2.5 線體ICON 變形計 199

6.2.6 水滴融合Loading（有插件+ 無插件雙實現(xiàn)版本）200

6.2.7 靈動的文字百葉窗 201

6.2.8 生長的自行車 202

6.2.9 液態(tài)流體的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 炫動光環(huán) 209

6.4 Gao級篇 210

6.4.1 Hologram 全息手表演示動效 211

6.4.2 QQ 會員15 周年加速特權(quán)篇動效方案 212

6.4.3 粒子LOGO 動畫 21313


07 踏上不歸路，jiu請堅持到底 215

7.1 自學，究jing有多難 216

7.2 關于Performance Flow（演繹過程） 220

7.3 我的個人學習建議 222

后記 224