《web前端技术》(赵敏)003-0教案 第15课 CSS3高级应用之动画效果

PAGE1PAGE1PAGE2PAGE2

课题第15课CSS3高级应用之动画效果课时2课时（90min）教学目标知识技能目标：掌握关键帧的设置方法和属性掌握动画效果的相关属性掌握制作动画效果的方法素质目标：（1）学习CSS3高级应用之动画效果，拓宽视野，提高专业技能（2）提高对事物的观察和归纳总结能力，养成好的编程习惯和思维方式教学重难点教学重点：关键帧的设置方法和属性，动画效果的相关属性教学难点：制作北极熊走路动画片段教学方法问答法、讨论法、讲授法、实践练习法、演示法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂教学设计第1节课：→→→传授新知（25min）→实战拓展（15min）第2节课：→实战演练（15min）→课堂检测（10min）→实训练习（10min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务提前了解关键帧的设置方法和属性，动画效果的相关属性，可以准备好自己想做的动画素材，以备上课练习【学生】完成课前任务通过课前任务，让学准备自己的素材，为课堂上学习相关技术做准备考勤（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（3min）【教师】提出问题在上节课中，我们学习了CSS3的变形效果和过渡效果，过渡效果只能在一个开始值与一个结束值之间添加，无法设置中间值，那CSS3可不可实现关键帧制作动画呢？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识使用transition属性只能在一个开始值与一个结束值之间添加过渡效果，无法设置中间值，而CSS3中的动画功能不仅可以制作出过渡效果，还可以通过设置关键帧制作变化多样的动画效果。这次课我们就讲解动画效果如何实现通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（25min）8.3动画效果8.3.1关键帧【教师】讲解关键帧的设置方法和属性制作动画效果必须先设置关键帧，一个关键帧代表动画变化过程中的一个状态。在CSS3中，使用@keyframes规则定义关键帧，具体格式为：@keyframesname{selector{css-styles;}}其中，name表示动画名称；selector表示关键帧的时间位置，也就是动画时长的百分比，取值为0%～100%，还可以使用from（等价于0%）和to（等价于100%）表示动画的开始和结束；css-styles表示对应关键帧的样式属性，可以设置多个属性。【学生】聆听、记录、理解8.3.2动画效果的相关属性【教师】讲解动画效果的相关属性，演示例子辅助理解要想实现动画效果，在定义了关键帧之后，就需要使用动画效果的相关属性来控制关键帧的变化。CSS3为实现动画效果提供了一些属性，下面对这些属性进行详细介绍。1．设置动画名称在CSS3中，使用animation-name属性设置要应用的动画效果名称，具体格式为：animation-name:name|none;…（详见教材）2．设置动画时间在CSS3中，使用animation-duration属性设置动画效果播放一次的时长，具体格式为：animation-duration:time;…（详见教材）3．设置动画的速度曲线在CSS3中，使用animation-timing-function属性设置动画效果的速度曲线，具体格式为：…（详见教材）【课堂拓展】此外，animation-timing-function属性值还可以设置为steps(number,start|end)方法。它用于设置两个关键帧之间插入多少帧补间动画，参数number表示帧数，值为正整数；…（详见教材）4．设置延迟时间在CSS3中，使用animation-delay属性设置动画效果何时开始，具体格式为：animation-delay:time;…（详见教材）5．设置播放次数在CSS3中，使用animation-iteration-count属性设置动画效果播放的次数，具体格式为：animation-iteration-count:number|infinite;…（详见教材）6．设置播放方向在CSS3中，使用animation-direction属性设置动画效果的播放方向，具体格式为：animation-direction:normal|alternate;…（详见教材）【课堂拓展】与transition属性类似，在CSS3中，使用animation属性可以在一个声明中设置动画效果的各个属性，包括动画名称、时间、速度曲线、延迟时间、播放次数和播放方向，具体格式为：…（详见教材）7．设置播放状态在CSS3中，使用animation-play-state属性设置动画效果的状态，如暂停、播放，具体格式为：animation-play-state:paused|running;…（详见教材）8．设置播放外状态在CSS3中，使用animation-fill-mode属性设置动画效果播放外（如播放之前或之后）的状态，具体格式为：animation-fill-mode:none|forwards|backwards|both;…（详见教材）【例8-4】为元素设置动画效果，包括关键帧、动画名称、动画时间、动画的速度曲线、延迟时间、播放次数等…（详见教材）【学生】聆听、记录、理解、观看效果通过教师的讲解和演示例子，使学生了解关键帧的设置方法和属性，以及动画效果的相关属性实践拓展（15min）【教师】提前准备好素材，或要求学生使用自己准备的素材，将根据上课所学知识和例8-4将元素设置动画效果，包括关键帧、动画名称、动画时间、动画的速度曲线、延迟时间、播放次数等，效果学生可自行掌握，有疑问可互相讨论或咨询老师【学生】讨论、思考、操作通过实践练习，巩固学生对关键帧属性和动画效果相关属性的理解与掌握，并锻炼学生的实际操作能力第二节课问题导入（5min）【教师】提出问题请大家看这个动画，以往大家都是通过什么软件，什么方法来实现？那我们在CSS3中应该怎么实现？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣实战演练（15min）制作北极熊走路动画片段【教师】先演示下最终效果，再讲解练习中较为重要和学生容易出错的地方，再要求学生制作北极熊走路动画片段，遇到不会的问题可以扫描微课二维码观看视频”制作北极熊走路动画片段”（详见教材），可讨论或咨询老师，可互相帮助使用关键帧不仅能够实现元素的动态效果，还能结合图像元素与背景属性等制作动画片段。下面带领大家一起制作北极熊走路动画片段。步骤1在HBuilderX中导入本书配套素材“素材与案例\第8章\实战演练”文件夹，然后打开“8.3.html”文档，该文档中已经创建好div元素并为其设置了背景图像，……（详见教材）步骤2定义关键帧。“8.3.html”文档中的div元素就是帧动画的“舞台”，使用关键帧设置其背景图像显示位置的变化，就能够制作出北极熊原地走路的动画效果，其中该动画使用的背景图像（宽度为1000px）……（详见教材）步骤3设置动画效果。该动画共8个动作，每个动作对应的背景图像区域占总宽度的八分之一，可设置该动画开始与结束关键帧之间共移动8次（浏览器自动将背景图像的移动过程分8次完成，每次移动125px）。因此，在“8.3.html”文档<style>…</style>标签中的div{…}最后面添加以下代码，……（详见教材）制作项目，观看微课，讨论通过制作北极熊走路动画片段，使学生巩固所学知识，锻炼动手操作能力知识检测（10min）【教师】提前扫描书上前言部分的二维码，找到该书的题库，并从中选择第八章的单选题，多选题和判断题部分，发布生成”作业二维码“，并放入课件；在课上让学生通过”文旌课堂“扫描”作业二维码“，进行知识检测，检测完学生可以直接在”文旌课堂“查看答题报告，查看答案解析，有疑问可咨询教师，思考，做题目，查看答题报告通过在线知识检测，可检测学生对本章内容的掌握程度，查漏补缺知识点，培养学生在线学习意识实训练习（10min）【教师】先演示下最终效果，要求学生完成课后实训练习部分，可以互相讨论或询问老师【学生】讨论、思考、操作通过实践学习，巩固学生对动画效果的的理解与掌握，并锻炼学生的实际操作能力课堂小结（3min）【教师】简要总结本节课的要点本节课主要介绍了CSS3高级应用的相关知识。通过本节课的学习，学生应重点掌握以下内容。在CSS3中，使用@keyframes规则定义关键帧，使用animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state、animation-fill-mode属性设置动画名称、动画时间、动画的速度曲线、延迟时间、播放次数、播放方向、播放状态和播放外状态，实现元素的动画效果。【学生】总结回顾知识点总结知识点，使学生牢固掌握关键帧的属性和动画效果的相关属性作业布置（2min）【教师】布置课后作业团队作业：在上节课任务的基础上，完