《UI視覺設(shè)計(jì)案例教程》348-7（李愛平）教案 第六章 常見 UI 交互動(dòng)效設(shè)計(jì) 與實(shí)現(xiàn)(下)

PAGE4PAGE4PAGE3PAGE3《UI交互設(shè)計(jì)案例教程》

教案課時(shí)分配表章序課程內(nèi)容課時(shí)備注1第1章UI交互設(shè)計(jì)基礎(chǔ)62第2章UI交互設(shè)計(jì)規(guī)范和原則63第3章使用AxureRP實(shí)現(xiàn)線框原型設(shè)計(jì)104第4章用AfterEffects設(shè)計(jì)和實(shí)現(xiàn)UI交互動(dòng)效85第5章常見UI交互動(dòng)效設(shè)計(jì)與實(shí)現(xiàn)(上)66第6章常見UI交互動(dòng)效設(shè)計(jì)與實(shí)現(xiàn)(下)67第7章文旌課堂App的界面與動(dòng)效設(shè)計(jì)6合計(jì)48文旌課堂APP

課題第六章常見UI交互動(dòng)效設(shè)計(jì)與實(shí)現(xiàn)(下)課時(shí)6課時(shí)（270min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）了解文字、界面加載和界面轉(zhuǎn)場交互動(dòng)效的基礎(chǔ)知識(shí)。（2）掌握使用AfterEffects制作文字、界面加載和界面轉(zhuǎn)場交互動(dòng)效的方法和技巧。（3）掌握使用AfterEffects制作動(dòng)畫的方法與技巧。思政育人目標(biāo)：（1）緊跟時(shí)代潮流，培養(yǎng)自身的創(chuàng)新意識(shí)和實(shí)踐能力。（2）加強(qiáng)基礎(chǔ)知識(shí)的學(xué)習(xí)，不斷進(jìn)行實(shí)踐練習(xí)，從而實(shí)現(xiàn)從量變到質(zhì)變的轉(zhuǎn)化。教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：文字、界面加載和界面轉(zhuǎn)場交互動(dòng)效的基礎(chǔ)知識(shí)教學(xué)難點(diǎn)：文字、界面加載、界面轉(zhuǎn)場交互動(dòng)效和動(dòng)畫的方法和技巧教學(xué)方法問答法、討論法、講授法、實(shí)訓(xùn)法、演示法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第1節(jié)課文字動(dòng)效課前任務(wù)【教師】布置課前任務(wù)，提醒同學(xué)通過文旌課堂APP或其他學(xué)習(xí)軟件，完成課前任務(wù)請(qǐng)大家預(yù)習(xí)本任務(wù)的相關(guān)知識(shí)點(diǎn)?！緦W(xué)生】完成課前任務(wù)通過課前任務(wù)，使學(xué)生了解本次課的重要性，增加學(xué)生的學(xué)習(xí)興趣考勤

（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況新章預(yù)熱

（3min）【教師】介紹本章節(jié)大致內(nèi)容，導(dǎo)入課題常見的UI交互動(dòng)效除上一章介紹的圖標(biāo)、按鈕和導(dǎo)航欄外，還有文字動(dòng)效、界面加載交互動(dòng)效、界面轉(zhuǎn)場交互動(dòng)效和AfterEffects動(dòng)畫。本章將逐個(gè)介紹它們的表現(xiàn)形式及設(shè)計(jì)方法，并通過案例制作使讀者掌握它們的制作方法，進(jìn)一步理解什么是交互動(dòng)效設(shè)計(jì)，開闊思維，提高實(shí)踐能力?！緦W(xué)生】聆聽、互動(dòng)通過新章預(yù)熱，讓學(xué)生了解本章節(jié)的大致內(nèi)容和考核要求傳授新知

（10min）【教師】提出以下問題：大家使用過的app有哪些文字動(dòng)效形式？【學(xué)生】思考、舉手回答【教師】通過學(xué)生的回答引入要講的知識(shí)，講解文字動(dòng)效的表現(xiàn)形式等相關(guān)知識(shí)6.1文字動(dòng)效文字是界面交互設(shè)計(jì)中最常見的動(dòng)效對(duì)象之一。文字動(dòng)效可用于強(qiáng)調(diào)關(guān)鍵詞和重要信息，使內(nèi)容表達(dá)更清晰、更簡潔、更具沖擊力，便于用戶更好地理解信息。常見文字動(dòng)效的表現(xiàn)形式文字動(dòng)效的制作方法和表現(xiàn)形式與界面中的其他元素相似，大多是通過改變文字屬性，為文字添加蒙版、遮罩和各種效果來實(shí)現(xiàn)的。下面介紹幾類常見的文字動(dòng)效表現(xiàn)形式。1.基礎(chǔ)文字動(dòng)效【多媒體】教師展示基礎(chǔ)文字動(dòng)效圖片，并進(jìn)行講解基礎(chǔ)文字動(dòng)效是指基于文字的基礎(chǔ)屬性所制作的動(dòng)效，如文字的放大與縮小效果、位置的移動(dòng)，以及不透明度的變化等都屬于基礎(chǔ)文字動(dòng)效。文字動(dòng)效可以是針對(duì)單個(gè)字詞的，也可以是針對(duì)一段完整文本的。如圖6-1所示的動(dòng)效是通過改變文本中每個(gè)字符的位置，使文字從左向右移動(dòng)，制作出拉伸的文字動(dòng)效。2.文字遮罩與蒙版動(dòng)效【多媒體】教師展示文字遮罩與蒙版動(dòng)效圖片，并進(jìn)行講解文字遮罩與蒙版動(dòng)效就是通過對(duì)文字或圖形元素添加遮罩與蒙版效果而制作出的文字動(dòng)效，這類動(dòng)效往往可以使用簡單的元素制作出豐富的、具有沖擊力的效果。如圖6-2所示的動(dòng)效通過對(duì)矩形添加遮罩或蒙版效果，使矩形在文字上方左右移動(dòng)來顯示部分文字，最后將矩形拉伸使之覆蓋文字，以顯示出文字全貌。3.基于路徑的文字動(dòng)效【多媒體】教師展示沿文字路徑生成動(dòng)效圖片，并進(jìn)行講解基于路徑的文字動(dòng)效可以以文字本身為路徑，使線段沿路徑運(yùn)行，最后生成文字。如圖6-3所示的動(dòng)效使不同顏色的文字描邊沿路徑運(yùn)行，最終生成文字，使得其動(dòng)效絢麗多彩?！径嗝襟w】教師展示基于路徑的文字動(dòng)效圖片，并進(jìn)行講解基于路徑的文字動(dòng)效也可以是對(duì)其他元素做路徑動(dòng)畫，最后顯示出文字內(nèi)容。如圖6-4所示的動(dòng)效，首先使粒子圍繞圓形路徑運(yùn)動(dòng)，并逐漸向中心匯聚;然后從中心向四周擴(kuò)散，逐漸顯示出文字內(nèi)容。4.文字特效動(dòng)畫【多媒體】教師展示粒子插件制作的流動(dòng)文字動(dòng)畫圖片，并進(jìn)行講解文字特效動(dòng)畫是指為文字添加各種效果，使文字內(nèi)容與各種效果相結(jié)合而形成的動(dòng)效(如圖6-5所示)，如粒子效果、光暈與光效效果和閃電效果等。AfterEffects中有各種內(nèi)置效果，直接將其應(yīng)用到文字上即可快速地制作出各種酷炫的、富有視覺沖擊力的文字動(dòng)畫?！緦W(xué)生】聆聽、理解通過教師的講解和演示，使學(xué)生掌握文字動(dòng)效的表現(xiàn)形式實(shí)訓(xùn)說明（5min）【教師】介紹項(xiàng)目實(shí)訓(xùn)內(nèi)容，分析任務(wù)：本案例帶領(lǐng)讀者制作一個(gè)賽博朋克風(fēng)格的文字轉(zhuǎn)換動(dòng)效，其效果如圖6-6所示。該動(dòng)效主要是使用AfterEffects中的內(nèi)置效果及3D圖層來實(shí)現(xiàn)的，其中主要用到了“卡片擦除”效果、“復(fù)合模糊”效果、“快速方框模糊”效果，以及“四色漸變”效果?！径嗝襟w】展現(xiàn)文字轉(zhuǎn)換動(dòng)效效果圖片，教師分析其最終效果通過實(shí)訓(xùn)說明的方式，引入要講的知識(shí)，使學(xué)生了解賽博朋克風(fēng)格的文字轉(zhuǎn)換特效的制作思路項(xiàng)目實(shí)訓(xùn)（25min）【教師】分析任務(wù)，并進(jìn)行演示【課堂演示】教師演示文字轉(zhuǎn)換動(dòng)效制作方法步驟1在AfterEffects中新建項(xiàng)目，選擇“合成/新建合成...”菜單項(xiàng)，彈出“合成設(shè)置”對(duì)話框，在其中進(jìn)行相關(guān)設(shè)置，然后單擊“確定”按鈕新建合成，如圖6所示?！菊n堂演示】教師演示“合成設(shè)置”對(duì)話框制作方法步驟2在工具欄中選擇橫排文字工具，在“合成”窗口中單擊，輸入“SHADOW”，選中文字，在“字符”面板中設(shè)置字體為“Captureit”，字體大小為220像素，顏色為藍(lán)色“#80DEF9”，設(shè)置錨點(diǎn)位于其中心位置，并使文本居中顯示。步驟3先將文本圖層重命名為“文本1”，按快捷鍵“Ctrl+D”復(fù)制一個(gè)圖層副本，雙擊復(fù)制的圖層，進(jìn)入文本編輯模式，輸入“SUNSHINE”，設(shè)置錨點(diǎn)位于其中心位置，在“字符”面板中設(shè)置顏色為粉紫色“#EF6EFB”，使文本居中顯示;然后隱藏復(fù)制圖層的內(nèi)容?！菊n堂演示】教師演示如何設(shè)置“過渡完成”屬性值步驟4選擇“文本1”圖層，選擇“效果/過渡/卡片擦除”菜單項(xiàng)，添加“卡片擦除”效果。將“時(shí)間指示器”移到0秒位置，在“效果控件”面板中單擊“過渡完成”屬性左側(cè)的“秒表”按鈕添加關(guān)鍵幀，設(shè)置屬性值為0%，如圖6-8將“時(shí)間指示器”移到2秒位置，在“效果控件”面板中設(shè)置“過渡完成”屬性值為100%，此時(shí)在“時(shí)間指示器”位置會(huì)自動(dòng)為該屬性添加關(guān)鍵幀?！菊n堂演示】教師演示如何設(shè)置“文本1”圖層轉(zhuǎn)換后的背面圖層步驟5在“效果控件”面板中單擊“背面圖層”右側(cè)“2.文本1”文本框的下拉按鈕，在下拉列表中選擇“1.文本2”，如圖6-9所示。此時(shí)，便完成了文字轉(zhuǎn)換動(dòng)效的制作，接下來設(shè)置“卡片擦除”效果中的相應(yīng)屬性值，使文字過渡效果更加細(xì)膩、豐富?！菊n堂演示】教師演示如何設(shè)置“卡片擦除”效果中的屬性值并添加關(guān)鍵幀步驟6在“效果控件”面板中設(shè)置“行數(shù)”和“列數(shù)”屬性值分別為20和50，“隨機(jī)時(shí)間”屬性值為0.6，并單擊“位置抖動(dòng)”左側(cè)的“>”按鈕展開屬性組。將“時(shí)間指示器”移到0秒位置，單擊“z抖動(dòng)量”左側(cè)的“秒表”按鈕添加關(guān)鍵幀，將“時(shí)間指示器”移到1秒位置，設(shè)置“z抖動(dòng)量”屬性值為15，將“時(shí)間指示器”移到2的位置，設(shè)置“z抖動(dòng)量”屬性值為0，使文字抖動(dòng)復(fù)原，如圖6-10所示?！菊n堂演示】教師演示如何設(shè)置“填充”效果顏色步驟7選擇“文本1”圖層，按快捷鍵“Ctrl+D”復(fù)制一個(gè)圖層副本。選擇“文本3”圖層，為其添加“填充”效果，在“效果控件”面板中設(shè)置填充顏色為黃色“#FFD71D”，如圖6-11所示。按快捷鍵“Ctrl+Alt+Shift+↓”將圖層置底?！菊n堂演示】教師演示1秒處的屬性值與文字效果制作方法步驟8選擇“文本3”圖層，將“時(shí)間指示器”移到0秒位置，在“效果控件”面板中為“位置抖動(dòng)”屬性組中的“x抖動(dòng)量”屬性和“y抖動(dòng)量”屬性添加關(guān)鍵幀;將“時(shí)間指示器”移到1秒位置，設(shè)置屬性值都為2，如圖6-12所示;將“時(shí)間指示器”移到2秒位置，設(shè)置屬性值都為0?！菊n堂演示】教師演示0秒處的關(guān)鍵幀屬性值制作方法步驟9取消選中圖層，先右鍵單擊圖層控制區(qū)域的空白處，在彈出的快捷菜單中選擇“新建/調(diào)整圖層”，新建調(diào)整圖層;然后選擇“效果/風(fēng)格化/發(fā)光”菜單項(xiàng)，為圖層添加“發(fā)光”效果。將“時(shí)間指示器”移到0秒位置，在“效果控件”面板中為“發(fā)光閾值”屬性和“發(fā)光半徑”屬性添加關(guān)鍵幀，并設(shè)置屬性值分別為100%和0，如圖6-13所示?！菊n堂演示】教師演示15秒處的文字效果和關(guān)鍵幀屬性值制作方法步驟10選擇調(diào)整圖層，按快捷鍵“U”顯示已添加關(guān)鍵幀的屬性，在15幀處為它們添加關(guān)鍵幀并設(shè)置屬性值分別為70%和66(如圖6-14所示)，在1秒20幀處添加關(guān)鍵幀，屬性值不變，在2秒處添加關(guān)鍵幀，設(shè)置屬性值分別為100%和0?！菊n堂演示】教師演示“預(yù)合成”對(duì)話框制作方法步驟11同時(shí)選中上述創(chuàng)建的4個(gè)圖層，先右鍵單擊選中圖層，在彈出的快捷菜單中選擇“預(yù)合成...”，彈出“預(yù)合成”對(duì)話框，在其中設(shè)置相關(guān)選項(xiàng);然后單擊“確定”按鈕，生成預(yù)合成，如圖6-15所示。步驟12右鍵單擊圖層控制區(qū)域的空白處，先在彈出的快捷菜單中選擇“新建/純色...”，彈出“純色設(shè)置”對(duì)話框，在其中設(shè)置名稱為“背景”;然后單擊“確定”按鈕新建純色圖層?！菊n堂演示】教師演示如何為“背景”圖層添加“四色漸變”效果步驟13先選擇“背景”圖層;再選擇“效果/生成/四色漸變”菜單項(xiàng)，為其添加“四色漸變”效果，在“效果控件”面板中分別設(shè)置4個(gè)點(diǎn)的顏色;然后在“合成”窗口中按下鼠標(biāo)左鍵分別拖動(dòng)點(diǎn)到合適位置，并設(shè)置“混合”屬性值為548，如圖6-16所示。選擇“背景”圖層并按快捷鍵“Ctrl+Alt+Shift+↓”將圖層置底。步驟14選擇“合成/新建合成...”菜單項(xiàng)，彈出“合成設(shè)置”對(duì)話框，先在其中設(shè)置合成名稱為“地面紋理”，然后單擊“確定”按鈕新建合成。右鍵單擊圖層控制區(qū)域的空白處，在彈出的快捷菜單中選擇“新建/純色...”，彈出“純色設(shè)置”對(duì)話框，設(shè)置名稱為“紋理”，然后單擊“確定”按鈕新建純色圖層?！菊n堂演示】教師演示“分形雜色”效果制作方法步驟15先選擇“紋理”圖層;再選擇“效果/雜色和顆粒/分形雜色”菜單項(xiàng)，為其添加“分形雜色”效果，在“效果控件”面板中單擊“分形類型”右側(cè)的下拉按鈕，在下拉列表中選擇“渦旋”;然后設(shè)置“對(duì)比度”屬性值為130，“亮度”屬性值為-30，如圖6-17所示?！菊n堂演示】教師演示如何設(shè)置“紋理”圖層屬性值步驟16先單擊“紋理”圖層的“3D圖層”按鈕;然后按快捷鍵“R”顯示其“旋轉(zhuǎn)”屬性，設(shè)置“x軸旋轉(zhuǎn)”屬性值為-90°，如圖6-18所示?！菊n堂演示】教師演示如何拖動(dòng)“紋理”圖層到界面底端步驟17在“合成”窗口中，按住快捷鍵“Shift”的同時(shí)按下鼠標(biāo)左鍵垂直向下拖動(dòng)紋理至界面底端，如圖6-19所示?！菊n堂演示】教師演示如何選中y軸向上拖動(dòng)步驟18先按快捷鍵“S”顯示“縮放”屬性，單擊屬性名稱右側(cè)的“約束比例”按鈕;然后設(shè)置x軸、y軸、z軸的屬性值分別為350%、650%、450%，在“合成”窗口選中y軸，按下鼠標(biāo)左鍵向上拖動(dòng)到合適位置，其效果如圖6-20所示?！菊n堂演示】教師演示倒影在“合成”窗口中的效果制作方法步驟19先在“項(xiàng)目”面板中雙擊“文字轉(zhuǎn)換動(dòng)效”合成;然后按下鼠標(biāo)左鍵拖動(dòng)“地面紋理”合成至“時(shí)間軸”面板中，使其位于“文字轉(zhuǎn)換”預(yù)合成下方。先將“時(shí)間指示器”移到0秒位置，選中“文字轉(zhuǎn)換”預(yù)合成，按快捷鍵“Ctrl+D”復(fù)制一個(gè)預(yù)合成副本，將位于下方的預(yù)合成重命名為“倒影”，單擊“倒影”預(yù)合成的“3D圖層”按鈕;然后設(shè)置“x軸旋轉(zhuǎn)”屬性值為120°，并在“合成”窗口中按下鼠標(biāo)左鍵向下拖動(dòng)倒影到合適位置，如圖6-21所示?！菊n堂演示】教師演示各圖層間的排序方法步驟20右鍵單擊圖層控制區(qū)域的空白處，在彈出的快捷菜單中選擇“新建/調(diào)整圖層”，新建調(diào)整圖層，在“時(shí)間軸”面板中調(diào)整圖層排序，并隱藏“地面紋理”合成中的內(nèi)容，效果如圖6-22所示。選擇調(diào)整圖層，選擇“效果/模糊和銳化/復(fù)合模糊”菜單項(xiàng)，添加“復(fù)合模糊”效果。【課堂演示】教師演示“復(fù)合模糊”效果制作方法步驟21在“效果控件”面板中單擊“模糊圖層”右側(cè)的“3.調(diào)整圖層2”下拉按鈕，在下拉列表中選擇“2.地面紋理”，設(shè)置“最大模糊”屬性值為30，如圖6-23所示?！菊n堂演示】教師演示“快速方框模糊”效果制作方法步驟22選擇“倒影”預(yù)合成，選擇“效果/模糊和銳化/快速方框模糊”菜單項(xiàng)，添加“快速方框模糊”效果，在“效果控件”面板中設(shè)置“模糊半徑”屬性值為3，如圖6-24所示。步驟23最后將文件保存。【教師】安排學(xué)生完成任務(wù)實(shí)施，沒有掌握操作步驟的學(xué)生可以掃描二維碼（詳見教材）觀看操作視頻再次學(xué)習(xí)【教師】巡堂輔導(dǎo)，及時(shí)解決學(xué)生遇到的問題；安排每組做得最快、最好的學(xué)生輔導(dǎo)其他學(xué)生進(jìn)行操作，并解答其遇到的問題通過實(shí)操練習(xí)使學(xué)生掌握文字轉(zhuǎn)換動(dòng)效制作方法，并以學(xué)生為主體，針對(duì)學(xué)生接受能力的差異性，讓優(yōu)秀學(xué)生帶動(dòng)其他學(xué)生掌握知識(shí)第2節(jié)課界面交互動(dòng)效傳授新知

（10min）【教師】提出以下問題：大家在瀏覽網(wǎng)頁、玩游戲、使用手機(jī)應(yīng)用時(shí)，什么類型的頁面等待加載不會(huì)覺得無聊與焦慮？【學(xué)生】思考、舉手回答【教師】通過學(xué)生的回答引入要講的知識(shí)，講解界面交互動(dòng)效的相關(guān)知識(shí)6.2界面交互動(dòng)效6.2.1界面加載交互動(dòng)效在瀏覽網(wǎng)頁、玩游戲、使用手機(jī)應(yīng)用時(shí)，由于網(wǎng)速或設(shè)備硬件問題，難免會(huì)遇上等待加載的情況。沒人喜歡等待，耐心差的用戶可能會(huì)因?yàn)榈貌坏椒答伓苯雨P(guān)閉界面。添加一個(gè)加載動(dòng)效就可以在很大程度上緩解用戶等待時(shí)的無聊與焦慮情緒，給用戶明確提示，讓用戶知曉目前的狀態(tài)，并改變用戶對(duì)于時(shí)間的感知，通過轉(zhuǎn)移注意力的方式降低用戶等待時(shí)的消極情緒。加載動(dòng)效作為強(qiáng)化用戶印象的組件，不僅可用于界面轉(zhuǎn)場或加載數(shù)據(jù)的過程中，也可用于界面崩潰或出錯(cuò)時(shí)，將錯(cuò)誤和等待轉(zhuǎn)化為令用戶愉悅的細(xì)節(jié)?？傊?，加載動(dòng)效是打造用戶優(yōu)秀體驗(yàn)的必要組件，優(yōu)秀的加載動(dòng)效除了要傳達(dá)正確的信息外，還要充滿趣味性，以吸引用戶留在當(dāng)前頁面。下面簡單介紹一下常見加載動(dòng)效的表現(xiàn)形式，希望讀者可以在其基礎(chǔ)上進(jìn)行創(chuàng)新。1.進(jìn)度條式加載動(dòng)效【多媒體】教師展示常見進(jìn)度條式加載動(dòng)效圖片和添加小動(dòng)畫的矩形式加載動(dòng)效圖片，并進(jìn)行講解進(jìn)度條式加載動(dòng)效用于顯示當(dāng)前任務(wù)處理的進(jìn)度，以及完成任務(wù)大概所需的時(shí)間，如視頻下載和播放進(jìn)度。該加載動(dòng)效一般用于較長時(shí)間的加載，通常配合百分比數(shù)目，讓用戶對(duì)加載進(jìn)度和剩余時(shí)間有明確的心理預(yù)期。在進(jìn)度條式加載動(dòng)效中，最常見的是直線進(jìn)度條，一般有長條矩形和圓形兩種形式，其設(shè)計(jì)方法相對(duì)簡單，但設(shè)計(jì)時(shí)要注意與界面風(fēng)格相匹配，如圖6-25所示。還有一些進(jìn)度條加載動(dòng)效在直線進(jìn)度條的基礎(chǔ)上添加了小動(dòng)畫，表明進(jìn)度的同時(shí)還增添了趣味性，如圖6-26所示。2.旋轉(zhuǎn)式加載動(dòng)效【多媒體】教師展示旋轉(zhuǎn)式加載動(dòng)效圖片，并進(jìn)行講解旋轉(zhuǎn)式加載動(dòng)效模仿時(shí)鐘順時(shí)針旋轉(zhuǎn)，不停地旋轉(zhuǎn)不僅能吸引用戶眼球，還能給用戶一種時(shí)間快速流逝，快速加載的感覺，如圖6-27所示。這類加載動(dòng)效常用于時(shí)間較短的加載中，如果長時(shí)間一直旋轉(zhuǎn)而不加載新界面的話，容易使用戶焦慮。3.動(dòng)畫式加載動(dòng)效【多媒體】教師展示動(dòng)畫式加載動(dòng)效圖片，并進(jìn)行講解動(dòng)畫式加載動(dòng)效就是以生動(dòng)的動(dòng)畫形象進(jìn)行展示的加載動(dòng)效，如圖6-28所示。在使用動(dòng)畫式加載動(dòng)效時(shí)，要注意添加的動(dòng)畫形象與產(chǎn)品的整體風(fēng)格相吻合，以提高產(chǎn)品辨識(shí)度。另外，在制作時(shí)要注意動(dòng)畫的流暢度，給用戶舒適、有趣的體驗(yàn)。通過教師的講解和演示，使學(xué)生掌握界面交互動(dòng)效的分類實(shí)訓(xùn)說明（5min）【教師】介紹項(xiàng)目實(shí)訓(xùn)內(nèi)容，分析任務(wù)：【多媒體】教師展示進(jìn)度條加載動(dòng)效圖片，分析其最終效果進(jìn)度條式加載動(dòng)效可以明確地顯示當(dāng)前加載進(jìn)度，有效提升用戶體驗(yàn)，是交互設(shè)計(jì)中較為常見的一種加載動(dòng)效。本案例帶領(lǐng)讀者完成進(jìn)度條加載動(dòng)效的制作，使讀者對(duì)該類加載動(dòng)效制作有一個(gè)簡單的了解，其效果如圖6-29所示。該動(dòng)效主要通過“線性擦除”效果，使進(jìn)度條從左到右發(fā)生變化，并通過“編號(hào)”效果使表示加載進(jìn)度的百分比數(shù)值隨進(jìn)度條變化而遞增。通過實(shí)訓(xùn)說明的方式，引入要講的知識(shí)，使學(xué)生了解進(jìn)度條加載動(dòng)效的制作思路項(xiàng)目實(shí)訓(xùn)（30min）【教師】分析任務(wù)，并進(jìn)行演示【課堂演示】教師演示“合成設(shè)置”對(duì)話框制作方法步驟1先在AfterEffects中新建項(xiàng)目，選擇“合成/新建合成...”菜單項(xiàng)，彈出“合成設(shè)置”對(duì)話框，在其中進(jìn)行相關(guān)設(shè)置;然后單擊“確定”按鈕新建合成，如圖6-30所示?！菊n堂演示】教師演示如何設(shè)置“描邊”圖層屬性值步驟2右鍵單擊圖層控制區(qū)域的空白處，在彈出的快捷菜單中選擇“新建/形狀圖層”創(chuàng)建圖層，并將其重命名為“描邊”。先在工具欄中選擇矩形工具，設(shè)置填充為無，描邊顏色為白色，描邊寬度為5;然后在“合成”窗口中繪制一個(gè)“大小”屬性值為“1125，100”的矩形，設(shè)置錨點(diǎn)位于其中心位置，“圓度”屬性值為60，并使矩形居中顯示，如圖6-31所示。步驟3選擇“描邊”圖層，按快捷鍵“Ctrl+D”復(fù)制一個(gè)圖層副本，將復(fù)制的圖層重命名為“填充”，設(shè)置“填充”圖層中矩形的填充顏色為藍(lán)色“#8DAEE4”，描邊為無?！菊n堂演示】教師演示如何添加“位移路徑”屬性組步驟4選擇“填充”圖層的“內(nèi)容”屬性，單擊該屬性右側(cè)的按鈕，在彈出的菜單中選擇“位移路徑”，添加“位移路徑”屬性組，設(shè)置“內(nèi)容/位移路徑”屬性組中的“數(shù)量”屬性值為-10，如圖6-32所示。步驟5選擇“填充”圖層，選擇“效果/過渡/線性擦除”菜單項(xiàng)，為其添加“線性擦除”效果，在“效果控件”面板中設(shè)置“擦除角度”屬性值為-90°?！菊n堂演示】教師演示0秒處的關(guān)鍵幀屬性值制作方法步驟6將“時(shí)間指示器”移到0秒位置，在“效果控件”面板中為“過渡完成”屬性添加關(guān)鍵幀并設(shè)置屬性值為80%，如圖6-33所示;將“時(shí)間指示器”移到3秒位置，設(shè)置“過渡完成”屬性值為21%，此時(shí)便完成了進(jìn)度條動(dòng)效的制作。步驟7右鍵單擊圖層控制區(qū)域的空白處，在彈出的快捷菜單中選擇“新建/純色...”，彈出“純色設(shè)置”對(duì)話框，在其中設(shè)置名稱為“數(shù)字”，然后單擊“確定”按鈕新建純色圖層。【課堂演示】教師演示“編號(hào)”對(duì)話框制作方法步驟8先選擇“效果/文本/編號(hào)”菜單項(xiàng)，彈出“編號(hào)”對(duì)話框，在其中設(shè)置相關(guān)選項(xiàng);然后單擊“確定”按鈕添加“編號(hào)”效果，如圖6-34所示。在“效果控件”面板中設(shè)置“格式”屬性組中的“小數(shù)位數(shù)”屬性值為0，“填充和描邊”屬性組中的“位置”屬性值為“922，414”，填充顏色為白色，“大小”屬性值為66。【課堂演示】教師演示“數(shù)值/位移/隨機(jī)最大”屬性的關(guān)鍵幀如何設(shè)置步驟9將“時(shí)間指示器”移到0秒位置，在“效果控件”面板中為“數(shù)值/位移/隨機(jī)最大”屬性添加關(guān)鍵幀;將“時(shí)間指示器”移到3秒位置，設(shè)置“數(shù)值/位移/隨機(jī)最大”屬性值為100，如圖6-35所示。此時(shí)進(jìn)行預(yù)覽，可以看到表示加載進(jìn)度的百分比數(shù)值會(huì)從0增加到100?！菊n堂演示】教師演示百分號(hào)在“合成”窗口中的位置操作方法步驟10先在工具欄中選擇橫排文字工具;然后在“合成”窗口中單擊，輸入“%”并將其選中;再在“字符”面板中設(shè)置字體大小為80，顏色為白色，字體為“仿宋”，并設(shè)置錨點(diǎn)位于其中心位置;最后設(shè)置圖層的“位置”屬性值為“1020，418”，如圖6-36所示。步驟11選擇“%”圖層，按快捷鍵“Ctrl+D”復(fù)制一個(gè)圖層副本，雙擊復(fù)制的圖層，輸入“Loading”，設(shè)置錨點(diǎn)位于其中心位置，并設(shè)置圖層的“位置”屬性值為“960，684”?！菊n堂演示】教師演示5幀處的“源文本”屬性關(guān)鍵幀如何設(shè)置及其文本效果步驟12將“時(shí)間指示器”移到0秒位置，為“Loading”圖層下“文本”屬性組中的“源文本”屬性添加關(guān)鍵幀;將“時(shí)間指示器”移到5幀位置，單擊“合成”窗口中的“Loading”文本，進(jìn)入文本編輯模式，在文本末端輸入“.”，如圖6-37所示。【課堂演示】教師演示15幀處的“源文本”屬性關(guān)鍵幀如何設(shè)置及其文本效果步驟13依次將“時(shí)間指示器”移到10幀和15幀位置，重復(fù)步驟12輸入文本的操作，15幀處效果如圖6-38所示。【課堂演示】教師演示“源文本”屬性中的關(guān)鍵幀如何設(shè)置步驟14將“時(shí)間指示器”移到20幀位置，同時(shí)選中“源文本”屬性上的4個(gè)關(guān)鍵幀，按快捷鍵“Ctrl+C”復(fù)制關(guān)鍵幀，再按快捷鍵“Ctrl+V”從當(dāng)前位置依次復(fù)制粘貼的關(guān)鍵幀，重復(fù)以上步驟，每隔20幀粘貼一組關(guān)鍵幀，使最后一個(gè)關(guān)鍵幀位于3秒05幀處，如圖6-39所示。步驟15選中所有關(guān)鍵幀，按快捷鍵“F9”添加“緩動(dòng)”效果，最后將文件保存。【教師】安排學(xué)生完成任務(wù)實(shí)施，沒有掌握操作步驟的學(xué)生可以掃描二維碼（詳見教材）觀看操作視頻再次學(xué)習(xí)【教師】巡堂輔導(dǎo)，及時(shí)解決學(xué)生遇到的問題；安排每組做得最快、最好的學(xué)生輔導(dǎo)其他學(xué)生進(jìn)行操作，并解答其遇到的問題通過實(shí)操練習(xí)使學(xué)生掌握進(jìn)度條加載動(dòng)效的制作方法，并以學(xué)生為主體，針對(duì)學(xué)生接受能力的差異性，讓優(yōu)秀學(xué)生帶動(dòng)其他學(xué)生掌握知識(shí)第3節(jié)課界面轉(zhuǎn)場交互動(dòng)效傳授新知（10min）【教師】通過ppt講解界面轉(zhuǎn)場交互動(dòng)效的相關(guān)知識(shí)6.2.2界面轉(zhuǎn)場交互動(dòng)效界面轉(zhuǎn)場交互動(dòng)效能夠清晰地表現(xiàn)界面中元素之間的變化過程，各界面之間的邏輯關(guān)系及層次結(jié)構(gòu)，降低用戶的認(rèn)知負(fù)擔(dān)，提高用戶對(duì)產(chǎn)品的整體認(rèn)知。動(dòng)效不是裝飾，而是一種行為，用于幫助用戶獲得更好的體驗(yàn)，因此在設(shè)計(jì)界面轉(zhuǎn)場交互動(dòng)效時(shí)，需要遵守一些設(shè)計(jì)規(guī)則和要求。1.過渡自然轉(zhuǎn)換動(dòng)效過于生硬，會(huì)使用戶產(chǎn)生困惑。為什么該界面或元素會(huì)突然出現(xiàn)或消失?增加用戶認(rèn)知負(fù)擔(dān)。因此，在設(shè)計(jì)中需要使用漸變的轉(zhuǎn)換動(dòng)效來表現(xiàn)多個(gè)界面或元素之間的轉(zhuǎn)換過程，便于用戶理解?！径嗝襟w】教師展示銀行app的界面轉(zhuǎn)場交互動(dòng)效圖片（詳見教材）談一談圖中銀行app的界面轉(zhuǎn)場交互動(dòng)效的排列規(guī)律？【教師】對(duì)學(xué)生的發(fā)言進(jìn)行總結(jié)在該App中，所有銀行卡都排列于界面底部，當(dāng)前選擇的銀行卡會(huì)放大位于界面中央，以方便用戶查看銀行卡上的信息。用戶可以在界面下方通過左右滑動(dòng)來切換銀行卡，點(diǎn)擊界面中央的銀行卡，銀行卡會(huì)旋轉(zhuǎn)至界面上方，此時(shí)有關(guān)該銀行卡的詳細(xì)信息界面會(huì)從界面下方向上移動(dòng)。整個(gè)界面中的轉(zhuǎn)場動(dòng)效設(shè)計(jì)流暢自然，便于用戶快速理解與操作。2.層次分明一個(gè)層次分明的界面轉(zhuǎn)場交互動(dòng)效一方面可以清晰地展示界面與元素狀態(tài)的變化;另一方面可以有效地吸引用戶注意力，決定用戶關(guān)注的持續(xù)時(shí)間?！径嗝襟w】教師展示界面中圖標(biāo)按鈕的切換動(dòng)效圖片，對(duì)比圖中三種表現(xiàn)形式，與學(xué)生互動(dòng)討論，并進(jìn)行講解圖中圖標(biāo)按鈕的切換方式那種最合理？【教師】對(duì)學(xué)生的發(fā)言進(jìn)行總結(jié)圖中點(diǎn)擊界面的擴(kuò)展按鈕可以展開5個(gè)功能操作圖標(biāo)。該按鈕在以白色和紫色為主色的界面中使用了綠色，并且尺寸大于一般按鈕與圖標(biāo)，與界面中的其他元素做了區(qū)分，吸引了用戶眼球，有助于引導(dǎo)用戶的下一步操作。3.相互關(guān)聯(lián)大多數(shù)界面轉(zhuǎn)場交互動(dòng)效都會(huì)涉及轉(zhuǎn)換前后元素和狀態(tài)之間的變化，良好的界面轉(zhuǎn)場交互動(dòng)效會(huì)將轉(zhuǎn)換前后的元素關(guān)聯(lián)起來，并讓用戶清楚地感知到界面變化的過程，以及所產(chǎn)生的變化。4.快速精準(zhǔn)在設(shè)計(jì)界面轉(zhuǎn)場交互動(dòng)效時(shí)，時(shí)間與速度是需要重點(diǎn)考慮的因素，既不能太慢，讓用戶以為產(chǎn)品出現(xiàn)了延遲現(xiàn)象，從而產(chǎn)生厭煩感;也不能過快，讓用戶看不清楚，難以理解。在一般情況下，應(yīng)該使動(dòng)效發(fā)生在用戶觸發(fā)后的0.1秒之內(nèi)，大概在3秒左右結(jié)束，這樣既不會(huì)浪費(fèi)用戶的時(shí)間，還可以使動(dòng)效快速精準(zhǔn)。5.簡單清晰當(dāng)界面中存在過多的交互元素與動(dòng)效時(shí)，會(huì)分散用戶的注意力，給人很亂的感覺，因此在界面轉(zhuǎn)場交互動(dòng)效中少即是多的道理同樣成立。越是簡單的動(dòng)效，越能得到用戶的青睞。當(dāng)然，這里簡單的前提是，可以清楚地表現(xiàn)出界面及界面元素之間狀態(tài)的變化。界面轉(zhuǎn)場交互動(dòng)效始終是圍繞產(chǎn)品和用戶存在的，無論怎樣的轉(zhuǎn)場交互動(dòng)效，都要先服務(wù)于功能，然后再考慮動(dòng)效的風(fēng)格與樣式。通過教師的講解和演示，使學(xué)生掌握界面轉(zhuǎn)場交互動(dòng)效的設(shè)計(jì)規(guī)則和要求實(shí)訓(xùn)說明（5min）【教師】介紹項(xiàng)目實(shí)訓(xùn)內(nèi)容，分析任務(wù)：多數(shù)App都會(huì)設(shè)置啟動(dòng)界面和登錄界面，啟動(dòng)界面通常使用美觀的通欄圖片吸引用戶眼球，彰顯App的整體風(fēng)格，而登錄界面則用來驗(yàn)證用戶身份。本案例帶領(lǐng)讀者制作一個(gè)登錄轉(zhuǎn)場動(dòng)效，效果如圖6-42所示。該動(dòng)效的整個(gè)過程是通過啟動(dòng)界面的“立即登錄”按鈕轉(zhuǎn)場到登錄界面，在登錄界面演示App的用戶登錄流程，登錄成功后再轉(zhuǎn)場到首頁界面。為便于讀者學(xué)習(xí)，此處將案例分為3節(jié)來講?！径嗝襟w】展現(xiàn)登陸轉(zhuǎn)場動(dòng)效圖片，教師分析其最終效果通過實(shí)訓(xùn)說明的方式，引入要講的知識(shí)，使學(xué)生了解登陸轉(zhuǎn)場動(dòng)效的制作思路項(xiàng)目實(shí)訓(xùn)（30min）【教師】分析任務(wù)，并進(jìn)行演示：1.制作啟動(dòng)界面到登錄界面的轉(zhuǎn)場動(dòng)效【課堂演示】教師演示如何設(shè)置對(duì)話框步驟1啟動(dòng)AfterEffects，選擇“文件/導(dǎo)入/文件...”菜單項(xiàng)，彈出“導(dǎo)入文件”對(duì)話框，在其中選擇“素材與實(shí)例/第6章/案例6-3/轉(zhuǎn)場動(dòng)效素材.psd”，單擊“導(dǎo)入”按鈕，彈出設(shè)置對(duì)話框，在其中設(shè)置相關(guān)選項(xiàng)，單擊“確定”按鈕，導(dǎo)入PSD素材并自動(dòng)生成合成，如圖6-43所示。【課堂演示】教師演示“合成設(shè)置”對(duì)話框制作方法步驟2先在“項(xiàng)目”面板中的“轉(zhuǎn)場動(dòng)效素材”合成上單擊右鍵，在彈出的快捷菜單中選擇“合成設(shè)置...”，彈出“合成設(shè)置”對(duì)話框后，在其中進(jìn)行相關(guān)設(shè)置;然后單擊“確定”按鈕應(yīng)用合成設(shè)置，如圖6-44所示。雙擊合成，在“時(shí)間軸”面板中顯示其中的圖層。步驟3先在工具欄中選擇橢圓工具，并在“合成”窗口中繪制一個(gè)“大小”屬性值為“40，40”的正圓，設(shè)置其描邊顏色為白色，描邊寬度為2，無填充，錨點(diǎn)位于其中心位置;然后設(shè)置其“變換”屬性組中的“位置”屬性值為“640，1150”，并將圖層重命名為“鼠標(biāo)”。【課堂演示】教師演示“鼠標(biāo)”圖層的關(guān)鍵幀如何設(shè)置步驟4選擇“鼠標(biāo)”圖層，按快捷鍵“P”顯示其“位置”屬性，在0秒和20幀處為該屬性添加關(guān)鍵幀，并設(shè)置20幀處的屬性值為“410，1240”，制作鼠標(biāo)移到“立即登錄”按鈕上的動(dòng)效。在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%，制作鼠標(biāo)在25幀時(shí)點(diǎn)擊，并放大消失不見的效果，如圖6-45所示。【課堂演示】教師演示“立即登錄框”和“立即登錄”圖層的關(guān)鍵幀如何設(shè)置步驟5同時(shí)選中“立即登錄框”和“立即登錄”圖層，在25幀、28幀和1秒01幀處為它們的“縮放”屬性添加關(guān)鍵幀，設(shè)置28幀處的屬性值為90%;在1秒01幀和1秒10幀處為它們的“不透明度”屬性添加關(guān)鍵幀，設(shè)置1秒10幀處的屬性值為0%，并按快捷鍵“Alt+]”將“立即登錄框”圖層和“立即登錄”圖層時(shí)間線的出點(diǎn)修剪到1秒10幀處，如圖6-46所示。步驟6先單擊“背景下”圖層左側(cè)的“視頻”按鈕顯示圖層內(nèi)容，在1秒01幀和1秒20幀處為該圖層的“位置”屬性和“縮放”屬性添加關(guān)鍵幀，將“時(shí)間指示器”移到1秒01幀位置，設(shè)置“位置”屬性值為“355，1344”;然后單擊“縮放”屬性名稱右側(cè)的“約束比例”按鈕，設(shè)置其y值為0%?！菊n堂演示】教師展示1秒01幀和1秒20幀處的操作及其效果步驟7選擇“背景”圖層，在1秒01幀和1秒20幀處為其“位置”屬性和“縮放”屬性添加關(guān)鍵幀，設(shè)置1秒20幀處的“位置”屬性值為“450，320”，“縮放”屬性值為65%。此時(shí)1秒01幀和1秒20幀處的效果如圖6-47所示。【課堂演示】教師演示如何進(jìn)行圖層排序步驟8顯示“登錄轉(zhuǎn)場動(dòng)效”合成中其余未顯示圖層的內(nèi)容，并按快捷鍵“Alt+[”將這些圖層時(shí)間線的入點(diǎn)修剪到1秒03幀處，并重新排列圖層，效果如圖6-48所示?！菊n堂演示】教師演示“不透明度”屬性的關(guān)鍵幀如何設(shè)置步驟9同時(shí)選中步驟8中的所有圖層，在1秒03幀和1秒12幀處為它們的“不透明度”屬性添加關(guān)鍵幀，并設(shè)置1秒03幀處的屬性值為0%。分別將不同圖層中的關(guān)鍵幀整體向右拖動(dòng)到指定位置(如圖6-49所示)，使界面元素由下向上逐漸顯現(xiàn)。2.制作登錄界面的交互動(dòng)效【課堂演示】教師演示“鼠標(biāo)2”圖層的關(guān)鍵幀如何設(shè)置步驟1將“時(shí)間指示器”移到1秒05幀位置，選擇“鼠標(biāo)”圖層，按快捷鍵“Ctrl+Shift+D”拆分圖層。選擇“鼠標(biāo)2”圖層，設(shè)置該圖層中正圓的描邊顏色為灰色“#939090”，并按快捷鍵“U”顯示圖層中所添加的關(guān)鍵幀。同時(shí)選中圖層中的所有關(guān)鍵幀，按下鼠標(biāo)左鍵向右拖動(dòng)關(guān)鍵幀，使第一個(gè)關(guān)鍵幀位于1秒25幀處。將該圖層時(shí)間線的入點(diǎn)修剪到1秒25幀處，設(shè)置“位置”屬性上關(guān)鍵幀的屬性值分別為“490，880”和“208，720”，如圖6-50所示。步驟2選擇“用戶名”圖層，在2秒20幀和2秒25幀處為其“不透明度”屬性添加關(guān)鍵幀，設(shè)置2秒25幀處的屬性值為0%。在制作鼠標(biāo)點(diǎn)擊時(shí)，“用戶名”圖層中的文字消失的動(dòng)效。步驟3先取消選中圖層，在工具欄中選擇橫排文字工具，在“合成”窗口中單擊并輸入“××××××××”，在“字符”面板中設(shè)置其字體為“華文細(xì)黑”，字體大小為36，顏色為橙色“#E9A53E”;然后設(shè)置錨點(diǎn)位于其中心位置，并設(shè)置文本圖層的“位置”屬性值為“282，714”;最后將圖層重命名為“輸入用戶名”?！菊n堂演示】教師演示為文本添加“打字機(jī)”制作方法及其效果步驟4在“效果和預(yù)設(shè)”面板的搜索框中輸入“打字機(jī)”并搜索，按下鼠標(biāo)左鍵拖動(dòng)“打字機(jī)”到添加的文本上，為文本添加“打字機(jī)”效果，如圖6-51所示。選中“輸入用戶名”圖層，按快捷鍵“U”顯示已添加的關(guān)鍵幀，按下鼠標(biāo)左鍵向左拖動(dòng)最后一個(gè)關(guān)鍵幀到3秒25幀處，此時(shí)逐個(gè)輸入用戶名的動(dòng)效就制作完成了。【課堂演示】教師演示“鼠標(biāo)3”圖層的關(guān)鍵幀如何設(shè)置步驟5參照步驟1的方法，先在“鼠標(biāo)2”圖層中最后一個(gè)關(guān)鍵幀的位置拆分圖層;然后拖動(dòng)“鼠標(biāo)3”圖層上的所有關(guān)鍵幀使第一個(gè)關(guān)鍵幀位于3秒20幀處，并將圖層時(shí)間線的入點(diǎn)修剪到3秒20幀處;最后設(shè)置“位置”屬性上關(guān)鍵幀的屬性值，如圖6-52所示。步驟6接下來制作鼠標(biāo)點(diǎn)擊“密碼”時(shí)的動(dòng)效。選中步驟2添加的兩個(gè)關(guān)鍵幀，按“Ctrl+C”復(fù)制關(guān)鍵幀，選中“密碼”圖層，將“時(shí)間指示器”移到4秒15幀位置，按“Ctrl+V”粘貼關(guān)鍵幀，制作鼠標(biāo)點(diǎn)擊“密碼”時(shí)，“密碼”圖層中文字消失的動(dòng)效。【課堂演示】教師演示“輸入密碼”圖層中的關(guān)鍵幀如何設(shè)置步驟7先選中“輸入用戶名”圖層，復(fù)制一個(gè)圖層副本，將復(fù)制圖層重命名為“輸入密碼”，雙擊復(fù)制圖層，輸入“××××”;然后設(shè)置錨點(diǎn)位于其中心位置。先選中該圖層上的所有關(guān)鍵幀，按下鼠標(biāo)左鍵向右拖動(dòng)關(guān)鍵幀到4秒15幀處;然后將該圖層中的最后一個(gè)關(guān)鍵幀向左拖到5秒05幀處;最后設(shè)置該圖層的“位置”屬性值為“238，812”，此時(shí)鼠標(biāo)點(diǎn)擊“密碼”后輸入密碼的動(dòng)效就制作完成了，如圖6-53所示。【課堂演示】教師演示“鼠標(biāo)4”圖層的關(guān)鍵幀如何設(shè)置步驟8參照步驟5的方法拆分“鼠標(biāo)3”圖層，制作鼠標(biāo)點(diǎn)擊“發(fā)送驗(yàn)證碼”的動(dòng)效，“鼠標(biāo)4”圖層的關(guān)鍵幀設(shè)置如圖6-54所示。步驟9選擇“發(fā)送驗(yàn)證碼”圖層，在6秒10幀和6秒13幀處為其“縮放”屬性添加關(guān)鍵幀，設(shè)置6秒13幀處的屬性值為90%。為該圖層添加“填充”效果，選擇圖層下“效果/填充”屬性組中的“顏色”屬性，在6秒10幀和6秒13幀處為該屬性添加關(guān)鍵幀，設(shè)置6秒10幀處的顏色為橙色“#E9A53E”，6秒13幀處的顏色為淺灰色“#B9B9B9”?！菊n堂演示】教師演示鼠標(biāo)點(diǎn)擊“請(qǐng)輸入驗(yàn)證碼”時(shí)相應(yīng)圖層的關(guān)鍵幀如何設(shè)置步驟10參照步驟5和步驟6的方法制作鼠標(biāo)點(diǎn)擊“請(qǐng)輸入驗(yàn)證碼”時(shí)，鼠標(biāo)的動(dòng)效和“請(qǐng)輸入驗(yàn)證碼”圖層中文字消失的動(dòng)效，相應(yīng)圖層的關(guān)鍵幀設(shè)置如圖6-55所示。【課堂演示】教師演示“輸入驗(yàn)證碼”圖層的關(guān)鍵幀如何設(shè)置選擇“輸入密碼”圖層，復(fù)制一個(gè)圖層副本，將復(fù)制圖層重命名為“輸入驗(yàn)證碼”，修改圖層中的文本為“××××××”，設(shè)置錨點(diǎn)位于其中心位置，如果參照步驟7的方法制作輸入驗(yàn)證碼的動(dòng)效，其關(guān)鍵幀設(shè)置如圖6-56所示。3.制作登錄界面到首頁的轉(zhuǎn)場動(dòng)效【課堂演示】教師演示“鼠標(biāo)6”圖層的關(guān)鍵幀如何設(shè)置步驟1使用上述方法拆分“鼠標(biāo)5”圖層，制作鼠標(biāo)點(diǎn)擊“登錄”按鈕的動(dòng)效，“鼠標(biāo)6”圖層的關(guān)鍵幀設(shè)置如圖6-57所示。【課堂演示】教師演示“登錄”和“登錄框”圖層的關(guān)鍵幀如何設(shè)置步驟2同時(shí)選中“登錄”和“登錄框”圖層，在9秒20幀和9秒25幀處為它們的“縮放”屬性添加關(guān)鍵幀，設(shè)置9秒25幀處的屬性值為95%;選中“登錄框”圖層為其添加“填充”效果，在9秒20幀和9秒25幀處為“效果/填充”屬性組中的“顏色”屬性添加關(guān)鍵幀，設(shè)置9秒20幀處的顏色為橙色“#E9A53E”，9秒25幀處的顏色為暗橙色“#E4A47D”，此時(shí)“登錄”按鈕的選中效果就制作完成了，如圖6-58所示。【課堂演示】教師演示“預(yù)合成”對(duì)話框制作方法步驟3同時(shí)選中“時(shí)間軸”面板中的所有圖層，右鍵單擊所選圖層，在彈出的快捷菜單中選擇“預(yù)合成...”，彈出“預(yù)合成”對(duì)話框，在其中設(shè)置相關(guān)選項(xiàng)(如圖6-59所示)，然后單擊“確定”按鈕，生成預(yù)合成。步驟4選擇“文件/導(dǎo)入/文件...”菜單項(xiàng)，彈出“導(dǎo)入文件”對(duì)話框，在其中選擇“素材與實(shí)例/第6章/案例6-3/首頁.jpg”，單擊“導(dǎo)入”按鈕導(dǎo)入圖片素材。步驟5在“項(xiàng)目”面板中按下鼠標(biāo)左鍵拖動(dòng)“首頁.jpg”到“時(shí)間軸”面板中，使其位于“登錄界面動(dòng)效”預(yù)合成上方，在9秒20幀和10秒15幀處為其“縮放”屬性添加關(guān)鍵幀，設(shè)置9秒20幀處的屬性值為0%;在9秒20幀和10秒10幀處為其“不透明度”屬性添加關(guān)鍵幀，設(shè)置9秒20幀處的屬性值為0%。選中該圖層上的所有關(guān)鍵幀，按快捷鍵“F9”添加“緩動(dòng)”效果。步驟6最后將文件保存?！窘處煛堪才艑W(xué)生完成任務(wù)實(shí)施，沒有掌握操作步驟的學(xué)生可以掃描二維碼（詳見教材）觀看操作視頻再次學(xué)習(xí)【教師】巡堂輔導(dǎo)，及時(shí)解決學(xué)生遇到的問題；安排每組做得最快、最好的學(xué)生輔導(dǎo)其他學(xué)生進(jìn)行操作，并解答其遇到的問題通過項(xiàng)目實(shí)訓(xùn)，使學(xué)生掌握啟動(dòng)界面到登錄界面的轉(zhuǎn)場動(dòng)效的制作方法，并以學(xué)生為主體，針對(duì)學(xué)生接受能力的差異性，讓優(yōu)秀學(xué)生帶動(dòng)其他學(xué)生掌握知識(shí)第4節(jié)課AfterEffects動(dòng)畫實(shí)訓(xùn)說明（10min）【教師】介紹項(xiàng)目實(shí)訓(xùn)內(nèi)容，分析任務(wù)：在UI交互動(dòng)效設(shè)計(jì)中，動(dòng)畫的設(shè)計(jì)與添加也是需要慎重考慮的，動(dòng)畫需要具備實(shí)際功能，要有助于提高產(chǎn)品的用戶體驗(yàn)，并且在產(chǎn)品的最初設(shè)計(jì)階段就應(yīng)該納入考慮范圍，如果在產(chǎn)品成熟之后再考慮添加動(dòng)畫，很容易使整體界面太過突兀，不夠協(xié)調(diào)。【多媒體】展現(xiàn)人物行走動(dòng)畫效果圖片，教師分析其最終效果很多加載界面中都會(huì)設(shè)置人物動(dòng)畫，通過生動(dòng)有趣的人物動(dòng)畫吸引用戶觀看，緩解用戶的焦慮情緒。本案例帶領(lǐng)讀者制作一個(gè)生動(dòng)的人物行走動(dòng)畫，其效果如圖6-60所示。該動(dòng)畫主要通過“時(shí)間軸”面板中的“父級(jí)和鏈接”列，使人物的小腿和小臂跟隨大腿和大臂運(yùn)動(dòng)，最終形成人物行走動(dòng)畫。通過實(shí)訓(xùn)說明的方式，引入要講的知識(shí)，使學(xué)生了解制作任務(wù)行走動(dòng)畫的制作思路項(xiàng)目實(shí)訓(xùn)（35min）【教師】進(jìn)行任務(wù)演示【課堂演示】教師演示如何調(diào)整錨點(diǎn)位置步驟1啟動(dòng)AfterEffects，單擊“打開項(xiàng)目”按鈕，在彈出的“打開”對(duì)話框中選擇“素材與實(shí)例/第6章/案例6-4/人物形象.aep”，單擊“打開”按鈕，打開項(xiàng)目文件。步驟2在工具欄中，選擇向后平移(錨點(diǎn))工具，調(diào)整“合成”窗口中所有圖形的錨點(diǎn)位置，使頭和身體的錨點(diǎn)位于各自圖形的底端，使大臂、大腿、小臂和小腿的錨點(diǎn)位于各自圖形的頂端，如圖6-61所示。步驟3在“時(shí)間軸”面板中，右鍵單擊列標(biāo)題欄，在彈出的快捷菜單中選擇“列數(shù)/父級(jí)和鏈接”，使“父級(jí)和鏈接”列顯示于“時(shí)間軸”面板中?！菊n堂演示】教師演示如何拖動(dòng)“父級(jí)關(guān)聯(lián)器”按鈕步驟4按下鼠標(biāo)左鍵拖動(dòng)“小臂右”圖層上的“父級(jí)關(guān)聯(lián)器”按鈕到“大臂右”圖層，使“大臂右”圖層成為“小臂右”圖層的父級(jí)圖層，如圖6-62所示。【課堂演示】教師演示如何將頭、手臂、腿都鏈接到身體步驟5重復(fù)以上操作，分別鏈接小臂到大臂，小腿到大腿，再鏈接頭到身體，大臂和大腿到身體，如圖6-63所示?！菊n堂演示】教師演示如何設(shè)置“旋轉(zhuǎn)”屬性值及其效果步驟6隱藏“身體”圖層內(nèi)容，同時(shí)選中除“頭”和“身體”圖層外的所有圖層，按快捷鍵“R”，顯示它們的“旋轉(zhuǎn)”屬性，并分別設(shè)置它們的屬性值為52°、-32°、-40°、26°、-28°、-32°、30°、26°，使人物處于行走狀態(tài)，如圖6-64所示?！菊n堂演示】教師演示大臂和大腿的“旋轉(zhuǎn)”屬性值制作方法步驟7再次選中除“頭”和“身體”圖層外的所有圖層，在0秒、1秒10幀和2秒20幀處為“旋轉(zhuǎn)”屬性添加關(guān)鍵幀，并將“時(shí)間指示器”移到1秒10幀位置，設(shè)置大臂和大腿的屬性值分別為-25°、36°、52°、-44°，如圖6-65所示?！菊n堂演示】教師演示20幀處“旋轉(zhuǎn)”屬性值設(shè)置和2秒處“旋轉(zhuǎn)”屬性值如何設(shè)置步驟8將“時(shí)間指示器”移到20幀的位置，為“大腿左”圖層和“小腿左”圖層的“旋轉(zhuǎn)”屬性添加關(guān)鍵幀，分別設(shè)置屬性值為-24°和79°，如圖6-66所示;將“時(shí)間指示器”移到2秒的位置，為“大腿右”圖層和“小腿右”圖層的“旋轉(zhuǎn)”屬性添加關(guān)鍵幀，分別設(shè)置屬性值為-9°和70°，如圖6-67所示。步驟9顯示“身體”圖層內(nèi)容，選中該圖層，在0秒、20幀、1秒10幀、2秒和2秒20幀處為“變換”屬性組中的“位置”屬性添加關(guān)鍵幀;將“時(shí)間指示器”移到20幀位置，設(shè)置“位置”屬性的y值為588;復(fù)制20幀處的關(guān)鍵幀粘貼到2秒位置。使用快捷鍵“F9”為該屬性的所有關(guān)鍵幀添加“緩動(dòng)”效果。步驟10選擇“頭”圖層，在0秒、20幀、1秒10幀、2秒和2秒20幀處為“變換”屬性組中的“旋轉(zhuǎn)”屬性添加關(guān)鍵幀，將“時(shí)間指示器”移到20幀位置，設(shè)置其屬性值為-5°;復(fù)制20幀處的關(guān)鍵幀粘貼到2秒位置。步驟11同時(shí)選中所有關(guān)鍵幀，按住快捷鍵“Alt”的同時(shí)按下鼠標(biāo)左鍵向左拖動(dòng)最后一個(gè)關(guān)鍵幀到1秒20幀處。將“時(shí)間指示器”移到1秒20幀位置，按快捷鍵“N”使工作區(qū)的結(jié)束時(shí)間移至1秒20幀處。此時(shí)，按“空格鍵”便能預(yù)覽到一個(gè)不斷行走的人物動(dòng)畫，接下來為他添加陰影。【課堂演示】教師演示“預(yù)合成”對(duì)話框制作方法步驟12同時(shí)選中“時(shí)間軸”面板中的所有圖層，右鍵單擊所選圖層名稱，在彈出的快捷菜單中選擇“預(yù)合成...”，彈出“預(yù)合成”對(duì)話框，在其中設(shè)置相關(guān)選項(xiàng)，并單擊“確定”按鈕生成預(yù)合成，如圖6-68所示。【課堂演示】教師演示如何設(shè)置“陰影”圖層的“x軸旋轉(zhuǎn)”屬性值和“位置”屬性值步驟13選擇“人物動(dòng)畫”預(yù)合成，按快捷鍵“Ctrl+D”復(fù)制一個(gè)預(yù)合成副本，將其重命名為“陰影”，在“時(shí)間軸”面板中按下左鍵向下拖動(dòng)“陰影”預(yù)合成到“人物動(dòng)畫”預(yù)合成下方;單擊“陰影”預(yù)合成的“3D圖層”按鈕，并設(shè)置該圖層“x軸旋轉(zhuǎn)”屬性值為88°，“位置”屬性的y值為760，如圖6-69所示?！菊n堂演示】教師演示如何添加“填充”和“快速方框模糊”效果步驟14先為“陰影”預(yù)合成添加“填充”效果，在“效果控件”面板中設(shè)置顏色為深灰色“#424040”;然后選擇“效果/模糊和銳化/快速方框模糊”菜單項(xiàng)，為其添加“快速方框模糊”效果，在“效果控件”面板中設(shè)置“模糊半徑”屬性值為56，如圖6-70所示。步驟15將文件保存。至此，人物行走動(dòng)畫就制作完成了。【教師】安排學(xué)生完成任務(wù)實(shí)施，沒有掌握操作步驟的學(xué)生可以掃描二維碼（詳見教材）觀看操作視頻再次學(xué)習(xí)【教師】巡堂輔導(dǎo)，及時(shí)解決學(xué)生遇到的問題；安排每組做得最快、最好的學(xué)生輔導(dǎo)其他學(xué)生進(jìn)行操作，并解答其遇到的問題通過項(xiàng)目實(shí)訓(xùn)使學(xué)生掌握制作人物行走動(dòng)畫的制作方法，并以學(xué)生為主體，針對(duì)學(xué)生接受能力的差異性，讓優(yōu)秀學(xué)生帶動(dòng)其他學(xué)生掌握知識(shí)第5節(jié)課案例練習(xí)6-5制作紙飛機(jī)沿路徑運(yùn)動(dòng)動(dòng)畫實(shí)訓(xùn)說明（7min）【教師】介紹項(xiàng)目實(shí)訓(xùn)內(nèi)容，分析任務(wù)：本案例帶領(lǐng)讀者制作紙飛機(jī)沿路徑運(yùn)動(dòng)的動(dòng)畫，效果如圖6-71所示。制作該動(dòng)畫首先需要使用鋼筆工具繪制出路徑;然后將繪制的路徑復(fù)制到紙飛機(jī)圖層的“位置”屬性上，并使用“描邊”效果為紙飛機(jī)添加拖尾效果?！径嗝襟w】展現(xiàn)紙飛機(jī)沿路徑運(yùn)動(dòng)動(dòng)畫效果圖片，教師分析其最終效果通過項(xiàng)目說明的方式，引入要講的知識(shí)，使學(xué)生了解紙飛機(jī)沿路徑運(yùn)動(dòng)動(dòng)畫的制作思路項(xiàng)目實(shí)訓(xùn)（35min）【教師】分析任務(wù)，并進(jìn)行演示【課堂演示】教師演示“合成設(shè)置”對(duì)話框制作方法步驟1在AfterEffects中新建項(xiàng)目，選擇“合成/新建合成...”菜單項(xiàng)，彈出“合成設(shè)置”對(duì)話框，在其中進(jìn)行相關(guān)設(shè)置，如果單擊“確定”按鈕新建合成，如圖6-72所示。【課堂演示】教師演示如何設(shè)置對(duì)話框步驟2先選擇“文件/導(dǎo)入/文件...”菜單項(xiàng)，彈出“導(dǎo)入文件”對(duì)話框，在其中選擇“素材與實(shí)例/第6章/案例6-5/紙飛機(jī).psd”，單擊“導(dǎo)入”按鈕，彈出設(shè)置對(duì)話框，在其中設(shè)置相關(guān)選項(xiàng);然后單擊“確定”按鈕導(dǎo)入素材并創(chuàng)建合成，如圖6-73所示。【課堂演示】教師演示如何拖動(dòng)錨點(diǎn)至機(jī)身步驟3在“項(xiàng)目”面板中按下鼠標(biāo)左鍵將“紙飛機(jī)”合成向下拖到“時(shí)間軸”面板中，設(shè)置其“縮放”屬性值為15%，在工具欄中選擇向后平移(錨點(diǎn))工具，將該圖層的錨點(diǎn)拖到紙飛機(jī)機(jī)身上，如圖6-74所示。步驟4右鍵單擊圖層控制區(qū)域的空白處，在彈出的快捷菜單中選擇“新建/純色...”，彈出“純色設(shè)置”對(duì)話框，設(shè)置名稱為“路徑”，然后單擊“確定”按鈕新建純色圖層?！菊n堂演示】教師演示如何使用鋼筆工具繪制路徑步驟5隱藏“路徑”圖層內(nèi)容并選中該圖層，在工具欄中選擇鋼筆工具，在“合成”窗口中繪制蒙版路徑，如圖6-75所示。【課堂演示】教師演示如何復(fù)制粘貼路徑步驟6選中“路徑”圖層中“蒙版/蒙版1”屬性組中的“蒙版路徑”屬性，按快捷鍵“Ctrl+C”復(fù)制路徑;選中“紙飛機(jī)”合成的“位置”屬性，按快捷鍵“Ctrl+V”將復(fù)制的路徑粘貼到該屬性中，此時(shí)“位置”屬性上會(huì)自動(dòng)添加5個(gè)關(guān)鍵幀，分別對(duì)應(yīng)步驟5中所繪制的5個(gè)路徑頂點(diǎn)，如圖6-76所示。步驟7在“時(shí)間軸”面板中選擇“紙飛機(jī)”合成，右鍵單擊所選合成，在彈出的快捷菜單中選擇“變換/自動(dòng)定向...”，彈出“自動(dòng)方向”對(duì)話框，在其中選擇“沿路徑定向”，然后單擊“確定”按鈕，此時(shí)機(jī)頭會(huì)隨紙飛機(jī)的運(yùn)動(dòng)而變換方向。設(shè)置合成的“旋轉(zhuǎn)”屬性值為28°，使機(jī)頭與路徑對(duì)齊。步驟8右鍵單擊圖層控制區(qū)域的空白處，在彈出的快捷菜單中選擇“新建/調(diào)整圖層”，新建調(diào)整圖層，將其重命名為“拖尾”并置底。步驟9選中“路徑”圖層的“蒙版路徑”屬性，按快捷鍵“Ctrl+C”復(fù)制路徑;選中“拖尾”圖層按快捷鍵“Ctrl+V”粘貼路徑?！菊n堂演示】教師演示如何添加“描邊”效果步驟10選中“拖尾”圖層，選擇“效果/生成/描邊”菜單項(xiàng)為其添加“描邊”效果，在“效果控件”面板中設(shè)置顏色為淺藍(lán)色“#DEE9F8”，“畫筆大小”屬性值為5，如圖6-77所示?！菊n堂演示】教師演示單擊“切換蒙版和形狀路徑可見性”按鈕步驟11單擊“合成”窗口下方的“切換蒙版和形狀路徑可見性”按鈕，設(shè)置路徑為不可見模式，如圖6-78所示?！菊n堂演示】教師演示第二個(gè)關(guān)鍵幀處紙飛機(jī)的拖尾制作方法及其效果步驟12將“時(shí)間指示器”移至0秒位置，在“效果控件”面板中為“起始”屬性和“結(jié)束”屬性添加關(guān)鍵幀，設(shè)置“結(jié)束”屬性值為0%;將“時(shí)間指示器”移至“紙飛機(jī)”圖層中“位置”屬性的第二個(gè)關(guān)鍵幀處，在“效果控件”面板中左右拖動(dòng)“結(jié)束”屬性值和“起始”屬性值，使路徑起始位置被紙飛機(jī)遮住，結(jié)束位置在紙飛機(jī)后一段距離處，效果如圖6-79所示。步驟13將“時(shí)間指示器”移至“紙飛機(jī)”圖層中“位置”屬性的第三個(gè)關(guān)鍵幀處，參照步驟12設(shè)置“結(jié)束”屬性值和“起始”屬性值;采用同樣方法設(shè)置第四個(gè)關(guān)鍵幀和第五個(gè)關(guān)鍵幀的“結(jié)束”屬性值和“起始”屬性值。步驟14將“時(shí)間指示器”移至2秒05幀位置，設(shè)置“起始”屬性值為100%，使拖尾在運(yùn)動(dòng)結(jié)束后消失。步驟15將文件保存。至此，紙飛機(jī)沿路徑運(yùn)動(dòng)的動(dòng)畫就制作完成了?！窘處煛堪才艑W(xué)生完成任務(wù)實(shí)施，沒有掌握操作步驟的學(xué)生可以掃描二維碼（詳見教材）觀看操作視頻再次學(xué)習(xí)【教師】巡堂輔導(dǎo)，及時(shí)解決學(xué)生遇到的問題；安排每組做得最快、最好的學(xué)生輔導(dǎo)其他學(xué)生進(jìn)行操作，并解答其遇到的問題通過項(xiàng)目實(shí)訓(xùn)使學(xué)生鞏固所學(xué)知識(shí)，并以學(xué)生為主體，針對(duì)學(xué)生接受能力的差異性，讓優(yōu)秀學(xué)生帶動(dòng)其他學(xué)生掌握知識(shí)課堂小結(jié)

（3min）【教師】簡要總結(jié)本節(jié)課的要點(diǎn)本章介紹了文字動(dòng)效、界面加載交互動(dòng)效、界面轉(zhuǎn)場交互動(dòng)效和AfterEffects動(dòng)畫的相關(guān)知識(shí)，并使用AfterEffects制作了幾個(gè)相關(guān)動(dòng)效的案例。UI交互動(dòng)效包括各種不同類型、不同表現(xiàn)形式的動(dòng)效，但無論何種動(dòng)效，都是由多種基礎(chǔ)動(dòng)效組合而成的。希望通過本章的學(xué)習(xí)，學(xué)生可以掌握常見UI交互動(dòng)效的制作，可以通過將不同的基礎(chǔ)動(dòng)效進(jìn)行組合，制作出更加精美的、符合界面設(shè)計(jì)風(fēng)格的交互動(dòng)效?！緦W(xué)生】總結(jié)回顧知識(shí)點(diǎn)總結(jié)知識(shí)點(diǎn)，鞏固學(xué)生對(duì)流程圖相關(guān)知識(shí)的印象第6節(jié)課項(xiàng)目實(shí)訓(xùn)——制作圓形進(jìn)度條加載動(dòng)效佳作賞析（10min）【教師】講解新知【多媒體】展現(xiàn)網(wǎng)頁動(dòng)效圖片，并進(jìn)行講解如圖6-80所示，是國貨彩妝品牌“花西子”的網(wǎng)站界面交互動(dòng)效圖。界面以白色和藍(lán)綠色作為主色，搭配精美的圖片和細(xì)長、優(yōu)美的文字，充滿民族特色的同時(shí)又不缺乏時(shí)尚感，給人簡潔明了，高端大氣上檔次的感覺。在界面中，滾動(dòng)鼠標(biāo)或單擊“下一頁”按鈕會(huì)從側(cè)面滑出下一頁面。簡單的側(cè)滑動(dòng)效相對(duì)于復(fù)雜的、炫酷的動(dòng)效，更能使用戶目光集中在界面產(chǎn)品上，從而達(dá)到推銷產(chǎn)品的目的?！盎ㄎ髯印逼放瞥司W(wǎng)站界面整體的交互動(dòng)效外，在界面元素和細(xì)節(jié)的動(dòng)效設(shè)計(jì)上也有值得學(xué)習(xí)的亮點(diǎn)。【多媒體】展現(xiàn)鼠標(biāo)樣式圖片，并進(jìn)行講解(1)“花西子”品牌的網(wǎng)站界面交互動(dòng)效中，將鼠標(biāo)樣式設(shè)計(jì)成了花朵的形狀，當(dāng)鼠標(biāo)移到可點(diǎn)擊的元素或按鈕上時(shí)，花朵會(huì)變?yōu)轱@眼的紅色花朵剪影，給用戶眼前一亮的感覺，如圖6-81所示。這一設(shè)計(jì)降低了用戶認(rèn)知成本，清晰地向用戶展示了哪些元素是可點(diǎn)擊的。【多媒體】展現(xiàn)導(dǎo)航欄圖片，并進(jìn)行講解(