新印象 After Effects移動UI動效製作與設計精粹

鐺輝，週鐺輝，現任網易視覺設計師，獲得網易LOFTER設計師。擁有兩年互聯網創業團隊經歷，且擔任主要設計負責人，擁有多個落地項目經驗，多次獲得UI設計和平面設計大獎。

目錄
1．1　UI簡介． 18
1．1．1　什麼是UI18
1．1．2　發展現狀及未來． 18
1．1．3　UI的應用領域． 19
1．1．4　什麼才是優秀的UI19
1．2　UI動效． 20
1．2．1　UI動效很重要． 20
1．2．2　UI動效的設計原則21
1．2．3　UI動效製作的要點22
1．2．4　過渡效果． ． 23
1．2．5　自定義動畫． ． 24
第　2章 After Effects動效製作基礎
2．1　認識After Effects界面26
2．1．1　認識基本的面板． 26
2．1．2　工具欄中常用的工具． ． 29
2．1．3　導入素材的方法32
2．1．4　導入PSD/AI/Sketch文件的方法32
2．1．5　出現紅條提示的處理方法． 35
2．2　認識合成． 36
2．2．1　新建合成． ． 36
2．2．2　合成的設置和操作37
2．2．3　合成的嵌套功能37
2．3　學習基本操作技巧． 37
2．3．1　蒙版38
2．3．2　軌道遮罩． ． 40
2．3．3　父級關聯． ． 41
2．3．4　其他圖層操作． 44
2．4　圖層類型和效果預設． 45
2．4．1　視頻和音頻圖層45
2．4．2　文本圖層． ． 45
2．4．3　純色圖層． ． 46
2．4．4　燈光圖層． ． 46
2．4．5　攝像機圖層． 46
2．4．6　空對像圖層． 47
2．4．7　形狀圖層． ． 47
2．4．8　調整圖層． ． 47
2．4．9　3D圖層． 47
2．4．10　效果和預設的添加與使用． ． 48
2．5　渲染與導出． 49
2．5．1　設置需要渲染的工作區域． 49
2．5．2　渲染隊列的常用設置． ． 50
2．5．3　使用Adobe Media Encoder導出． 53
實例：製作一個3D切換效果的幻燈片． 53
第3章　從基本組件開始學習製作
3．1　按鈕（Button）與開關（Switch）．　60
3．1．1　學習各類按鈕動效60
實例：製作單擊按鈕時的漣漪效果60
實例：製作實現功能變換的按鈕62
3．1．2　有趣的開關． ． 65
實例：製作常規的開關操作動效65
實例：製作萌趣生動的開關． 67
3．2　菜單（Menu）． 70
實例：製作彈出式菜單． ． 70
實例：製作分層菜單74
3．3　列表（List）． 78
實例：製作列表的出現效果． 78
實例：製作列表頁的毛玻璃效果80
3．4　卡片（Card）和輪播圖（Carousel）． 83
3．4．1　卡片83
實例：製作查看相冊圖片效果． 83
實例：製作圖文卡片的展開動效86
3．4．2　輪播圖． ． 90
實例：製作擁有視差效果的輪播圖90
3．5　加載（Loading）和進度條（Progress）． ． 94
3．5．1　基礎的加載動效． 94
實例：實現Material　Design風格加載動效94
3．5．2　基礎的進度條動效97
實例：製作快速實現進度圈動效97
第4章　將動效運用在UI設計中
4．1　製作靈動的UI特效102
實例：製作LOGO的切片動效． 102
實例：製作科技感旋轉球體． 105
實例：製作水波紋加載球動效． 107
實例：製作“高大上”的金屬效果動效． 111
實例：製作生動有趣的圖標． 115
4．2　打造個性化的UI組件120
實例：製作卡片式輪播圖動效． 120
實例：製作酷炫的電流加載動效123
實例：製作液態效果的下拉刷新動效． 126
實例：製作有重力感的繩子動效． ． 132
4．3　生動的插畫動效140
實例：製作在睡覺的貓． ． 140
實例：製作“萌萌噠”小球的果凍動畫． 144
實例：製作夜空中飛入雲層的飛機． ． 150
第5章　常用的動效製作腳本
5．1　導出Lottie動畫的擴展腳本——Bodymovin． 154
5．1．1　Lottie概述　154
5．1．2　Bodymovin的安裝與相關設置． ．　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　圖形動畫腳本——Motion 2．　160
5．3．1　快速調整中心點或速率曲線　160
5．3．2　快速實現動效的操作工具　161
5．3．3　其他腳本菜單． ． ．　163
5．4　模擬觸控點腳本——Touch Point Pro． ． 163
5．4．1　Touch Point Pro的安裝． ．　164
5．4．2　Touch Point Pro的使用方法．　164
第6章　電動車助手App動效實現
6．1　設計介紹166
6．2　製作車輛狀態的展示動效169
6．2．1　車輛狀態的卡片樣式．　170
6．2．2　車輛狀態的儀錶盤． ．　171
6．2．3　電池使用狀態的卡片樣式　173
6．2．4　天氣狀態的卡片樣式．　174
6．2．5　承載所有卡片的合成．　175
6．2．6　完整效果．　176
6．3　製作車輛控制後的車輛狀態詳情的展示動效． 183
6．3．1　車輛控制狀態　184
6．3．2　車輛狀態詳情　187
6．3．3　展示動效．　189
6．4　製作界面合併與界面演示介紹的動效． 193
6．4．1　界面合併．　194
6．4．2　界面演示介紹　198