UI移動端界面動畫創(chuàng)意與實現(xiàn)

前言
第1章 動效設計基礎知識1
1.1 什么是動效設計2
1.2 動效設計方法2
1.2.1 理解動效2
1.2.2 動態(tài)設計舉例2
1.3 動效在界面設計中的用途3
1.3.1 觀察系統(tǒng)狀態(tài)3
1.3.2 導航和過渡4
1.3.3 使用者的視覺反饋4
1.3.4 加深印象5
1.3.5 增強操控感5
1.4 動效設計原則5
1.4.1 舒適度的建立5
1.4.2 令人愉悅的提示功能6
1.4.3 額外增加界面活力6
1.4.4 吸引用戶的注意力6
1.4.5 讓等待變得更愉快7
1.4.6 界面銜接的延續(xù)感7
1.5 動效制作要素8
1.5.1 響應的反饋8
1.5.2 快速靈敏8
1.5.3 簡明清晰9
1.5.4 目的性9
1.5.5 過渡流暢自然9
1.5.6 關聯(lián)性10
1.5.7 增強操縱10
1.5.8 引導幫助10
1.5.9 升華體驗11
1.6 動效設計重點11
1.6.1 材質與空間11
1.6.2 運動軌跡11
1.6.3 時間表現(xiàn)力12
1.6.4 個性化元素12
1.6.5 導向設計12
1.6.6 背景關系13
1.6.7 交互共鳴13
1.6.8 情感表現(xiàn)14
1.6.9 聚焦動效14
1.7 動效設計表現(xiàn)手法14
1.7.1 拉伸與擠壓14
1.7.2 期望15
1.7.3 入場15
1.7.4 連續(xù)動作與姿態(tài)對應16
1.7.5 重疊與跟隨動作16
1.7.6 動勢漸進/漸出16
1.7.7 次級運動17
1.7.8 節(jié)奏時態(tài)17
1.7.9 夸張18
1.7.10 立體造型18
1.7.11 吸引力18
1.8 動效設計趨勢19
1.8.1 個性化元素19
1.8.2 有趣的運動方式19
1.8.3 交互反饋的生命力20
1.9 動效設計常用的軟件20
1.9.1 Adobe After Effects20
1.9.2 Adobe Photoshop21
1.9.3 Adobe Animate（Flash）21
1.9.4 pixate21
1.9.5 Hype 322
第2章 自然反饋動效設計23
2.1 登錄框輸入動效設計24
2.2 照片操作動效設計25
2.3 名片界面動效設計27
2.4 書寫動效設計29
2.5 密碼輸入動效設計31
2.6 郵箱登錄界面動效設計33
2.7 圖像切換動效設計36
2.8 撥號界面動效設計38
2.8.1 繪制觸控元件39
2.8.2 制作結果動畫40
2.9 翻滾動效設計42
2.9.1 制作主視覺動效42
2.9.2 制作觸控動效44
2.10 確認按鈕動效設計45
2.10.1 制作觸控按鈕45
2.10.2 制作結束動效47
2.11 開關控件動效設計48
2.11.1 繪制控件圖形49
2.11.2 繪制切換動畫50
2.12 換歌界面動效設計52
2.12.1 制作光盤控件效果52
2.12.2 制作裝飾動畫53
2.13 滑動解鎖動效設計54
2.13.1 編輯狀態(tài)動畫55
2.13.2 繪制觸控圖形56
2.14 刷新動效設計57
2.14.1 制作滑動效果57
2.14.2 制作拉伸動效58
2.14.3 添加文字動畫59
第3章 層級關系動效設計61
3.1 收音機啟動界面動效設計62
3.2 相冊界面切換動效設計64
3.3 票務界面動效設計66
3.4 音樂播放界面動效設計68
3.4.1 制作選擇動畫68
3.4.2 繪制控制動畫元素69
3.5 好友列表動效設計70
3.5.1 制作動效元素71
3.5.2 處理動畫細節(jié)71
3.6 分享動效設計72
3.6.1 處理主體動畫效果73
3.6.2 制作跟隨元素動畫74
3.7 圖表數(shù)據(jù)動效設計75
3.7.1 處理細節(jié)元素動畫76
3.7.2 制作主體狀態(tài)動畫77
3.8 手表界面切換動效設計78
3.8.1 繪制主界面動畫78
3.8.2 制作觸控動畫79
3.9 卡片切換動效設計80
3.9.1 制作主體動畫81
3.9.2 處理觸控元素動畫82
3.10 系統(tǒng)提示動效設計83
3.10.1 繪制主體動效元素84
3.10.2 制作主界面反饋動畫86
3.10.3 制作文字動畫87
3.11 功能交互動效設計88
3.11.1 制作狀態(tài)欄動畫88
3.11.2 制作主體動畫控件89
3.11.3 處理反饋動畫91
3.12 卡片式登錄界面動效設計92
3.12.1 制作觸控動畫92
3.12.2 制作輸入狀態(tài)93
3.12.3 編輯確認動畫95
3.12.4 制作切換動畫96
3.13 待機滑動動效設計98
3.13.1 制作主體狀態(tài)動畫98
3.13.2 添加文字動畫99
3.13.3 制作細節(jié)元素動畫100
3.13.4 制作結果動畫101
3.14 備忘便簽動效設計102
3.14.1 為素材圖像添加裝飾102
3.14.2 制作滑動動畫103
3.14.3 制作進度條進度動畫105
3.14.4 為進度條進度動畫添加裝飾105
第4章 愉悅的等待動效設計107
4.1 時鐘插件動效設計108
4.2 上傳圖示動效設計109
4.3 抽獎轉盤動效設計111
4.4 數(shù)據(jù)應用loading動效設計113
4.4.1 繪制界面狀態(tài)113
4.4.2 制作loading動畫115
4.5 卡通加載動效設計116
4.5.1 制作進度條動效116
4.5.2 制作氣球動畫117
4.6 加載進度條動效設計119
4.6.1 繪制進度條動畫119
4.6.2 制作轉圈動畫120
4.7 提示動效設計123
4.7.1 制作觸發(fā)動效123
4.7.2 制作回應動效124
4.8 對錯控件動效設計125
4.8.1 制作正確動畫效果125
4.8.2 繪制出錯動畫效果126
4.9 時間過渡動效設計127
4.9.1 編輯轉換效果128
4.9.2