UI交互設(shè)計案例教程 第六章

06常見UI交互動效設(shè)計與實現(xiàn)（下）簽到簽到方式教師通過“文旌課堂APP”生成簽到二維碼，并設(shè)置簽到時間，學(xué)生通過“文旌課堂APP”掃描“簽到二維碼”進行簽到。。掃碼下載文旌課堂APP掃碼簽到

常見的UI交互動效除上一章介紹的圖標、按鈕和導(dǎo)航欄外，還有文字動效、界面加載交互動效、界面轉(zhuǎn)場交互動效和AfterEffects動畫。

本章將逐個介紹它們的表現(xiàn)形式及設(shè)計方法，并通過案例制作使同學(xué)們掌握它們的制作方法，進一步理解什么是交互動效設(shè)計，開闊思維，提高實踐能力。單元導(dǎo)讀★了解文字、界面加載和界面轉(zhuǎn)場交互動效的基礎(chǔ)知識知識目標★緊跟時代潮流，培養(yǎng)自身的創(chuàng)新意識和實踐能力★加強基礎(chǔ)知識的學(xué)習(xí)，不斷進行實踐練習(xí)，從而實現(xiàn)從量變到質(zhì)變的轉(zhuǎn)化

思政目標★掌握使用AfterEffects制作文字、界面加載和界面轉(zhuǎn)場交互動效的方法和技巧★掌握使用AfterEffects制作動畫的方法與技巧

技能目標學(xué)習(xí)目標6.1文字動效

文字是界面交互設(shè)計中最常見的動效對象之一。文字動效可用于強調(diào)關(guān)鍵詞和重要信息，使內(nèi)容表達更清晰、更簡潔、更具沖擊力，便于用戶更好地理解信息。

文字動效的制作方法和表現(xiàn)形式與界面中的其他元素相似，大多是通過改變文字屬性，為文字添加蒙版、遮罩和各種效果來實現(xiàn)的。下面介紹幾類常見的文字動效表現(xiàn)形式。1．基礎(chǔ)文字動效

基礎(chǔ)文字動效是指基于文字的基礎(chǔ)屬性所制作的動效，如文字的放大與縮小效果、位置的移動，以及不透明度的變化等都屬于基礎(chǔ)文字動效。文字動效可以是針對單個字詞的，也可以是針對一段完整文本的。如圖所示的動效是通過改變文本中每個字符的位置，使文字從左向右移動，制作出拉伸的文字動效。6.1文字動效2．文字遮罩與蒙版動效

文字遮罩與蒙版動效就是通過對文字或圖形元素添加遮罩與蒙版效果而制作出的文字動效，這類動效往往可以使用簡單的元素制作出豐富的、具有沖擊力的效果。

如圖所示的動效通過對矩形添加遮罩或蒙版效果，使矩形在文字上方左右移動來顯示部分文字，最后將矩形拉伸使之覆蓋文字，以顯示出文字全貌。6.1文字動效3．基于路徑的文字動效

基于路徑的文字動效可以以文字本身為路徑，使線段沿路徑運行，最后生成文字。

如圖所示的動效使不同顏色的文字描邊沿路徑運行，最終生成文字，使得其動效絢麗多彩。

基于路徑的文字動效也可以是對其他元素做路徑動畫，最后顯示出文字內(nèi)容。

如圖所示的動效，首先使粒子圍繞圓形路徑運動，并逐漸向中心匯聚；然后從中心向四周擴散，逐漸顯示出文字內(nèi)容。6.1文字動效4．文字特效動畫

文字特效動畫是指為文字添加各種效果，使文字內(nèi)容與各種效果相結(jié)合而形成的動效，如粒子效果、光暈與光效效果和閃電效果等。AfterEffects中有各種內(nèi)置效果，直接將其應(yīng)用到文字上即可快速地制作出各種酷炫的、富有視覺沖擊力的文字動畫。還可以將上述文字動效表現(xiàn)形式相結(jié)合，制作出更加復(fù)雜的動效。我們在設(shè)計文字動效時要靈活運用各種形式，另外要使表現(xiàn)形式與文字內(nèi)容相符合，切勿使形式大于內(nèi)容。粒子插件制作的流動文字動畫案例練習(xí)6-1制作文字轉(zhuǎn)換動效

本案例帶領(lǐng)同學(xué)們制作一個賽博朋克風格的文字轉(zhuǎn)換動效，其效果如圖所示。

該動效主要是使用AfterEffects中的內(nèi)置效果及3D圖層來實現(xiàn)的，其中主要用到了“卡片擦除”效果、“復(fù)合模糊”效果、“快速方框模糊”效果，以及“四色漸變”效果。6.1文字動效步驟1

在AfterEffects中新建項目，選擇“合成/新建合成...”菜單項，彈出“合成設(shè)置”對話框，在其中進行相關(guān)設(shè)置，然后單擊“確定”按鈕新建合成，如圖所示。案例練習(xí)6-1制作文字轉(zhuǎn)換動效6.1文字動效步驟2

在工具欄中選擇橫排文字工具

，在“合成”窗口中單擊，輸入“SHADOW”，選中文字，在“字符”面板中設(shè)置字體為“Captureit”，字體大小為220像素，顏色為藍色“#80DEF9”，設(shè)置錨點位于其中心位置，并使文本居中顯示。案例練習(xí)6-1制作文字轉(zhuǎn)換動效6.1文字動效步驟3先將文本圖層重命名為“文本1”，按快捷鍵“Ctrl+D”復(fù)制一個圖層副本，雙擊復(fù)制的圖層，進入文本編輯模式，輸入“SUNSHINE”，設(shè)置錨點位于其中心位置，在“字符”面板中設(shè)置顏色為粉紫色“#EF6EFB”，使文本居中顯示；然后隱藏復(fù)制圖層的內(nèi)容。

★提示：當修改文本圖層中的文字時，不會改變該圖層中錨點的位置，因此修改文本后需要再次使用快捷鍵“Ctrl+Alt+Home”設(shè)置錨點位于當前文本的中心位置。步驟4選擇“文本1”圖層，選擇“效果/過渡/卡片擦除”菜單項，添加“卡片擦除”效果。將“時間指示器”移到0秒位置，在“效果控件”面板中單擊“過渡完成”屬性左側(cè)的“秒表”按鈕添加關(guān)鍵幀，設(shè)置屬性值為0%，如圖所示。

將“時間指示器”移到2秒位置，在“效果控件”面板中設(shè)置“過渡完成”屬性值為100%，此時在“時間指示器”位置會自動為該屬性添加關(guān)鍵幀。知識鏈接：“卡片擦除”效果會將圖層內(nèi)容分解為卡片，分解的卡片經(jīng)過翻轉(zhuǎn)后再組成原圖形，如設(shè)置了背面圖層，卡片經(jīng)過翻轉(zhuǎn)后將切換為背面圖層，因此該效果常用于制作轉(zhuǎn)場動效。此外，還可以設(shè)置效果中的“行數(shù)”和“列數(shù)”屬性值，以設(shè)置圖層內(nèi)容分解的卡片數(shù)量。案例練習(xí)6-1制作文字轉(zhuǎn)換動效6.1文字動效設(shè)置“文本1”圖層轉(zhuǎn)換后的背面圖層步驟5

在“效果控件”面板中單擊“背面圖層”右側(cè)“2.文本1”文本框的下拉按鈕，在下拉列表中選擇“1.文本2”，如圖所示。此時，便完成了文字轉(zhuǎn)換動效的制作，接下來設(shè)置“卡片擦除”效果中的相應(yīng)屬性值，使文字過渡效果更加細膩、豐富。案例練習(xí)6-1制作文字轉(zhuǎn)換動效6.1文字動效步驟6

在“效果控件”面板中設(shè)置“行數(shù)”和“列數(shù)”屬性值分別為20和50，“隨機時間”屬性值為0.6，并單擊“位置抖動”左側(cè)的“>”按鈕展開屬性組。

將“時間指示器”移到0秒位置，單擊“z抖動量”左側(cè)的“秒表”按鈕添加關(guān)鍵幀，將“時間指示器”移到1秒位置，設(shè)置“z抖動量”屬性值為15，將“時間指示器”移到2的位置，設(shè)置“z抖動量”屬性值為0，使文字抖動復(fù)原，如圖所示。案例練習(xí)6-1制作文字轉(zhuǎn)換動效6.1文字動效步驟7選擇“文本1”圖層，按快捷鍵“Ctrl+D”復(fù)制一個圖層副本。選擇“文本3”圖層，為其添加“填充”效果，在“效果控件”面板中設(shè)置填充顏色為黃色“#FFD71D”，如圖所示。按快捷鍵“Ctrl+Alt+Shift+↓”將圖層置底。案例練習(xí)6-1制作文字轉(zhuǎn)換動效6.1文字動效步驟8選擇“文本3”圖層，將“時間指示器”移到0秒位置，在“效果控件”面板中為“位置抖動”屬性組中的“x抖動量”屬性和“y抖動量”屬性添加關(guān)鍵幀；將“時間指示器”移到1秒位置，設(shè)置屬性值都為2，如圖所示；將“時間指示器”移到2秒位置，設(shè)置屬性值都為0。案例練習(xí)6-1制作文字轉(zhuǎn)換動效6.1文字動效步驟9

取消選中圖層，先右鍵單擊圖層控制區(qū)域的空白處，在彈出的快捷菜單中選擇“新建/調(diào)整圖層”，新建調(diào)整圖層；然后選擇“效果/風格化/發(fā)光”菜單項，為圖層添加“發(fā)光”效果。將“時間指示器”移到0秒位置，在“效果控件”面板中為“發(fā)光閾值”屬性和“發(fā)光半徑”屬性添加關(guān)鍵幀，并設(shè)置屬性值分別為100%和0，如圖所示。案例練習(xí)6-1制作文字轉(zhuǎn)換動效6.1文字動效知識鏈接：在調(diào)整圖層中添加的效果可以應(yīng)用于調(diào)整圖層下方的所有圖層。步驟10選擇調(diào)整圖層，按快捷鍵“U”顯示已添加關(guān)鍵幀的屬性，在15幀處為它們添加關(guān)鍵幀并設(shè)置屬性值分別為70%和66（如圖所示），在1秒20幀處添加關(guān)鍵幀，屬性值不變，在2秒處添加關(guān)鍵幀，設(shè)置屬性值分別為100%和0。案例練習(xí)6-1制作文字轉(zhuǎn)換動效6.1文字動效15幀處的文字效果和關(guān)鍵幀屬性值步驟11同時選中上述創(chuàng)建的4個圖層，先右鍵單擊選中圖層，在彈出的快捷菜單中選擇“預(yù)合成...”，彈出“預(yù)合成”對話框，在其中設(shè)置相關(guān)選項；然后單擊“確定”按鈕，生成預(yù)合成，如圖所示。案例練習(xí)6-1制作文字轉(zhuǎn)換動效6.1文字動效步驟12右鍵單擊圖層控制區(qū)域的空白處，先在彈出的快捷菜單中選擇“新建/純色...”，彈出“純色設(shè)置”對話框，在其中設(shè)置名稱為“背景”；然后單擊“確定”按鈕新建純色圖層。步驟13先選擇“背景”圖層；再選擇“效果/生成/四色漸變”菜單項，為其添加“四色漸變”效果，在“效果控件”面板中分別設(shè)置4個點的顏色；然后在“合成”窗口中按下鼠標左鍵分別拖動點到合適位置，并設(shè)置“混合”屬性值為548，如圖所示。選擇“背景”圖層并按快捷鍵“Ctrl+Alt+Shift+↓”將圖層置底。案例練習(xí)6-1制作文字轉(zhuǎn)換動效6.1文字動效為“背景”圖層添加“四色漸變”效果步驟14

選擇“合成/新建合成...”菜單項，彈出“合成設(shè)置”對話框，先在其中設(shè)置合成名稱為“地面紋理”，然后單擊“確定”按鈕新建合成。右鍵單擊圖層控制區(qū)域的空白處，在彈出的快捷菜單中選擇“新建/純色...”，彈出“純色設(shè)置”對話框，設(shè)置名稱為“紋理”，然后單擊“確定”按鈕新建純色圖層。

步驟15

先選擇“紋理”圖層；再選擇“效果/雜色和顆粒/分形雜色”菜單項，為其添加“分形雜色”效果，在“效果控件”面板中單擊“分形類型”右側(cè)的下拉按鈕，在下拉列表中選擇“渦旋”；然后設(shè)置“對比度”屬性值為130，“亮度”屬性值為-30，如圖所示。案例練習(xí)6-1制作文字轉(zhuǎn)換動效6.1文字動效“分形雜色”效果知識鏈接：“分形雜色”效果的應(yīng)用非常廣泛，可以制作出火焰、煙霧、水流、量子光波和霧面效果等多種多樣的動效。步驟16

先單擊“紋理”圖層的“3D圖層”按鈕；然后按快捷鍵“R”顯示其“旋轉(zhuǎn)”屬性，設(shè)置“x軸旋轉(zhuǎn)”屬性值為-90°，如圖所示。

案例練習(xí)6-1制作文字轉(zhuǎn)換動效6.1文字動效設(shè)置“紋理”圖層屬性值知識鏈接：單擊某圖層上的“3D圖層”按鈕，可以將相應(yīng)圖層轉(zhuǎn)換為3D圖層，并為“位置”屬性、“錨點”屬性和“縮放”屬性添加z值，設(shè)置素材的深度。步驟17在“合成”窗口中，按住快捷鍵“Shift”的同時按下鼠標左鍵垂直向下拖動紋理至界面底端，如圖所示。案例練習(xí)6-1制作文字轉(zhuǎn)換動效6.1文字動效拖動“紋理”圖層到界面底端步驟18先按快捷鍵“S”顯示“縮放”屬性，單擊屬性名稱右側(cè)的“約束比例”按鈕；然后設(shè)置x軸、y軸、z軸的屬性值分別為350%、650%、450%，在“合成”窗口選中y軸，按下鼠標左鍵向上拖動到合適位置，其效果如圖如圖所示。案例練習(xí)6-1制作文字轉(zhuǎn)換動效6.1文字動效選中y軸向上拖動步驟19先在“項目”面板中雙擊“文字轉(zhuǎn)換動效”合成；然后按下鼠標左鍵拖動“地面紋理”合成至“時間軸”面板中，使其位于“文字轉(zhuǎn)換”預(yù)合成下方。

先將“時間指示器”移到0秒位置，選中“文字轉(zhuǎn)換”預(yù)合成，按快捷鍵“Ctrl+D”復(fù)制一個預(yù)合成副本，將位于下方的預(yù)合成重命名為“倒影”，單擊“倒影”預(yù)合成的“3D圖層”按鈕；然后設(shè)置“x軸旋轉(zhuǎn)”屬性值為120°，并在“合成”窗口中按下鼠標左鍵向下拖動倒影到合適位置，如圖所示。案例練習(xí)6-1制作文字轉(zhuǎn)換動效6.1文字動效倒影在“合成”窗口中的效果步驟20右鍵單擊圖層控制區(qū)域的空白處，在彈出的快捷菜單中選擇“新建/調(diào)整圖層”，新建調(diào)整圖層，在“時間軸”面板中調(diào)整圖層排序，并隱藏“地面紋理”合成中的內(nèi)容，效果如圖所示。選擇調(diào)整圖層，選擇“效果/模糊和銳化/復(fù)合模糊”菜單項，添加“復(fù)合模糊”效果。案例練習(xí)6-1制作文字轉(zhuǎn)換動效6.1文字動效各圖層間的排序步驟21在“效果控件”面板中單擊“模糊圖層”右側(cè)的“3.調(diào)整圖層2”下拉按鈕，在下拉列表中選擇“2.地面紋理”，設(shè)置“最大模糊”屬性值為30，如圖所示。案例練習(xí)6-1制作文字轉(zhuǎn)換動效6.1文字動效“復(fù)合模糊”效果步驟22選擇“倒影”預(yù)合成，選擇“效果/模糊和銳化/快速方框模糊”菜單項，添加“快速方框模糊”效果，在“效果控件”面板中設(shè)置“模糊半徑”屬性值為3，如圖所示。案例練習(xí)6-1制作文字轉(zhuǎn)換動效6.1文字動效“快速方框模糊”效果步驟23最后將文件保存。6.2界面交互動效6.2.1界面加載交互動效1．進度條式加載動效

進度條式加載動效用于顯示當前任務(wù)處理的進度，以及完成任務(wù)大概所需的時間，如視頻下載和播放進度。該加載動效一般用于較長時間的加載，通常配合百分比數(shù)目，讓用戶對加載進度和剩余時間有明確的心理預(yù)期。

在進度條式加載動效中，最常見的是直線進度條，一般有長條矩形和圓形兩種形式，其設(shè)計方法相對簡單，但設(shè)計時要注意與界面風格相匹配，如圖所示。還有一些進度條加載動效在直線進度條的基礎(chǔ)上添加了小動畫，表明進度的同時還增添了趣味性，如圖所示。常見進度條式加載動效

添加小動畫的矩形式加載動效6.2界面交互動效6.2.1界面加載交互動效2．旋轉(zhuǎn)式加載動效

旋轉(zhuǎn)式加載動效模仿時鐘順時針旋轉(zhuǎn)，不停地旋轉(zhuǎn)不僅能吸引用戶眼球，還能給用戶一種時間快速流逝，快速加載的感覺，如圖所示。這類加載動效常用于時間較短的加載中，如果長時間一直旋轉(zhuǎn)而不加載新界面的話，容易使用戶焦慮。旋轉(zhuǎn)式加載動效6.2界面交互動效6.2.1界面加載交互動效3．動畫式加載動效

動畫式加載動效就是以生動的動畫形象進行展示的加載動效，如圖所示。

在使用動畫式加載動效時，要注意添加的動畫形象與產(chǎn)品的整體風格相吻合，以提高產(chǎn)品辨識度。另外，在制作時要注意動畫的流暢度，給用戶舒適、有趣的體驗。案例練習(xí)6-2制作進度條式加載動效

進度條式加載動效可以明確地顯示當前加載進度，有效提升用戶體驗，是交互設(shè)計中較為常見的一種加載動效。本案例帶領(lǐng)同學(xué)們完成進度條加載動效的制作，使同學(xué)們對該類加載動效制作有一個簡單的了解，其效果如圖所示。該動效主要通過“線性擦除”效果，使進度條從左到右發(fā)生變化，并通過“編號”效果使表示加載進度的百分比數(shù)值隨進度條變化而遞增。進度條加載動效6.2界面交互動效步驟1

先在AfterEffects中新建項目，選擇“合成/新建合成...”菜單項，彈出“合成設(shè)置”對話框，在其中進行相關(guān)設(shè)置；然后單擊“確定”按鈕新建合成，如圖所示?！昂铣稍O(shè)置”對話框案例練習(xí)6-2制作進度條式加載動效6.2界面交互動效設(shè)置“描邊”圖層屬性值案例練習(xí)6-2制作進度條式加載動效6.2界面交互動效步驟2

右鍵單擊圖層控制區(qū)域的空白處，在彈出的快捷菜單中選擇“新建/形狀圖層”創(chuàng)建圖層，并將其重命名為“描邊”。先在工具欄中選擇矩形工具，設(shè)置填充為無，描邊顏色為白色，描邊寬度為5；然后在“合成”窗口中繪制一個“大小”屬性值為“1125，100”的矩形，設(shè)置錨點位于其中心位置，“圓度”屬性值為60，并使矩形居中顯示，如圖所示。案例練習(xí)6-2制作進度條式加載動效6.2界面交互動效步驟

3

選擇“描邊”圖層，按快捷鍵“Ctrl+D”復(fù)制一個圖層副本，將復(fù)制的圖層重命名為“填充”，設(shè)置“填充”圖層中矩形的填充顏色為藍色“#8DAEE4”，制作進度條式加載動效描邊為無。步驟

4

選擇“填充”圖層的“內(nèi)容”屬性，單擊該屬性右側(cè)的

按鈕，在彈出的菜單中選擇“位移路徑”，添加“位移路徑”屬性組，設(shè)置“內(nèi)容/位移路徑”屬性組中的“數(shù)量”屬性值為-10，如圖所示。添加“位移路徑”屬性組案例練習(xí)6-2制作進度條式加載動效6.2界面交互動效步驟

7

右鍵單擊圖層控制區(qū)域的空白處，在彈出的快捷菜單中選擇“新建/純色...”，彈出“純色設(shè)置”對話框，在其中設(shè)置名稱為“數(shù)字”，然后單擊“確定”按鈕新建純色圖層。步驟8先選擇“效果/文本/編號”菜單項，彈出“編號”對話框，在其中設(shè)置相關(guān)選項；然后單擊“確定”按鈕添加“編號”效果，如圖所示。在“效果控件”面板中設(shè)置“格式”屬性組中的“小數(shù)位數(shù)”屬性值為0，“填充和描邊”屬性組中的“位置”屬性值為“922，414”，填充顏色為白色，“大小”屬性值為66?！熬幪枴睂υ捒虿襟E9

將“時間指示器”移到0秒位置，在“效果控件”面板中為“數(shù)值/位移/隨機最大”屬性添加關(guān)鍵幀；將“時間指示器”移到3秒位置，設(shè)置“數(shù)值/位移/隨機最大”屬性值為100，如圖所示。此時進行預(yù)覽，可以看到表示加載進度的百分比數(shù)值會從0增加到100?！皵?shù)值/位移/隨機最大”屬性的關(guān)鍵幀設(shè)置案例練習(xí)6-2制作進度條式加載動效6.2界面交互動效步驟10

先在工具欄中選擇橫排文字工具；然后在“合成”窗口中單擊，輸入“%”并將其選中；再在“字符”面板中設(shè)置字體大小為80，顏色為白色，字體為“仿宋”，并設(shè)置錨點位于其中心位置；最后設(shè)置圖層的“位置”屬性值為“1020，418”，如圖所示。百分號在“合成”窗口中的位置案例練習(xí)6-2制作進度條式加載動效6.2界面交互動效步驟11

選擇“%”圖層，按快捷鍵“Ctrl+D”復(fù)制一個圖層副本，雙擊復(fù)制的圖層，輸入“Loading”，設(shè)置錨點位于其中心位置，并設(shè)置圖層的“位置”屬性值為“960，684”。5幀處的“源文本”屬性關(guān)鍵幀設(shè)置及其文本效果案例練習(xí)6-2制作進度條式加載動效6.2界面交互動效步驟12

將“時間指示器”移到0秒位置，為“Loading”圖層下“文本”屬性組中的“源文本”屬性添加關(guān)鍵幀；將“時間指示器”移到5幀位置，單擊“合成”窗口中的“Loading”文本，進入文本編輯模式，在文本末端輸入“.”，如圖所示。步驟13

依次將“時間指示器”移到10幀和15幀位置，重復(fù)步驟12輸入文本的操作，15幀處效果如圖所示。15幀處的“源文本”屬性關(guān)鍵幀設(shè)置及其文本效果案例練習(xí)6-2制作進度條式加載動效6.2界面交互動效步驟15

選中所有關(guān)鍵幀，按快捷鍵“F9”添加“緩動”效果，最后將文件保存?！霸次谋尽睂傩灾械年P(guān)鍵幀設(shè)置案例練習(xí)6-2制作進度條式加載動效6.2界面交互動效步驟14

將“時間指示器”移到20幀位置，同時選中“源文本”屬性上的4個關(guān)鍵幀，按快捷鍵“Ctrl+C”復(fù)制關(guān)鍵幀，再按快捷鍵“Ctrl+V”從當前位置依次復(fù)制粘貼的關(guān)鍵幀，重復(fù)以上步驟，每隔20幀粘貼一組關(guān)鍵幀，使最后一個關(guān)鍵幀位于3秒05幀處，如圖所示。6.2.2界面轉(zhuǎn)場交互動效

界面轉(zhuǎn)場交互動效能夠清晰地表現(xiàn)界面中元素之間的變化過程，各界面之間的邏輯關(guān)系及層次結(jié)構(gòu)，降低用戶的認知負擔，提高用戶對產(chǎn)品的整體認知。動效不是裝飾，而是一種行為，用于幫助用戶獲得更好的體驗，因此在設(shè)計界面轉(zhuǎn)場交互動效時，需要遵守一些設(shè)計規(guī)則和要求。1．過渡自然

事物不會突然消失，也不會突然出現(xiàn)，通常都會有一個漸變的轉(zhuǎn)換過程。同樣，界面轉(zhuǎn)場交互動效也是如此，如果轉(zhuǎn)換動效過于生硬，會使用戶產(chǎn)生困惑。為什么該界面或元素會突然出現(xiàn)或消失？增加用戶認知負擔。因此，在設(shè)計中需要使用漸變的轉(zhuǎn)換動效來表現(xiàn)多個界面或元素之間的轉(zhuǎn)換過程，便于用戶理解。

6.2界面交互動效6.2.2界面轉(zhuǎn)場交互動效

如圖所示是一個銀行App的界面，在該App中，所有銀行卡都排列于界面底部，當前選擇的銀行卡會放大位于界面中央，以方便用戶查看銀行卡上的信息。用戶可以在界面下方通過左右滑動來切換銀行卡，點擊界面中央的銀行卡，銀行卡會旋轉(zhuǎn)至界面上方，此時有關(guān)該銀行卡的詳細信息界面會從界面下方向上移動。整個界面中的轉(zhuǎn)場動效設(shè)計流暢自然，便于用戶快速理解與操作。6.2界面交互動效6.2.2界面轉(zhuǎn)場交互動效

2．層次分明

一個層次分明的界面轉(zhuǎn)場交互動效一方面可以清晰地展示界面與元素狀態(tài)的變化；另一方面可以有效地吸引用戶注意力，決定用戶關(guān)注的持續(xù)時間。

如圖所示，點擊界面中的擴展按鈕可以展開

5個功能操作圖標。該按鈕在以白色和紫色為主色的界面中使用了綠色，并且尺寸大于一般按鈕與圖標，與界面中的其他元素做了區(qū)分，吸引了用戶眼球，有助于引導(dǎo)用戶的下一步操作。6.2界面交互動效界面中圖標按鈕的切換動效6.2.2界面轉(zhuǎn)場交互動效3．相互關(guān)聯(lián)

大多數(shù)界面轉(zhuǎn)場交互動效都會涉及轉(zhuǎn)換前后元素和狀態(tài)之間的變化，良好的界面轉(zhuǎn)場交互動效會將轉(zhuǎn)換前后的元素關(guān)聯(lián)起來，并讓用戶清楚地感知到界面變化的過程，以及所產(chǎn)生的變化。4．快速精準

在設(shè)計界面轉(zhuǎn)場交互動效時，時間與速度是需要重點考慮的因素，既不能太慢，讓用戶以為產(chǎn)品出現(xiàn)了延遲現(xiàn)象，從而產(chǎn)生厭煩感；也不能過快，讓用戶看不清楚，難以理解。在一般情況下，應(yīng)該使動效發(fā)生在用戶觸發(fā)后的0.1秒之內(nèi)，大概在3秒左右結(jié)束，這樣既不會浪費用戶的時間，還可以使動效快速精準。5．簡單清晰

越是簡單的動效，越能得到用戶的青睞。當然，這里簡單的前提是，可以清楚地表現(xiàn)出界面及界面元素之間狀態(tài)的變化。

界面轉(zhuǎn)場交互動效始終是圍繞產(chǎn)品和用戶存在的，無論怎樣的轉(zhuǎn)場交互動效，都要先服務(wù)于功能，然后再考慮動效的風格與樣式。6.2界面交互動效

多數(shù)App都會設(shè)置啟動界面和登錄界面，啟動界面通常使用美觀的通欄圖片吸引用戶眼球，彰顯App的整體風格，而登錄界面則用來驗證用戶身份。本案例帶領(lǐng)同學(xué)們制作一個登錄轉(zhuǎn)場動效，效果如圖所示。6.2界面交互動效案例練習(xí)6-3制作登錄轉(zhuǎn)場動效

該動效的整個過程是通過啟動界面的“立即登錄”按鈕轉(zhuǎn)場到登錄界面，在登錄界面演示App的用戶登錄流程，登錄成功后再轉(zhuǎn)場到首頁界面。為便于學(xué)習(xí)，此處將案例分為3節(jié)來講。6.2界面交互動效案例練習(xí)6-3制作登錄轉(zhuǎn)場動效1．制作啟動界面到登錄界面的轉(zhuǎn)場動效6.2界面交互動效案例練習(xí)6-3制作登錄轉(zhuǎn)場動效步驟1啟動AfterEffects，選擇“文件/導(dǎo)入/文件...”菜單項，彈出“導(dǎo)入文件”對話框，在其中選擇“素材與實例/第6章/案例6-3/轉(zhuǎn)場動效素材.psd”，單擊“導(dǎo)入”按鈕，彈出設(shè)置對話框，在其中設(shè)置相關(guān)選項，單擊“確定”按鈕，導(dǎo)入PSD素材并自動生成合成，如圖所示。1．制作啟動界面到登錄界面的轉(zhuǎn)場動效6.2界面交互動效案例練習(xí)6-3制作登錄轉(zhuǎn)場動效步驟2先在“項目”面板中的“轉(zhuǎn)場動效素材”合成上單擊右鍵，在彈出的快捷菜單中選擇“合成設(shè)置...”，彈出“合成設(shè)置”對話框后，在其中進行相關(guān)設(shè)置；然后單擊“確定”按鈕應(yīng)用合成設(shè)置，如圖所示。雙擊合成，在“時間軸”面板中顯示其中的圖層。

★提示：如雙擊合成后，“時間軸”面板中圖層的持續(xù)時間不足12秒，可以同時選中所有圖層，將“時間指示器”移到11秒29幀位置，按快捷鍵“Ctrl+]”將出點修剪到11秒29幀處。案例練習(xí)6-3制作登錄轉(zhuǎn)場動效步驟3

先在工具欄中選擇橢圓工具，并在“合成”窗口中繪制一個“大小”屬性值為“40，40”的正圓，設(shè)置其描邊顏色為白色，描邊寬度為2，無填充，錨點位于其中心位置；然后設(shè)置其“變換”屬性組中的“位置”屬性值為“640，1150”，并將圖層重命名為“鼠標”。6.2界面交互動效步驟4

選擇“鼠標”圖層，按快捷鍵“P”顯示其“位置”屬性，在0秒和20幀處為該屬性添加關(guān)鍵幀，并設(shè)置20幀處的屬性值為“410，1240”，制作鼠標移到“立即登錄”按鈕上的動效。1．制作啟動界面到登錄界面的轉(zhuǎn)場動效案例練習(xí)6-3制作登錄轉(zhuǎn)場動效步驟4

在0秒、20幀、25幀、1秒和1秒05幀處為“變換”屬性組中的“縮放”屬性添加關(guān)鍵幀，設(shè)置其屬性值分別為85%、85%、70%、85%、100%；在0秒、20幀、1秒和1秒05幀處為“變換”屬性組中的“不透明度”屬性添加關(guān)鍵幀，設(shè)置其屬性值分別為0%、100%、100%、0%，制作鼠標在25幀時點擊，并放大消失不見的效果，如圖所示。6.2界面交互動效1．制作啟動界面到登錄界面的轉(zhuǎn)場動效“鼠標”圖層的關(guān)鍵幀設(shè)置案例練習(xí)6-3制作登錄轉(zhuǎn)場動效步驟5

同時選中“立即登錄框”和“立即登錄”圖層，在25幀、28幀和1秒01幀處為它們的“縮放”屬性添加關(guān)鍵幀，設(shè)置28幀處的屬性值為90%；在1秒01幀和1秒10幀處為它們的“不透明度”屬性添加關(guān)鍵幀，設(shè)置1秒10幀處的屬性值為0%，并按快捷鍵“Alt+]”將“立即登錄框”圖層和“立即登錄”圖層時間線的出點修剪到1秒10幀處，如圖所示。6.2界面交互動效1．制作啟動界面到登錄界面的轉(zhuǎn)場動效“立即登錄框”和“立即登錄”圖層的關(guān)鍵幀設(shè)置案例練習(xí)6-3制作登錄轉(zhuǎn)場動效步驟6

先單擊“背景下”圖層左側(cè)的“視頻”按鈕

顯示圖層內(nèi)容，在1秒01幀和1秒20幀處為該圖層的“位置”屬性和“縮放”屬性添加關(guān)鍵幀，將“時間指示器”移到1秒01幀位置，設(shè)置“位置”屬性值為“355，1344”；然后單擊“縮放”屬性名稱右側(cè)的“約束比例”按鈕，設(shè)置其y值為0%。6.2界面交互動效1．制作啟動界面到登錄界面的轉(zhuǎn)場動效步驟7

選擇“背景”圖層，在1秒01幀和1秒20幀處為其“位置”屬性和“縮放”屬性添加關(guān)鍵幀，設(shè)置1秒20幀處的“位置”屬性值為“450，320”，“縮放”屬性值為65%。此時1秒01幀和1秒20幀處的效果如圖所示。案例練習(xí)6-3制作登錄轉(zhuǎn)場動效步驟8

顯示“登錄轉(zhuǎn)場動效”合成中其余未顯示圖層的內(nèi)容，并按快捷鍵“Alt+[”將這些圖層時間線的入點修剪到1秒03幀處，并重新排列圖層，如圖所示。6.2界面交互動效1．制作啟動界面到登錄界面的轉(zhuǎn)場動效圖層排序案例練習(xí)6-3制作登錄轉(zhuǎn)場動效6.2界面交互動效1．制作啟動界面到登錄界面的轉(zhuǎn)場動效1秒01幀和1秒20幀處的效果案例練習(xí)6-3制作登錄轉(zhuǎn)場動效步驟9

同時選中步驟8中的所有圖層，在1秒03幀和1秒12幀處為它們的“不透明度”屬性添加關(guān)鍵幀，并設(shè)置1秒03幀處的屬性值為0%。分別將不同圖層中的關(guān)鍵幀整體向右拖動到指定位置（如圖所示），使界面元素由下向上逐漸顯現(xiàn)。6.2界面交互動效1．制作啟動界面到登錄界面的轉(zhuǎn)場動效2．制作登錄界面的交互動效步驟

1

將“時間指示器”移到1秒05幀位置，選擇“鼠標”圖層，按快捷鍵“Ctrl+Shift+D”拆分圖層。選擇“鼠標2”圖層，設(shè)置該圖層中正圓的描邊顏色為灰色“#939090”，并按快捷鍵“U”顯示圖層中所添加的關(guān)鍵幀。

同時選中圖層中的所有關(guān)鍵幀，按下鼠標左鍵向右拖動關(guān)鍵幀，使第一個關(guān)鍵幀位于1秒25幀處。將該圖層時間線的入點修剪到1秒25幀處，設(shè)置“位置”屬性上關(guān)鍵幀的屬性值分別為“490，880”和“208，720”，如圖所示。案例練習(xí)6-3制作登錄轉(zhuǎn)場動效6.2界面交互動效“鼠標2”圖層的關(guān)鍵幀設(shè)置步驟

2

選擇“用戶名”圖層，在2秒20幀和2秒25幀處為其“不透明度”屬性添加關(guān)鍵幀，設(shè)置2秒25幀處的屬性值為0%。在制作鼠標點擊時，“用戶名”圖層中的文字消失的動效。步驟3先取消選中圖層，在工具欄中選擇橫排文字工具，在“合成”窗口中單擊并輸入“××××××××”，在“字符”面板中設(shè)置其字體為“華文細黑”，字體大小為36，顏色為橙色“#E9A53E”；然后設(shè)置錨點位于其中心位置，并設(shè)置文本圖層的“位置”屬性值為“282，714”；最后將圖層重命名為“輸入用戶名”。2．制作登錄界面的交互動效案例練習(xí)6-3制作登錄轉(zhuǎn)場動效6.2界面交互動效步驟

4

在“效果和預(yù)設(shè)”面板的搜索框中輸入“打字機”并搜索，按下鼠標左鍵拖動“打字機”到添加的文本上，為文本添加“打字機”效果，如圖所示。選中“輸入用戶名”圖層，按快捷鍵“U”顯示已添加的關(guān)鍵幀，按下鼠標左鍵向左拖動最后一個關(guān)鍵幀到3秒25幀處，此時逐個輸入用戶名的動效就制作完成了。2．制作登錄界面的交互動效案例練習(xí)6-3制作登錄轉(zhuǎn)場動效6.2界面交互動效步驟

5

參照步驟1的方法，先在“鼠標2”圖層中最后一個關(guān)鍵幀的位置拆分圖層；然后拖動“鼠標3”圖層上的所有關(guān)鍵幀使第一個關(guān)鍵幀位于3秒20幀處，并將圖層時間線的入點修剪到3秒20幀處；最后設(shè)置“位置”屬性上關(guān)鍵幀的屬性值，如圖所示。2．制作登錄界面的交互動效案例練習(xí)6-3制作登錄轉(zhuǎn)場動效6.2界面交互動效步驟

6

接下來制作鼠標點擊“密碼”時的動效。選中步驟2添加的兩個關(guān)鍵幀，按“Ctrl+C”復(fù)制關(guān)鍵幀，選中“密碼”圖層，將“時間指示器”移到4秒15幀位置，按“Ctrl+V”粘貼關(guān)鍵幀，制作鼠標點擊“密碼”時，“密碼”圖層中文字消失的動效。案例練習(xí)6-3制作登錄轉(zhuǎn)場動效6.2界面交互動效步驟

7先選中“輸入用戶名”圖層，復(fù)制一個圖層副本，將復(fù)制圖層重命名為“輸入密碼”，雙擊復(fù)制圖層，輸入“××××”；然后設(shè)置錨點位于其中心位置。先選中該圖層上的所有關(guān)鍵幀，按下鼠標左鍵向右拖動關(guān)鍵幀到4秒15幀處；然后將該圖層中的最后一個關(guān)鍵幀向左拖到5秒05幀處；最后設(shè)置該圖層的“位置”屬性值為“238，812”，此時鼠標點擊“密碼”后輸入密碼的動效就制作完成了，如圖所示。步驟

8

參照步驟5的方法拆分“鼠標3”圖層，制作鼠標點擊“發(fā)送驗證碼”的動效，“鼠標4”圖層的關(guān)鍵幀設(shè)置如圖所示。2．制作登錄界面的交互動效案例練習(xí)6-3制作登錄轉(zhuǎn)場動效6.2界面交互動效步驟

9

選擇“發(fā)送驗證碼”圖層，在6秒10幀和6秒13幀處為其“縮放”屬性添加關(guān)鍵幀，設(shè)置6秒13幀處的屬性值為90%。為該圖層添加“填充”效果，選擇圖層下“效果/填充”屬性組中的“顏色”屬性，在6秒10幀和6秒13幀處為該屬性添加關(guān)鍵幀，設(shè)置6秒10幀處的顏色為橙色“#E9A53E”，6秒13幀處的顏色為淺灰色“#B9B9B9”。步驟

10

參照步驟5和步驟6的方法制作鼠標點擊“請輸入驗證碼”時，鼠標的動效和“請輸入驗證碼”圖層中文字消失的動效，相應(yīng)圖層的關(guān)鍵幀設(shè)置如圖所示。

2．制作登錄界面的交互動效案例練習(xí)6-3制作登錄轉(zhuǎn)場動效6.2界面交互動效步驟

10

選擇“輸入密碼”圖層，復(fù)制一個圖層副本，將復(fù)制圖層重命名為“輸入驗證碼”，修改圖層中的文本為“××××××”，設(shè)置錨點位于其中心位置，如果參照步驟7的方法制作輸入驗證碼的動效，其關(guān)鍵幀設(shè)置如圖所示。

2．制作登錄界面的交互動效案例練習(xí)6-3制作登錄轉(zhuǎn)場動效6.2界面交互動效步驟

1

使用上述方法拆分“鼠標5”圖層，制作鼠標點擊“登錄”按鈕的動效，“鼠標6”圖層的關(guān)鍵幀設(shè)置如圖所示。

3.制作登錄界面到首頁的轉(zhuǎn)場動效案例練習(xí)6-3制作登錄轉(zhuǎn)場動效6.2界面交互動效步驟

2

同時選中“登錄”和“登錄框”圖層，在9秒20幀和9秒25幀處為它們的“縮放”屬性添加關(guān)鍵幀，設(shè)置9秒25幀處的屬性值為95%；選中“登錄框”圖層為其添加“填充”效果，在9秒20幀和9秒25幀處為“效果/填充”屬性組中的“顏色”屬性添加關(guān)鍵幀，設(shè)置9秒20幀處的顏色為橙色“#E9A53E”，9秒25幀處的顏色為暗橙色“#E4A47D”，此時“登錄”按鈕的選中效果就制作完成了，如圖所示。3.制作登錄界面到首頁的轉(zhuǎn)場動效案例練習(xí)6-3制作登錄轉(zhuǎn)場動效6.2界面交互動效步驟

3

同時選中“時間軸”面板中的所有圖層，右鍵單擊所選圖層，在彈出的快捷菜單中選擇“預(yù)合成...”，彈出“預(yù)合成”對話框，在其中設(shè)置相關(guān)選項（如圖所示），然后單擊“確定”按鈕，生成預(yù)合成。3.制作登錄界面到首頁的轉(zhuǎn)場動效案例練習(xí)6-3制作登錄轉(zhuǎn)場動效6.2界面交互動效3.制作登錄界面到首頁的轉(zhuǎn)場動效案例練習(xí)6-3制作登錄轉(zhuǎn)場動效6.2界面交互動效步驟4選擇“文件/導(dǎo)入/文件...”菜單項，彈出“導(dǎo)入文件”對話框，在其中選擇“素材與實例/第6章/案例6-3/首頁.jpg”，單擊“導(dǎo)入”按鈕導(dǎo)入圖片素材。步驟5在“項目”面板中按下鼠標左鍵拖動“首頁.jpg”到“時間軸”面板中，使其位于“登錄界面動效”預(yù)合成上方，在9秒20幀和10秒15幀處為其“縮放”屬性添加關(guān)鍵幀，設(shè)置9秒20幀處的屬性值為0%；在9秒20幀和10秒10幀處為其“不透明度”屬性添加關(guān)鍵幀，設(shè)置9秒20幀處的屬性值為0%。選中該圖層上的所有關(guān)鍵幀，按快捷鍵“F9”添加“緩動”效果。步驟6最后將文件保存。案例練習(xí)6-4制作人物行走動畫

很多加載界面中都會設(shè)置人物動畫，通過生動有趣的人物動畫吸引用戶觀看，緩解用戶的焦慮情緒。本案例帶領(lǐng)同學(xué)們制作一個生動的人物行走動畫，其效果如圖所示。

該動畫主要通過“時間軸”面板中的“父級和鏈接”列，使人物的小腿和小臂跟隨大腿和大臂運動，最終形成人物行走動畫。6.3AfterEffects動畫步驟

1

啟動AfterEffects，單擊“打開項目”按鈕，在彈出的“打開”對話框中選擇“素材與實例/第6章/案例6-4/人物形象.aep”，單擊“打開”按鈕，打開項目文件。步驟

2在工具欄中，選擇向后平移（錨點）工具

，調(diào)整“合成”窗口中所有圖形的錨點位置，使頭和身體的錨點位于各自圖形的底端，使大臂、大腿、小臂和小腿的錨點位于各自圖形的頂端，如圖所示。案例練習(xí)6-4制作人物行走動畫6.3AfterEffects動畫

★提示：對于內(nèi)容被遮擋的圖層，在“時間軸”面板中選中圖層，即可在“合成”窗口中顯示該圖層的錨點。步驟

3

在“時間軸”面板中，右鍵單擊列標題欄，在彈出的快捷菜單中選擇“列數(shù)/父級和鏈接”，使“父級和鏈接”列顯示于“時間軸”面板中。步驟

4按下鼠標左鍵拖動“小臂右”圖層上的“父級關(guān)聯(lián)器”按鈕

到“大制作人物行走動畫臂右”圖層，使“大臂右”圖層成為“小臂右”圖層的父級圖層，如圖所示。案例練習(xí)6-4制作人物行走動畫6.3AfterEffects動畫步驟

5重復(fù)以上操作，分別鏈接小臂到大臂，小腿到大腿，再鏈接頭到身體，大臂和大腿到身體，如圖所示。案例練習(xí)6-4制作人物行走動畫6.3AfterEffects動畫步驟

6隱藏“身體”圖層內(nèi)容，同時選中除“頭”和“身體”圖層外的所有圖層，按快捷鍵“R”，顯示它們的“旋轉(zhuǎn)”屬性，并分別設(shè)置它們的屬性值為52°、-32°、-40°、26°、-28°、-32°、30°、26°，使人物處于行走狀態(tài)，如圖所示。案例練習(xí)6-4制作人物行走動畫6.3AfterEffects動畫步驟

7再次選中除“頭”和“身體”圖層外的所有圖層，在0秒、1秒10幀和2秒20幀處為“旋轉(zhuǎn)”屬性添加關(guān)鍵幀，并將“時間指示器”移到1秒10幀位置，設(shè)置大臂和大腿的屬性值分別為-25°、36°、52°、-44°，如圖所示。案例練習(xí)6-4制作人物行走動畫6.3AfterEffects動畫步驟

8將“時間指示器”移到20幀的位置，為“大腿左”圖層和“小腿左”圖層的“旋轉(zhuǎn)”屬性添加關(guān)鍵幀，分別設(shè)置屬性值為-24°和79°，如圖所示；

將“時間指示器”移到2秒的位置，為“大腿右”圖層和“小腿右”圖層的“旋轉(zhuǎn)”屬性添加關(guān)鍵幀，分別設(shè)置屬性值為-9°和70°，如圖所示。案例練習(xí)6-4制作人物行走動畫6.3AfterEffects動畫

20幀處“旋轉(zhuǎn)”屬性值設(shè)置

2秒處“旋轉(zhuǎn)”屬性值設(shè)置步驟

9顯示“身體”圖層內(nèi)容，選中該圖層，在0秒、20幀、1秒10幀、2秒和2秒20幀處為“變換”屬性組中的“位置”屬性添加關(guān)鍵幀；將“時間指示器”移到20幀位置，設(shè)置“位置”屬性的y值為588；復(fù)制20幀處的關(guān)鍵幀粘貼到2秒位置。使用快捷鍵“F9”為該屬性的所有關(guān)鍵幀添加“緩動”效果。案例練習(xí)6-4制作人物行走動畫6.3AfterEffects動畫步驟

10選擇“頭”圖層，在0秒、20幀、1秒10幀、2秒和2秒20幀處為“變換”屬性組中的“旋轉(zhuǎn)”屬性添加關(guān)鍵幀，將“時間指示器”移到20幀位置，設(shè)置其屬性值為-5°；復(fù)制20幀處的關(guān)鍵幀粘貼到2秒位置。步驟

11同時選中所有關(guān)鍵幀，按住快捷鍵“Alt”的同時按下鼠標左鍵向左拖動最后一個關(guān)鍵幀到1秒20幀處。將“時間指示器”移到1秒20幀位置，按快捷鍵“N”使工作區(qū)的結(jié)束時間移至1秒20幀處。此時，按“空格鍵”便能預(yù)覽到一個不斷行走的人物動畫，接下來為他添加陰影。案例練習(xí)6-4制作人物行走動畫6.3AfterEffects動畫

★提示：在“預(yù)覽”面板中，設(shè)置范圍為“工作區(qū)”，即可預(yù)覽到不停旋轉(zhuǎn)的加載動效。步驟

12同時選中“時間軸”面板中的所有圖層，右鍵單擊所選圖層名稱，在彈出的快捷菜單中選擇“預(yù)合成...”，彈出“預(yù)合成”對話框，在其中設(shè)置相關(guān)選項，并單擊“確定”按鈕生成預(yù)合成，如圖所示。案例練習(xí)6-4制作人物行走動畫6.3AfterEffects動畫步驟

13選擇“人物動畫”預(yù)合成，按快捷鍵“Ctrl+D”復(fù)制一個預(yù)合成副本，將其重命名為“陰影”，在“時間軸”面板中按下左鍵向下拖動“陰影”預(yù)合成到“人物動畫”預(yù)合成下方；單擊“陰影”預(yù)合成的“3D圖層”按鈕，并設(shè)置該圖層“x軸旋轉(zhuǎn)”屬性值為88°，“位置”屬性的y值為760，如圖所示。案例練習(xí)6-4制作人物行走動畫6.3AfterEffects動畫步驟

14先為“陰影”預(yù)合成添加“填充”效果，在“效果控件”面板中設(shè)置顏色為深灰色“#424040”；然后選擇“效果/模糊和銳化/快速方框模糊”菜單項，為其添加“快速方框模糊”效果，在“效果控件”面板中設(shè)置“模糊半徑”屬性值為56，如圖所示。案例練習(xí)6-4制作人物行走動畫6.3AfterEffects動畫

★提示：使用上述方法做出的陰影可以隨人物運動發(fā)生變化。步驟

15將文件保存。至此，人物行走動畫就制作完成了。

本案例帶領(lǐng)同學(xué)們制作紙飛機沿路徑運動的動畫，效果如圖所示。制作該動畫首先需要使用鋼筆工具繪制出路徑；然后將繪制的路徑復(fù)制到紙飛機圖層的“位置”屬性上，并使用“描邊”效果為紙飛機添加拖尾效果。案例練習(xí)6-5制作紙飛機沿路徑運動動畫6.3AfterEffects動畫步驟

1

在AfterEffects中新建項目，選擇“合成/新建合成...”菜單項，彈出“合成設(shè)置”對話框，在其中進行相關(guān)設(shè)置，如果單擊“確定”按鈕新建合成，如圖所示。案例練習(xí)6-5制作紙飛機沿路徑運動動畫6.3AfterEffects動畫步驟

2

先選擇“文件/導(dǎo)入/文件...”菜單項，彈出“導(dǎo)入文件”對話框，在其中選擇“素材與實例/第6章/案例6-5/紙飛機.psd”，單擊“導(dǎo)入”按鈕，彈出設(shè)置對話框，在其中設(shè)置相關(guān)選項；然后單擊“確定”按鈕導(dǎo)入素材并創(chuàng)建合成，如圖所示。案例練習(xí)6-5制作紙飛機沿路徑運動動畫6.3AfterEffects動畫步驟

3

在“項目”面板中按下鼠標左鍵將“紙飛機”合成向下拖到“時間軸”面板中，設(shè)置其“縮放”屬性值為15%，在工具欄中選擇向后平移（錨點）工具

，將該圖層的錨點拖到紙飛機機身上，如圖所示。案例練習(xí)6-5制作紙飛機沿路徑運動動畫6.3AfterEffects動畫步驟

4右鍵單擊圖層控制區(qū)域的空白處，在彈出的快捷菜單中選擇“新建/純色...”，彈出“純色設(shè)置”對話框，設(shè)置名稱為“路徑”，然后單擊“確定”按鈕新建純色圖層。案例練習(xí)6-5制作紙飛機沿路徑運動動畫6.3AfterEffects動畫步驟

5隱藏“路徑”圖層內(nèi)容并選中該圖層，在工具欄中選擇鋼筆工具，在“合成”窗口中繪制蒙版路徑，如圖所示。

★提示：選擇蒙版所在圖層，即可在單擊蒙版路徑頂點時顯示該頂點的控制手柄。步驟

6

選中“路徑”圖層中“蒙版/蒙版1”屬性組中的“蒙版路徑”屬性，按快捷鍵“Ctrl+C”復(fù)制路徑；選中“紙飛機”合成的“位置”屬性，按快捷鍵“Ctrl+V”將復(fù)制的路徑粘貼到該屬性中，此時“位置”屬性上會自動添加5個關(guān)鍵幀，分別對應(yīng)步驟5中所繪制的5個路徑頂點，如圖所示。案例練習(xí)6-5制作紙飛機沿路徑運動動畫6.3AfterEffects動畫步驟7在“時間軸”面板中選擇“紙飛機”合成，右鍵單擊所選合成，在彈出的快捷菜單中選擇“變換/自動定向...”，彈出“自動方向”對話框，在其中選擇“沿路徑定向”，然后單擊“確定”按鈕，此時機頭會隨紙飛機的運動而變換方向。設(shè)置合成的“旋轉(zhuǎn)”屬性值為28°，使機頭與路徑對齊。步驟8右鍵單擊圖層控制區(qū)域的空白處，在彈出的快捷菜單中選擇“新建/調(diào)整圖層”，新建調(diào)整圖層，將其重命名為“拖尾”并置底。步驟9選中“路徑”圖層的“蒙版路徑”屬性，按快捷鍵“Ctrl+C”復(fù)制路徑；選中“拖尾”圖層按快捷鍵“Ctrl+V”粘貼路徑。案例練習(xí)6-5制作紙飛機沿路徑運動動畫6.3AfterEffects動畫步驟

10

選中“拖尾”圖層，選擇“效果/生成/描邊”菜單項為其添加“描邊”效果，在“效果控件”面板中設(shè)置顏色為淺藍色“#DEE9F8”，“畫筆大小”屬性值為5，如圖所示。案例練習(xí)6-5制作紙飛機沿路徑運動動畫6.3AfterEffects動畫步驟

11

單擊“合成”窗口下方的“切換蒙版和形狀路徑可見性”按鈕，設(shè)置路徑為不可見模式，如圖所示。案例練習(xí)6-5制作紙飛機沿路徑運動動畫6.3AfterEffects動畫步驟

12

將“時間指示器”移至0秒位置，在“效果控件”面板中為“起始”屬性和“結(jié)束”屬性添加關(guān)鍵幀，設(shè)置“結(jié)束”屬性值為0%；將“時間指示器”移至“紙飛機”圖層中“位置”屬性的第二個關(guān)鍵幀處，在“效果控件”面板中左右拖動“結(jié)束”屬性值和“起始”屬性值，使路徑起始位置被紙飛機遮住，結(jié)束位置在紙飛機后一段距離處，如圖所示。案例練習(xí)6-5制作紙飛機沿路徑運動動畫6.3AfterEffects動畫步驟

13

將“時間指示器”移至“紙飛機”圖層中“位置”屬性的第三個關(guān)鍵幀處，參照步驟12設(shè)置“結(jié)束”屬性值和“起始”屬性值；采用同樣方法設(shè)置第四個關(guān)鍵幀和第五個關(guān)鍵幀的“結(jié)束”屬性值和“起始”屬性值。案例練習(xí)6-5制作紙飛機沿路徑運動動畫6.3AfterEffects動畫步驟

14

將“時間指示器”移至2秒05幀位置，設(shè)置“起始”屬性值為100%，使拖尾在運動結(jié)束后消失。步驟

15

將文件保存。至此，紙飛機沿路徑運動的動畫就制作完成了。

★提示：“紙飛機”合成中“位置”屬性的關(guān)鍵幀是系統(tǒng)根據(jù)蒙版路徑，以及路徑上的頂點自動生成的，在實際繪制時，根據(jù)繪制路徑的不同，關(guān)鍵幀位置和“拖尾”圖層上“結(jié)束”屬性值、“起始”屬性值可能會與文中有所不同。總結(jié)2.界面交互動效3.AfterEffects動畫1.文字動效佳作賞析

如圖所示，是國貨彩妝品牌“花西子”的網(wǎng)站界面交互動效圖。界面以白色和藍綠色作為主色，搭配精美的圖片和細長、優(yōu)美的文字，充滿民族特色的同時又不缺乏時尚感，給人簡潔明了，高端大氣上檔次的感覺。在界面中，滾動鼠標或單擊“下一頁”按鈕會從側(cè)面滑出下一頁面。簡單的側(cè)滑動效相對于復(fù)雜的、炫酷的動效，更能使用戶目光集中