203421第203421第課動(dòng)畫效果的實(shí)現(xiàn)的基基本本PAGE62020動(dòng)畫效果的實(shí)現(xiàn)第課PAGE720動(dòng)畫效果的實(shí)現(xiàn)第20動(dòng)畫效果的實(shí)現(xiàn)第課PAGE1

課題動(dòng)畫效果的實(shí)現(xiàn)課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）掌握關(guān)鍵幀的設(shè)置方法（2）了解動(dòng)畫效果的相關(guān)屬性（3）掌握制作動(dòng)畫片段的方法思政育人目標(biāo)：（1）培養(yǎng)學(xué)生掌握信息的思維，通過搜集的信息去解決問題（2）在學(xué)習(xí)中提高探索能力，幫助學(xué)生不斷的提高探索意識(shí)教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：關(guān)鍵幀的設(shè)置方法、動(dòng)畫效果的相關(guān)屬性教學(xué)難點(diǎn)：制作動(dòng)畫片段的方法教學(xué)方法講授法、啟發(fā)法、問答法、演示法、討論法、練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)第1節(jié)課：考勤（2min）→導(dǎo)入新知（4min）→知識(shí)講解（24min）→活動(dòng)環(huán)節(jié)（15min）第2節(jié)課：導(dǎo)入新知（4min）→知識(shí)講解（24min）→課堂練習(xí)（13min）→課堂小結(jié)（2min）→作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課考勤

（2min）【教師】清點(diǎn)上課人數(shù)，記錄好考勤【學(xué)生】班干部報(bào)請(qǐng)假人員及原因培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況知識(shí)預(yù)熱

（4min）【教師】介紹動(dòng)畫效果的作用，引出新知識(shí)點(diǎn)使用transition屬性只能在一個(gè)開始值與一個(gè)結(jié)束值之間添加過渡效果，無法設(shè)置中間值，而CSS3中的動(dòng)畫功能不僅可以制作出過渡效果，還可以通過設(shè)置關(guān)鍵幀制作變化多樣的動(dòng)畫片段【學(xué)生】聆聽、思考從動(dòng)畫效果的作用入手，讓學(xué)生聯(lián)想到網(wǎng)頁中的動(dòng)畫操作，激發(fā)學(xué)生的求知欲知識(shí)講解

（24min）【教師】提問學(xué)生問題【學(xué)生】思考、回答【教師】總結(jié)學(xué)生回答關(guān)鍵幀制作動(dòng)畫必須先設(shè)置關(guān)鍵幀，一個(gè)關(guān)鍵幀代表動(dòng)畫變化過程中的一個(gè)狀態(tài)。在CSS3中，使用@keyframes命令定義關(guān)鍵幀，具體格式為：@keyframesname{selector{css-styles;}}其中，name表示動(dòng)畫名稱；selector表示關(guān)鍵幀的時(shí)間位置，也就是動(dòng)畫時(shí)長的百分比，還可以使用參數(shù)from（等價(jià)于0%）和to（等價(jià)于100%）表示動(dòng)畫的開始和結(jié)束；css-styles表示對(duì)應(yīng)關(guān)鍵幀的樣式屬性，可以設(shè)置多個(gè)屬性。【教師】講述動(dòng)畫效果相關(guān)屬性動(dòng)畫效果相關(guān)屬性1．動(dòng)畫名稱在CSS3中，使用animation-name屬性設(shè)置要應(yīng)用的動(dòng)畫名稱，具體格式為：animation-name:name|none;其中，name表示動(dòng)畫名稱，屬性值為想要應(yīng)用的@keyframes動(dòng)畫名稱，none表示不應(yīng)用或取消動(dòng)畫。2．動(dòng)畫時(shí)間在CSS3中，使用animation-duration屬性設(shè)置動(dòng)畫效果播放一次的時(shí)長，具體格式為：animation-duration:time;設(shè)置方法與transition-duration屬性相同。3．動(dòng)畫的速度曲線在CSS3中，使用animation-timing-function屬性設(shè)置動(dòng)畫效果的速度曲線，具體格式為：animation-timing-function:cubiczier(n,n,n,n)|liner|ease|

ease-in|ease-out;設(shè)置方法與transition-timing-function相同。4．延遲時(shí)間在CSS3中，使用animation-delay屬性設(shè)置動(dòng)畫開始之前需要等待的時(shí)間，具體格式為：animation-delay:time;設(shè)置方法與transition-duration屬性相同。5．播放次數(shù)在CSS3中，使用animation-iteration-count屬性設(shè)置動(dòng)畫播放的次數(shù)，具體格式為：animation-iteration-count:number|infinite;其中，number表示動(dòng)畫播放的次數(shù)，屬性值為正整數(shù)，默認(rèn)值為1；infinite表示循環(huán)播放。【教師】演示【例10-7】操作流程，實(shí)現(xiàn)圖10-21的效果制作帶有動(dòng)畫效果的照片墻，頁面效果如圖10-21所示。圖10-21照片墻的頁面效果（1）在DW中打開本書配套素材“項(xiàng)目10”→“photo.html”文檔，該文檔中已經(jīng)創(chuàng)建了div元素，并在其中插入了4個(gè)定義了樣式的圖像元素，頁面效果如圖10-22所示。圖10-22照片墻的頁面效果（2）在<style>標(biāo)簽中添加以下代碼，設(shè)置鼠標(biāo)指針移動(dòng)至圖像元素上時(shí)的動(dòng)畫效果。img:hover{animation:move1.5s;}/*設(shè)置鼠標(biāo)指針移動(dòng)至圖像元素上時(shí)應(yīng)用動(dòng)畫move，時(shí)長為1.5秒*/@keyframesmove{ 25%{transform:rotateY(5deg);}/*設(shè)置第一個(gè)關(guān)鍵幀的3D變形效果為繞y軸順時(shí)針旋轉(zhuǎn)5度*/ 75%{transform:rotateY(-5deg);}}/*設(shè)置第二個(gè)關(guān)鍵幀的3D變形效果為繞y軸逆時(shí)針旋轉(zhuǎn)5度*//*該動(dòng)畫效果為：當(dāng)鼠標(biāo)指針移動(dòng)至圖像元素上時(shí)，圖像元素在三維坐標(biāo)系中先繞y軸順時(shí)針旋轉(zhuǎn)5度再逆時(shí)針旋轉(zhuǎn)10度（先旋轉(zhuǎn)5度變?yōu)閞otateY(0)，再繼續(xù)旋轉(zhuǎn)5度），最后恢復(fù)原狀，總時(shí)長共1.5秒*/【學(xué)生】聆聽、思考、理解通過講解知識(shí)點(diǎn)，讓學(xué)生了解動(dòng)畫效果的基本功能活動(dòng)環(huán)節(jié)

（15min）【教師】布置活動(dòng)內(nèi)容【學(xué)生】參與趣味活動(dòng)【教師】多媒體播放小組動(dòng)畫，講解小組內(nèi)容【學(xué)生】聆聽老師講解，做好課堂筆記通過課堂練習(xí)，鞏固所學(xué)知識(shí)，并將所學(xué)知識(shí)與實(shí)際相結(jié)合第二節(jié)課新知導(dǎo)入

（4min）【教師】復(fù)習(xí)之前所講的內(nèi)容，引出新的知識(shí)點(diǎn)前面的一節(jié)課，已經(jīng)講述了關(guān)鍵幀的操作以及動(dòng)畫效果的相關(guān)屬性，包括動(dòng)畫名稱、動(dòng)畫時(shí)間、動(dòng)畫的速度曲線、延遲時(shí)間和播放次數(shù)，本節(jié)課將充分利用已經(jīng)學(xué)習(xí)的知識(shí)，制作動(dòng)畫片段【學(xué)生】聆聽、思考通過對(duì)上節(jié)課知識(shí)點(diǎn)的復(fù)習(xí)，指出后續(xù)的操作流程，引出新的知識(shí)點(diǎn)預(yù)備知識(shí)

（26min）【教師】講述制作動(dòng)畫片段制作動(dòng)畫片段使用關(guān)鍵幀不僅能夠?qū)崿F(xiàn)元素的動(dòng)態(tài)效果，還能結(jié)合圖像元素與背景屬性等制作動(dòng)畫片段。（1）制作北極熊走路動(dòng)畫片段在DW中打開本書配套素材“項(xiàng)目10”→“animation.html”文檔，該文檔中已經(jīng)創(chuàng)建好div元素并為其設(shè)置了背景圖像，頁面效果如圖10-24所示。圖10-24設(shè)置動(dòng)畫前的頁面效果（2）文檔中的div元素就是幀動(dòng)畫的“舞臺(tái)”，使用關(guān)鍵幀設(shè)置其背景圖像顯示位置的變化，就能夠制作出北極熊原地走路的動(dòng)畫效果。該動(dòng)畫使用的背景圖像（寬度為1000px）如圖10-25所示。圖10-25div元素的背景圖像（3）在<style>標(biāo)簽中添加以下代碼，設(shè)置開始和結(jié)束的關(guān)鍵幀及樣式。@keyframesmove{ 0%{background-position:00;}/*設(shè)置第一個(gè)關(guān)鍵幀的背景圖像顯示位置*/ 100%{background-position:-1000px0;}}/*設(shè)置第二個(gè)關(guān)鍵幀的背景圖像顯示位置向左側(cè)移動(dòng)1000px*/（4）該動(dòng)畫共8個(gè)動(dòng)作，每個(gè)動(dòng)作對(duì)應(yīng)的背景圖像區(qū)域占總寬度的八分之一，可設(shè)置該動(dòng)畫開始與結(jié)束關(guān)鍵幀之間共移動(dòng)8次（瀏覽器自動(dòng)將背景圖像的移動(dòng)過程分8次完成，每次移動(dòng)125px）。在div{…}中添加以下代碼，為div元素應(yīng)用動(dòng)畫效果。animation:move1ssteps(8,end)infinite;/*為div元素應(yīng)用動(dòng)畫move，時(shí)長為1秒，兩個(gè)關(guān)鍵幀之間共8幀，以第一幀為動(dòng)畫開始，循環(huán)播放*/【學(xué)生】聆聽、理解、思考【教師】詢問學(xué)生，是否有不理解的地方【學(xué)生】提問、記錄【教師】回答學(xué)生問題通過講解知識(shí)點(diǎn)，讓學(xué)生深刻了解制作動(dòng)畫片段的操作課堂練習(xí)

（13min）【教師】布置課堂練習(xí)內(nèi)容為“書店簡介”頁面?zhèn)冗厵谥械逆溄游淖衷O(shè)置動(dòng)畫本任務(wù)實(shí)施將通過為“書店簡介”頁面?zhèn)冗厵谥械逆溄游淖?/p>

設(shè)置動(dòng)畫效果，練習(xí)為網(wǎng)頁元素設(shè)置動(dòng)畫效果的方法【教師】分析課堂內(nèi)容（1）在樣式文檔中添加以下代碼，設(shè)置動(dòng)畫contain3的效果@keyframescontain3{ 20%{transform:rotateY(20deg);}/*設(shè)置第一個(gè)關(guān)鍵幀的3D變形效果為繞y軸順時(shí)針旋轉(zhuǎn)20度*/ 80%{transform:rotateY(-20deg);}}/*設(shè)置第二個(gè)關(guān)鍵幀的3D變形效果為繞y軸逆時(shí)針旋轉(zhuǎn)20度*/（2）繼續(xù)在樣式文檔中的#contain3ullia:hover{…}內(nèi)添加以下代碼，將動(dòng)畫contain3應(yīng)用于側(cè)邊欄中的鏈接文字animation:contain31s;/*將動(dòng)畫contain3應(yīng)用于側(cè)邊欄中的鏈接文字，時(shí)長為1秒*/【學(xué)生】完成課堂練習(xí)【教師】巡視課堂，對(duì)學(xué)生進(jìn)行答疑和幫助【教師】公布課堂練習(xí)答案【學(xué)生】對(duì)照答案，修改自身內(nèi)容通過課堂練習(xí)，加強(qiáng)對(duì)動(dòng)畫操作的熟練度課堂小結(jié)

（2min）【教師】簡要總結(jié)本章的知識(shí)要點(diǎn)本節(jié)課學(xué)習(xí)了關(guān)鍵幀的設(shè)置方法、動(dòng)畫效果