《web前端技術(shù)》(趙敏)003-0教案 第15課 CSS3高級應(yīng)用之動畫效果

PAGE1PAGE1PAGE2PAGE2

課題第15課CSS3高級應(yīng)用之動畫效果課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識技能目標(biāo)：掌握關(guān)鍵幀的設(shè)置方法和屬性掌握動畫效果的相關(guān)屬性掌握制作動畫效果的方法素質(zhì)目標(biāo)：（1）學(xué)習(xí)CSS3高級應(yīng)用之動畫效果，拓寬視野，提高專業(yè)技能（2）提高對事物的觀察和歸納總結(jié)能力，養(yǎng)成好的編程習(xí)慣和思維方式教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：關(guān)鍵幀的設(shè)置方法和屬性，動畫效果的相關(guān)屬性教學(xué)難點(diǎn)：制作北極熊走路動畫片段教學(xué)方法問答法、討論法、講授法、實(shí)踐練習(xí)法、演示法教學(xué)用具電腦、投影儀、多媒體課件、教材、文旌課堂教學(xué)設(shè)計(jì)第1節(jié)課：→→→傳授新知（25min）→實(shí)戰(zhàn)拓展（15min）第2節(jié)課：→實(shí)戰(zhàn)演練（15min）→課堂檢測（10min）→實(shí)訓(xùn)練習(xí)（10min）→課堂小結(jié)（3min）→作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過文旌課堂APP或其他學(xué)習(xí)軟件，完成課前任務(wù)提前了解關(guān)鍵幀的設(shè)置方法和屬性，動畫效果的相關(guān)屬性，可以準(zhǔn)備好自己想做的動畫素材，以備上課練習(xí)【學(xué)生】完成課前任務(wù)通過課前任務(wù)，讓學(xué)準(zhǔn)備自己的素材，為課堂上學(xué)習(xí)相關(guān)技術(shù)做準(zhǔn)備考勤（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問題導(dǎo)入（3min）【教師】提出問題在上節(jié)課中，我們學(xué)習(xí)了CSS3的變形效果和過渡效果，過渡效果只能在一個(gè)開始值與一個(gè)結(jié)束值之間添加，無法設(shè)置中間值，那CSS3可不可實(shí)現(xiàn)關(guān)鍵幀制作動畫呢？【學(xué)生】思考、舉手回答【教師】通過學(xué)生的回答引入要講的知識使用transition屬性只能在一個(gè)開始值與一個(gè)結(jié)束值之間添加過渡效果，無法設(shè)置中間值，而CSS3中的動畫功能不僅可以制作出過渡效果，還可以通過設(shè)置關(guān)鍵幀制作變化多樣的動畫效果。這次課我們就講解動畫效果如何實(shí)現(xiàn)通過問題導(dǎo)入的方法，引導(dǎo)學(xué)生主動思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（25min）8.3動畫效果8.3.1關(guān)鍵幀【教師】講解關(guān)鍵幀的設(shè)置方法和屬性制作動畫效果必須先設(shè)置關(guān)鍵幀，一個(gè)關(guān)鍵幀代表動畫變化過程中的一個(gè)狀態(tài)。在CSS3中，使用@keyframes規(guī)則定義關(guān)鍵幀，具體格式為：@keyframesname{selector{css-styles;}}其中，name表示動畫名稱；selector表示關(guān)鍵幀的時(shí)間位置，也就是動畫時(shí)長的百分比，取值為0%～100%，還可以使用from（等價(jià)于0%）和to（等價(jià)于100%）表示動畫的開始和結(jié)束；css-styles表示對應(yīng)關(guān)鍵幀的樣式屬性，可以設(shè)置多個(gè)屬性。【學(xué)生】聆聽、記錄、理解8.3.2動畫效果的相關(guān)屬性【教師】講解動畫效果的相關(guān)屬性，演示例子輔助理解要想實(shí)現(xiàn)動畫效果，在定義了關(guān)鍵幀之后，就需要使用動畫效果的相關(guān)屬性來控制關(guān)鍵幀的變化。CSS3為實(shí)現(xiàn)動畫效果提供了一些屬性，下面對這些屬性進(jìn)行詳細(xì)介紹。1．設(shè)置動畫名稱在CSS3中，使用animation-name屬性設(shè)置要應(yīng)用的動畫效果名稱，具體格式為：animation-name:name|none;…（詳見教材）2．設(shè)置動畫時(shí)間在CSS3中，使用animation-duration屬性設(shè)置動畫效果播放一次的時(shí)長，具體格式為：animation-duration:time;…（詳見教材）3．設(shè)置動畫的速度曲線在CSS3中，使用animation-timing-function屬性設(shè)置動畫效果的速度曲線，具體格式為：…（詳見教材）【課堂拓展】此外，animation-timing-function屬性值還可以設(shè)置為steps(number,start|end)方法。它用于設(shè)置兩個(gè)關(guān)鍵幀之間插入多少幀補(bǔ)間動畫，參數(shù)number表示幀數(shù)，值為正整數(shù)；…（詳見教材）4．設(shè)置延遲時(shí)間在CSS3中，使用animation-delay屬性設(shè)置動畫效果何時(shí)開始，具體格式為：animation-delay:time;…（詳見教材）5．設(shè)置播放次數(shù)在CSS3中，使用animation-iteration-count屬性設(shè)置動畫效果播放的次數(shù)，具體格式為：animation-iteration-count:number|infinite;…（詳見教材）6．設(shè)置播放方向在CSS3中，使用animation-direction屬性設(shè)置動畫效果的播放方向，具體格式為：animation-direction:normal|alternate;…（詳見教材）【課堂拓展】與transition屬性類似，在CSS3中，使用animation屬性可以在一個(gè)聲明中設(shè)置動畫效果的各個(gè)屬性，包括動畫名稱、時(shí)間、速度曲線、延遲時(shí)間、播放次數(shù)和播放方向，具體格式為：…（詳見教材）7．設(shè)置播放狀態(tài)在CSS3中，使用animation-play-state屬性設(shè)置動畫效果的狀態(tài)，如暫停、播放，具體格式為：animation-play-state:paused|running;…（詳見教材）8．設(shè)置播放外狀態(tài)在CSS3中，使用animation-fill-mode屬性設(shè)置動畫效果播放外（如播放之前或之后）的狀態(tài)，具體格式為：animation-fill-mode:none|forwards|backwards|both;…（詳見教材）【例8-4】為元素設(shè)置動畫效果，包括關(guān)鍵幀、動畫名稱、動畫時(shí)間、動畫的速度曲線、延遲時(shí)間、播放次數(shù)等…（詳見教材）【學(xué)生】聆聽、記錄、理解、觀看效果通過教師的講解和演示例子，使學(xué)生了解關(guān)鍵幀的設(shè)置方法和屬性，以及動畫效果的相關(guān)屬性實(shí)踐拓展（15min）【教師】提前準(zhǔn)備好素材，或要求學(xué)生使用自己準(zhǔn)備的素材，將根據(jù)上課所學(xué)知識和例8-4將元素設(shè)置動畫效果，包括關(guān)鍵幀、動畫名稱、動畫時(shí)間、動畫的速度曲線、延遲時(shí)間、播放次數(shù)等，效果學(xué)生可自行掌握，有疑問可互相討論或咨詢老師【學(xué)生】討論、思考、操作通過實(shí)踐練習(xí)，鞏固學(xué)生對關(guān)鍵幀屬性和動畫效果相關(guān)屬性的理解與掌握，并鍛煉學(xué)生的實(shí)際操作能力第二節(jié)課問題導(dǎo)入（5min）【教師】提出問題請大家看這個(gè)動畫，以往大家都是通過什么軟件，什么方法來實(shí)現(xiàn)？那我們在CSS3中應(yīng)該怎么實(shí)現(xiàn)？【學(xué)生】思考、舉手回答【教師】通過學(xué)生的回答引入要講的知識通過問題導(dǎo)入的方法，引導(dǎo)學(xué)生主動思考，激發(fā)學(xué)生的學(xué)習(xí)興趣實(shí)戰(zhàn)演練（15min）制作北極熊走路動畫片段【教師】先演示下最終效果，再講解練習(xí)中較為重要和學(xué)生容易出錯(cuò)的地方，再要求學(xué)生制作北極熊走路動畫片段，遇到不會的問題可以掃描微課二維碼觀看視頻”制作北極熊走路動畫片段”（詳見教材），可討論或咨詢老師，可互相幫助使用關(guān)鍵幀不僅能夠?qū)崿F(xiàn)元素的動態(tài)效果，還能結(jié)合圖像元素與背景屬性等制作動畫片段。下面帶領(lǐng)大家一起制作北極熊走路動畫片段。步驟1在HBuilderX中導(dǎo)入本書配套素材“素材與案例\第8章\實(shí)戰(zhàn)演練”文件夾，然后打開“8.3.html”文檔，該文檔中已經(jīng)創(chuàng)建好div元素并為其設(shè)置了背景圖像，……（詳見教材）步驟2定義關(guān)鍵幀?！?.3.html”文檔中的div元素就是幀動畫的“舞臺”，使用關(guān)鍵幀設(shè)置其背景圖像顯示位置的變化，就能夠制作出北極熊原地走路的動畫效果，其中該動畫使用的背景圖像（寬度為1000px）……（詳見教材）步驟3設(shè)置動畫效果。該動畫共8個(gè)動作，每個(gè)動作對應(yīng)的背景圖像區(qū)域占總寬度的八分之一，可設(shè)置該動畫開始與結(jié)束關(guān)鍵幀之間共移動8次（瀏覽器自動將背景圖像的移動過程分8次完成，每次移動125px）。因此，在“8.3.html”文檔<style>…</style>標(biāo)簽中的div{…}最后面添加以下代碼，……（詳見教材）制作項(xiàng)目，觀看微課，討論通過制作北極熊走路動畫片段，使學(xué)生鞏固所學(xué)知識，鍛煉動手操作能力知識檢測（10min）【教師】提前掃描書上前言部分的二維碼，找到該書的題庫，并從中選擇第八章的單選題，多選題和判斷題部分，發(fā)布生成”作業(yè)二維碼“，并放入課件；在課上讓學(xué)生通過”文旌課堂“掃描”作業(yè)二維碼“，進(jìn)行知識檢測，檢測完學(xué)生可以直接在”文旌課堂“查看答題報(bào)告，查看答案解析，有疑問可咨詢教師，思考，做題目，查看答題報(bào)告通過在線知識檢測，可檢測學(xué)生對本章內(nèi)容的掌握程度，查漏補(bǔ)缺知識點(diǎn)，培養(yǎng)學(xué)生在線學(xué)習(xí)意識實(shí)訓(xùn)練習(xí)（10min）【教師】先演示下最終效果，要求學(xué)生完成課后實(shí)訓(xùn)練習(xí)部分，可以互相討論或詢問老師【學(xué)生】討論、思考、操作通過實(shí)踐學(xué)習(xí)，鞏固學(xué)生對動畫效果的的理解與掌握，并鍛煉學(xué)生的實(shí)際操作能力課堂小結(jié)（3min）【教師】簡要總結(jié)本節(jié)課的要點(diǎn)本節(jié)課主要介紹了CSS3高級應(yīng)用的相關(guān)知識。通過本節(jié)課的學(xué)習(xí)，學(xué)生應(yīng)重點(diǎn)掌握以下內(nèi)容。在CSS3中，使用@keyframes規(guī)則定義關(guān)鍵幀，使用animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state、animation-fill-mode屬性設(shè)置動畫名稱、動畫時(shí)間、動畫的速度曲線、延遲時(shí)間、播放次數(shù)、播放方向、播放狀態(tài)和播放外狀態(tài)，實(shí)現(xiàn)元素的動畫效果?！緦W(xué)生】總結(jié)回顧知識點(diǎn)總結(jié)知識點(diǎn)，使學(xué)生牢固掌握關(guān)鍵幀的屬性和動畫效果的相關(guān)屬性作業(yè)布置（2min）【教師】布置課后作業(yè)團(tuán)隊(duì)作業(yè)：在上節(jié)課任務(wù)的基礎(chǔ)上，完