UI移動端界面動畫創意與實現

前言
第1章動效設計基礎知識1 
1.1什麼是動效設計2 
1.2動效設計方法2 
1.2.1理解動效2 
1.2.2動態設計舉例2 
1.3動效在界面設計中的用途3 
1.3.1觀察系統狀態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界面銜接的延續感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關聯性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時間表現力12 
1.6.4個性化元素12 
1.6.5導向設計12 
1.6.6背景關係13 
1.6.7交互共鳴13 
1.6.8情感表現14 
1.6.9聚焦動效14 
1.7動效設計表現手法14 
1.7.1拉伸與擠壓14 
1.7.2期望15 
1.7.3入場15 
1.7.4連續動作與姿態對應16 
1.7.5重疊與跟隨動作16 
1.7.6動勢漸進/漸出16 
1.7 .7次級運動17 
1.7.8節奏時態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編輯狀態動畫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處理動畫細節71 
3.6分享動效設計72 
3.6.1處理主體動畫效果73 
3.6.2製作跟隨元素動畫74 
3.7圖表數據動效設計75 
3.7.1處理細節元素動畫76 
3.7.2製作主體狀態動畫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系統提示動效設計83 
3.10.1繪製主體動效元素84 
3.10.2製作主界面反饋動畫86 
3.10.3製作文字動畫87 
3.11功能交互動效設計88 
3.11 .1製作狀態欄動畫88 
3.11.2製作主體動畫控件89 
3.11.3處理反饋動畫91
3.12卡片式登錄界面動效設計92 
3.12.1製作觸控動畫92 
3.12.2製作輸入狀態93 
3.12.3編輯確認動畫95 
3.12.4製作切換動畫96 
3.13待機滑動動效設計98 
3.13.1製作主體狀態動畫98 
3.13.2添加文字動畫99 
3.13.3製作細節元素動畫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數據應用loading動效設計113 
4.4.1繪製界面狀態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製作觸發動效123 
4.7.2製作回應動效124 
4.8對錯控件動效設計125 
4.8.1製作正確動畫效果125 
4.8.2繪製出錯動畫效果126 
4.9時間過渡動效設計127 
4.9.1編輯轉換效果128