目錄
1.1 UI簡(jiǎn)介.18
1.1.1 什么是UI18
1.1.2 發(fā)展現(xiàn)狀及未來(lái).18
1.1.3 UI的應(yīng)用領(lǐng)域.19
1.1.4 什么才是優(yōu)秀的UI19
1.2 UI動(dòng)效.20
1.2.1 UI動(dòng)效很重要.20
1.2.2 UI動(dòng)效的設(shè)計(jì)原則21
1.2.3 UI動(dòng)效制作的要點(diǎn)22
1.2.4 過(guò)渡效果..23
1.2.5 自定義動(dòng)畫(huà)..24
第 2章 After Effects動(dòng)效制作基礎(chǔ)
2.1 認(rèn)識(shí)After Effects界面26
2.1.1 認(rèn)識(shí)基本的面板.26
2.1.2 工具欄中常用的工具..29
2.1.3 導(dǎo)入素材的方法32
2.1.4 導(dǎo)入PSD AI Sketch文件的方法32
2.1.5 出現(xiàn)紅條提示的處理方法.35
2.2 認(rèn)識(shí)合成.36
2.2.1 新建合成..36
2.2.2 合成的設(shè)置和操作37
2.2.3 合成的嵌套功能37
2.3 學(xué)習(xí)基本操作技巧.37
2.3.1 蒙版38
2.3.2 軌道遮罩..40
2.3.3 父級(jí)關(guān)聯(lián)..41
2.3.4 其他圖層操作.44
2.4 圖層類型和效果預(yù)設(shè).45
2.4.1 視頻和音頻圖層45
2.4.2 文本圖層..45
2.4.3 純色圖層..46
2.4.4 燈光圖層..46
2.4.5 攝像機(jī)圖層.46
2.4.6 空對(duì)象圖層.47
2.4.7 形狀圖層..47
2.4.8 調(diào)整圖層..47
2.4.9 3D圖層.47
2.4.10 效果和預(yù)設(shè)的添加與使用..48
2.5 渲染與導(dǎo)出.49
2.5.1 設(shè)置需要渲染的工作區(qū)域.49
2.5.2 渲染隊(duì)列的常用設(shè)置..50
2.5.3 使用Adobe Media Encoder導(dǎo)出.53
實(shí)例：制作一個(gè)3D切換效果的幻燈片.53
第3章 從基本組件開(kāi)始學(xué)習(xí)制作
3.1 按鈕（Button）與開(kāi)關(guān)（Switch）. 60
3.1.1 學(xué)習(xí)各類按鈕動(dòng)效60
實(shí)例：制作單擊按鈕時(shí)的漣漪效果60
實(shí)例：制作實(shí)現(xiàn)功能變換的按鈕62
3.1.2 有趣的開(kāi)關(guān)..65
實(shí)例：制作常規(guī)的開(kāi)關(guān)操作動(dòng)效65
實(shí)例：制作萌趣生動(dòng)的開(kāi)關(guān).67
3.2 菜單（Menu）.70
實(shí)例：制作彈出式菜單..70
實(shí)例：制作分層菜單74
3.3 列表（List）.78
實(shí)例：制作列表的出現(xiàn)效果.78
實(shí)例：制作列表頁(yè)的毛玻璃效果80
3.4 卡片（Card）和輪播圖（Carousel）.83
3.4.1 卡片83
實(shí)例：制作查看相冊(cè)圖片效果.83
實(shí)例：制作圖文卡片的展開(kāi)動(dòng)效86
3.4.2 輪播圖..90
實(shí)例：制作擁有視差效果的輪播圖90
3.5 加載（Loading）和進(jìn)度條（Progress）..94
3.5.1 基礎(chǔ)的加載動(dòng)效.94
實(shí)例：實(shí)現(xiàn)Material Design風(fēng)格加載動(dòng)效94
3.5.2 基礎(chǔ)的進(jìn)度條動(dòng)效97
實(shí)例：制作快速實(shí)現(xiàn)進(jìn)度圈動(dòng)效97
第4章 將動(dòng)效運(yùn)用在UI設(shè)計(jì)中
4.1 制作靈動(dòng)的UI特效102
實(shí)例：制作LOGO的切片動(dòng)效.102
實(shí)例：制作科技感旋轉(zhuǎn)球體.105
實(shí)例：制作水波紋加載球動(dòng)效.107
實(shí)例：制作高大上的金屬效果動(dòng)效.111
實(shí)例：制作生動(dòng)有趣的圖標(biāo).115
4.2 打造個(gè)性化的UI組件120
實(shí)例：制作卡片式輪播圖動(dòng)效.120
實(shí)例：制作酷炫的電流加載動(dòng)效123
實(shí)例：制作液態(tài)效果的下拉刷新動(dòng)效.126
實(shí)例：制作有重力感的繩子動(dòng)效..132
4.3 生動(dòng)的插畫(huà)動(dòng)效140
實(shí)例：制作在睡覺(jué)的貓..140
實(shí)例：制作萌萌噠小球的果凍動(dòng)畫(huà).144
實(shí)例：制作夜空中飛入云層的飛機(jī)..150
第5章 常用的動(dòng)效制作腳本
5.1 導(dǎo)出Lottie動(dòng)畫(huà)的擴(kuò)展腳本Bodymovin.154
5.1.1 Lottie概述 154
5.1.2 Bodymovin的安裝與相關(guān)設(shè)置.. 155
5.1.3 Bodymovin的使用方法 156
5.2 形狀融合腳本Shape Fusion.. 158
5.2.1 Shape Fusion的安裝 158
5.2.2 Shape Fusion的使用方法.. 159
5.3 圖形動(dòng)畫(huà)腳本Motion 2. 160
5.3.1 快速調(diào)整中心點(diǎn)或速率曲線 160
5.3.2 快速實(shí)現(xiàn)動(dòng)效的操作工具 161
5.3.3 其他腳本菜單... 163
5.4 模擬觸控點(diǎn)腳本Touch Point Pro..163
5.4.1 Touch Point Pro的安裝.. 164
5.4.2 Touch Point Pro的使用方法. 164
第6章 電動(dòng)車(chē)助手App動(dòng)效實(shí)現(xiàn)
6.1 設(shè)計(jì)介紹166
6.2 制作車(chē)輛狀態(tài)的展示動(dòng)效169
6.2.1 車(chē)輛狀態(tài)的卡片樣式. 170
6.2.2 車(chē)輛狀態(tài)的儀表盤(pán).. 171
6.2.3 電池使用狀態(tài)的卡片樣式 173
6.2.4 天氣狀態(tài)的卡片樣式. 174
6.2.5 承載所有卡片的合成. 175
6.2.6 完整效果. 176
6.3 制作車(chē)輛控制后的車(chē)輛狀態(tài)詳情的展示動(dòng)效.183
6.3.1 車(chē)輛控制狀態(tài) 184
6.3.2 車(chē)輛狀態(tài)詳情 187
6.3.3 展示動(dòng)效. 189
6.4 制作界面合并與界面演示介紹的動(dòng)效.193
6.4.1 界面合并. 194
6.4.2 界面演示介紹 198