After Effects移動(dòng)UI交互動(dòng)效設(shè)計(jì)與制作（全彩慕課版）

目　　錄
第 1章　UI動(dòng)效設(shè)計(jì)基礎(chǔ)
1．1　了解UI動(dòng)效設(shè)計(jì)
1．1．1　什么是UI動(dòng)效設(shè)計(jì)
1．1．2　UI動(dòng)效的發(fā)展
1．1．3　動(dòng)效在UI界面中的作用
1．2　UI動(dòng)效設(shè)計(jì)的必要性
1．2．1 增強(qiáng)用戶體驗(yàn)
1．2．2　提升產(chǎn)品氣質(zhì)
1．2．3　體現(xiàn)設(shè)計(jì)師優(yōu)勢(shì)
1．3　如何設(shè)計(jì)動(dòng)效？
1．3．1　首先需要有一個(gè)創(chuàng)意想法
1．3．2　根據(jù)想法進(jìn)行豐滿實(shí)現(xiàn)
1．4　動(dòng)效設(shè)計(jì)的類(lèi)型有哪些？
1．4．1　轉(zhuǎn)場(chǎng)過(guò)渡
1．4．2　層級(jí)展示
1．4．3　空間擴(kuò)展
1．4．4　關(guān)注聚焦
1．4．5　內(nèi)容呈現(xiàn)
1．4．6　操作反饋
1．5　動(dòng)效設(shè)計(jì)制作軟件有哪些？
1．6　基礎(chǔ)動(dòng)效類(lèi)型
1．6．1　基礎(chǔ)動(dòng)效
1．6．2　屬性變化
1．6．3　運(yùn)動(dòng)節(jié)奏
1．6．4　基礎(chǔ)動(dòng)效組合應(yīng)用
1．7　本章小結(jié)
第 2章　掌握After Effects基礎(chǔ)操作
2．1　After Effects概述
2．2　After Effects工作界面
2．2．1　認(rèn)識(shí)After Effects工作界面
2．2．2　工具欄
2．2．3　“項(xiàng)目”面板
2．2．4　“合成”窗口
2．2．5　“時(shí)間軸”面板
2．2．6　其他面板
2．3　After Effects的基本操作
2．3．1　創(chuàng)建項(xiàng)目文件
2．3．2　在項(xiàng)目文件中創(chuàng)建合成
2．3．3　保存和關(guān)閉項(xiàng)目文件
2．3．4　After Effects中的基本工作流程
2．4　素材的導(dǎo)入與管理操作
2．4．1　導(dǎo)入素材的基本方法
2．4．2　導(dǎo)入PSD格式素材
實(shí)戰(zhàn)——通過(guò)導(dǎo)入PSD格式文件創(chuàng)建合成
2．4．3　導(dǎo)入AI格式素材
實(shí)戰(zhàn)——通過(guò)導(dǎo)入AI格式文件創(chuàng)建合成
2．4．4　素材的管理操作
2．4．5　嵌套合成
2．5　認(rèn)識(shí)“時(shí)間軸”面板
2．5．1　“音頻/視頻”選項(xiàng)
2．5．2　“圖層基礎(chǔ)”選項(xiàng)
2．5．3　“圖層開(kāi)關(guān)”選項(xiàng)
2．5．4　“轉(zhuǎn)換控制”選項(xiàng)
2．5．5　“父級(jí)和鏈接”選項(xiàng)
2．5．6　“時(shí)間控制”選項(xiàng)
2．6　After Effects中的圖層
2．6．1　認(rèn)識(shí)不同類(lèi)型的圖層
2．6．2　圖層的混合模式
實(shí)戰(zhàn)——快速制作圖片切換動(dòng)效
2．7　本章小結(jié)
第3章　關(guān)鍵幀基礎(chǔ)動(dòng)效制作
3．1　了解關(guān)鍵幀
3．1．1　理解幀與關(guān)鍵幀
3．1．2　關(guān)鍵幀的創(chuàng)建方法
3．2　關(guān)鍵幀的編輯操作
3．2．1　選擇關(guān)鍵幀
3．2．2　移動(dòng)關(guān)鍵幀
3．2．3　復(fù)制關(guān)鍵幀
3．2．4　刪除關(guān)鍵幀
實(shí)戰(zhàn)——制作火焰循環(huán)動(dòng)效
3．3　基礎(chǔ)“變換”屬性
3．3．1　“錨點(diǎn)”屬性
3．3．2　“位置”屬性
實(shí)戰(zhàn)——制作背景圖片滑動(dòng)切換動(dòng)效
3．3．3　“縮放”屬性
3．3．4　“旋轉(zhuǎn)”屬性
3．3．5　“不透明度”屬性
實(shí)戰(zhàn)——制作APP啟動(dòng)界面動(dòng)效
3．4　關(guān)于運(yùn)動(dòng)路徑
3．4．1　將直線運(yùn)動(dòng)路徑調(diào)整為曲線運(yùn)動(dòng)路徑
3．4．2　運(yùn)動(dòng)自定向
實(shí)戰(zhàn)——制作飛機(jī)飛行動(dòng)效
3．5　關(guān)于圖表編輯器
3．5．1　認(rèn)識(shí)圖表編輯器
3．5．2　設(shè)置對(duì)象的緩動(dòng)效果
實(shí)戰(zhàn)——制作圓球彈跳緩動(dòng)動(dòng)效
3．6　本章小結(jié)
第4章　蒙版動(dòng)效制作與輸出
4．1　形狀的應(yīng)用
4．1．1　關(guān)于路徑形狀
4．1．2　創(chuàng)建路徑群組
4．1．3　設(shè)置路徑形狀屬性
實(shí)戰(zhàn)——制作簡(jiǎn)單的圓環(huán)Loading動(dòng)效
4．2　創(chuàng)建蒙版動(dòng)效
4．2．1　蒙版動(dòng)效原理
4．2．2　形狀工具
4．2．3　鋼筆工具
4．2．4　軌道遮罩
實(shí)戰(zhàn)——制作iOS系統(tǒng)解鎖文字遮罩動(dòng)效
4．2．5　設(shè)置蒙版屬性
實(shí)戰(zhàn)——制作聚光燈動(dòng)效
4．2．6　蒙版的疊加處理
實(shí)戰(zhàn)——制作二維碼掃描動(dòng)效
4．3　在After Effects中渲染輸出動(dòng)畫(huà)
4．3．1　認(rèn)識(shí)渲染工作區(qū)
4．3．2　理解渲染設(shè)置選項(xiàng)
4．3．3　渲染輸出
實(shí)戰(zhàn)——將動(dòng)效渲染輸出為視頻文件
4．3．4　配合Photoshop輸出GIF文件
實(shí)戰(zhàn)——將動(dòng)效輸出為GIF動(dòng)畫(huà)圖片
4．3．5　將動(dòng)畫(huà)嵌入到手機(jī)模板
實(shí)戰(zhàn)——將動(dòng)畫(huà)嵌入到手機(jī)模板中
4．4　本章小結(jié)
第5章　UI元素動(dòng)效
5．1　圖標(biāo)動(dòng)效
5．1．1　圖標(biāo)在UI界面中的作用
5．1．2　圖標(biāo)動(dòng)效的常見(jiàn)表現(xiàn)形式
5．1．3　制作天氣圖標(biāo)動(dòng)效
實(shí)戰(zhàn)——制作天氣圖標(biāo)動(dòng)效
5．1．4　制作日歷圖標(biāo)動(dòng)效
實(shí)戰(zhàn)——制作日歷圖標(biāo)動(dòng)效
5．2　加載進(jìn)度條與開(kāi)關(guān)按鈕動(dòng)效
5．2．1　常見(jiàn)的加載進(jìn)度條表現(xiàn)方式
5．2．2　制作常見(jiàn)的矩形進(jìn)度條動(dòng)效
實(shí)戰(zhàn)——制作常見(jiàn)的矩形進(jìn)度條動(dòng)效
5．2．3　開(kāi)關(guān)按的功能特點(diǎn)
5．2．4　制作開(kāi)關(guān)按鈕動(dòng)效
實(shí)戰(zhàn)——制作開(kāi)關(guān)按鈕動(dòng)效
5．3　文字動(dòng)效
5．3．1　文字動(dòng)效的表現(xiàn)優(yōu)勢(shì)
5．3．2　文字動(dòng)效的常見(jiàn)表現(xiàn)形式
5．3．3　制作手寫(xiě)文字動(dòng)效
實(shí)戰(zhàn)——制作手寫(xiě)文字動(dòng)效
5．4　Logo動(dòng)效
5．4．1　Logo動(dòng)效概述
5．4．2　Logo動(dòng)效的表現(xiàn)優(yōu)勢(shì)
5．4．3　Logo動(dòng)效需要注意的問(wèn)題
5．4．4　制作電商Logo動(dòng)效
實(shí)戰(zhàn)——制作電商Logo動(dòng)效
5．5　工具欄動(dòng)效
5．5．1　關(guān)于工具欄動(dòng)效設(shè)計(jì)
5．5．2　制作工具欄圖標(biāo)旋轉(zhuǎn)展開(kāi)動(dòng)效
實(shí)戰(zhàn)——制作工具欄圖標(biāo)旋轉(zhuǎn)展開(kāi)動(dòng)效
5．6　本章小結(jié)
第6章　界面切換轉(zhuǎn)場(chǎng)動(dòng)效
6．1　界面切換轉(zhuǎn)場(chǎng)動(dòng)效的核心規(guī)則
6．1．1　轉(zhuǎn)場(chǎng)動(dòng)效自然流暢
6．1．2　動(dòng)效層次分明
6．1．3　關(guān)聯(lián)是過(guò)渡動(dòng)效的重要功能
6．1．4　快速的界面切換過(guò)渡
6．1．5　動(dòng)效表現(xiàn)效果要清晰
6．1．6　制作登錄轉(zhuǎn)場(chǎng)動(dòng)效
實(shí)戰(zhàn)——制作登錄轉(zhuǎn)場(chǎng)動(dòng)效
6．2　常見(jiàn)的界面切換轉(zhuǎn)場(chǎng)動(dòng)效
6．2．1　彈出
6．2．2　測(cè)滑
6．2．3　漸變放大
6．2．4　其他
6．2．5　制作圖片翻頁(yè)切換動(dòng)效
實(shí)戰(zhàn)——制作圖片翻頁(yè)切換動(dòng)效
6．3　導(dǎo)航菜單切換動(dòng)效
6．3．1　交互式動(dòng)態(tài)導(dǎo)航菜單的優(yōu)勢(shì)
6．3．2　導(dǎo)航菜單的設(shè)計(jì)要點(diǎn)
6．3．3　制作側(cè)滑導(dǎo)航菜單動(dòng)效
實(shí)戰(zhàn)——制作側(cè)滑導(dǎo)航菜單動(dòng)效
6．4　本章小結(jié)
第7章　UI界面動(dòng)效
7．1　動(dòng)效設(shè)計(jì)的作用與常見(jiàn)效果
7．1．1　動(dòng)效設(shè)計(jì)的作用
7．1．2　常見(jiàn)的UI界面交互動(dòng)效
7．1．3　制作天氣界面動(dòng)效
實(shí)戰(zhàn)——制作天氣界面動(dòng)效
7．1．4　制作界面加載動(dòng)效
實(shí)戰(zhàn)——制作界面加載動(dòng)效
7．2　UI界面交互動(dòng)效設(shè)計(jì)規(guī)范
7．2．1　界面動(dòng)效設(shè)計(jì)要點(diǎn)
7．2．2　通過(guò)動(dòng)效設(shè)計(jì)提升UI界面用戶體驗(yàn)
7．2．3　制作通話界面動(dòng)效
實(shí)戰(zhàn)——制作通話界面動(dòng)效
7．3　優(yōu)秀的界面動(dòng)效有哪些特點(diǎn)
7．3．1　表現(xiàn)當(dāng)前系統(tǒng)狀態(tài)
7．3．2　使界面中的鏈接元素具有觸感
7．3．3　界面轉(zhuǎn)場(chǎng)動(dòng)效要求快速而流暢
7．3．4　使用動(dòng)效表現(xiàn)界面中的變化
7．3．5　注意界面動(dòng)效的細(xì)節(jié)表現(xiàn)
7．3．6　制作APP應(yīng)用歡迎動(dòng)效
實(shí)戰(zhàn)——制作APP應(yīng)用歡迎動(dòng)效
7．4　本章小結(jié)