《全国中小学信息技术课程教学大赛获奖案例初中信息技术八年级-设置自定义动画动作路径》由会员分享，可在线阅读，更多相关《全国中小学信息技术课程教学大赛获奖案例初中信息技术八年级-设置自定义动画动作路径(9页珍藏版)》请在人人文库网上搜索。

1、教案名称设置自定义动画动作路径年级 初二 课时 1一、教材分析自定义动画动作路径这节内容是八年级上册第二单元的内容，本单元主要介 绍了制作多媒体演示文稿的基本思路与方法，使学生在完成作品的实践过程中， 逐步提高应用多媒体素材的能力。PowerPoint是Microsof toff ice软件之一。它是一 种多功能的图文处理软件系统。PowerPoint的功能很强大，用它可以制作出包含 文本、图片、声音、动画和视频的多媒体作品。相对于word来说，效果丰富的动 画效果是powerpoint的精髓，而自定义动画可以实现各个要素独特的动画效果， 这节课学习的内容是怎样给幻灯片的操作对象设置动作路径，。

2、从而达到一定的动 画效果。根据初二年级学生的学习水平以及信息技术新课标的要求，依据教材作 了适度的调整，通过实例(小猫钓鱼的故事情节)设计了本课。本节课是在学生 已掌握了幻灯片基本操作的基础上和自定义动画的“进入”、“强调”、“退 出”的基础上而设立的高层次的学习任务一一动作路径。本节课利用学生都熟悉 的故事小猫钓鱼，通过绘制动作路径让小猫、蝴蝶、蜡蜓等动起来完善故事 情节的过程中让学生学会设置动作路径。从而让学生达到学习U标。二、学生分析初二的学生经过初一一年的系统学习，同一年级学生运用信息技术能力及计 算机的基本操作能力都基本差不多，只有个别学生计算机操作能力较差些。 PowerPoint。

3、这一单元的内容学生比较感兴趣，学生可以独立制作简单的幻灯片， 对于一些细节内容掌握的还不是太好。本节课的内容是在学生掌握了幻灯片基本 操作的基础上和自定义动画的“进入、强调、退出的基础上”而进一步学习的动 作路径的设置。学生对这一节内容比较感兴趣，通过故事情节的完善，学生之间 的互评让学生体验成功。对于动作路径的简单绘制学生容易掌握，但动作路径中 的开始选项“之询”和“之后”的运用，要给予学生重点讲解和演示，让学生掌 握这个知识点。对于一些学困生要个别指导，尽量让每个学生都掌握本课的知识 点。三、教学目标知识与技能：1、在掌握自定义动画“进入、强调、退出”的基础上，掌握较为复杂 的“动作路径”。

4、的设置。2、掌握合适的动作路径，为幻灯片添加自定义动画的效果。过程与方法：精讲多练，创设情境，任务驱动，通过故事情节，选择合适的动作路径， 让小猫、蝴蝶、蜡蜓等动起来，完成自定义动画的设置，完善故事情节，实现动 作与画面的和谐统一。情感态度与价值观：通过自定义动画的设置和小猫钓鱼的故事，进一步培养学生学习信息技术的 兴趣，让学生明白做事不能三心二意，要一心一意，才能成功。四、教学重难点教学重点：1、绘制动作路径；2、动作路径的调整和设置：3、速度的调整4、开始选项的运用及设置教学难点：“开始”选项的“单击”、“之前”“之后”的运用及设置五、教学策略任务驱动，让学生自主学习自主完成任务的过程中，。

5、教师适时的指导与提 示，发现问题集中讲解与演示。对于个别学生要个别辅导，学生完善故事惜节 后，自评、互评、师评发现问题，更加完善作品。六、教具准备多媒体计算机机房、教师授课演示文稿、练习素材七、教学过程(-)课题引入1、教师放映演示做好的PPT: “小猫钓鱼”播放小猫钓鱼演示文稿，并下发小猫钓鱼的练习素材给学生。教师提问：小猫钓鱼的故事告诉了我们一个什么道理？演示文稿中的小猫和蝴 蝶等是怎么动起来的？让学生思考运用昨天讲过的自定义动画前三种“进入”、“强调”、“退出”能否让小猫和蝴蝶等动起来？2、学生思考并回答问题，明白做事不能三心二意的，一心一意才能成功。尝 试用昨天的进入、强调让小猫动起来。

6、动作不连贯，引出自定义动画第四个知识点“动作路径”。教师：现在我们就来学习这节课的内容一一设置自定义动画动作路径 设计意图：本环节通过创设情景引入课题，激发了学生的学习兴趣，使学生在学 习情境中主动、积极地接受任务，自然而然把学生引入学习情境中。(二) 学习新知：教师：首先出示学习H标：1、熟练绘制自定义动作路径2、根据要求适时地调整路径和速度3、学会运用和设置开始选项上节课我们讲了自定义动画的添加效果前三种：进入、强调、退出，今天我们 学习第四种：动作路径。亲爱的同学们，现在我们自己动手，用自定义动画动作 路径让小猫、蝴蝶、蜡蜓动起来，完善故事情节。任务一：根据故事情节，绘制动作路径让小猫和。

7、猫妈妈同时出发到河边钓鱼(提示：“同时”如何设置“开始”选项)学生：打开练习素材，熟悉回顾“自定义动画”工具栏内的工具。自定义动画一一添加效果一一&、进入；b、强调；C、退出；d、动作路径。 尝试对“自定义动画”中的“设置动作路径”工具进行操作完成任务一。教师：巡视指导，发现问题及时提示纠正，对于个别操作能力差的学生个别指 导。最后教师集中讲解演示纠正发现的问题。强调之前的设置及运用(把猫妈妈 开始选项设置为单击、小猫设置为“之前”，速度都为中速，就可以实现小猫和 猫妈妈同时出发)没有完成任务一的学生继续修改完成，完成任务一的学生着手 操作完成任务二。任务二：用自定义动画实现蜡蜓飞来，小猫去追。

8、逐蜻蜓(注意小猫有两个动 作，坐着变成站着，思考怎么运用上节课学过的“出现”、和“消失”)教师巡视指导，提示运用“之后”，回顾上节课的内容“出现”和“消失” 并运用到本节课中，然后把发现的问题集中讲解。任务三：试着用自定义路径中的自山曲线，分别绘制蝴蝶、蜡蜓飞过来的效 果，要求动作流畅。(提示蝴蝶和蜡蜓飞的路径并不是直的，所以要运用自曲曲 线)学生使用动作路径中的绘制自定义路径一一自山曲线，来选择一条路径完成 蝴蝶和蜡蜓在小猫身边、头上飞来飞去。教师巡视指导，然后发现问题集中讲解演示，强调绘制动作路径的操作要 领：1、选定对象2、绘制动作路径。3、动作路径的调整和设置。4、开始选项“之前”“之。

9、后”的运用5、调节速度6、调整顺序任务四：保存作品，演示放映幻灯片，看有无制作错误，完善作品教师巡视指导过程中，发现有代表性的作品。设计意图：通过播放小猫钓鱼的幻灯片引起学生的兴趣，让学生觉得原来幻 灯片还可以把故事活灵活现的表现出来，布置任务让学生自主探究学习，养成良 好的学习习惯，给学生自我展示的机会，提高学习积极性。让学生体验成功的愉 悦。通过任务二、三、四综合练习，巩固知识，让知识转化为能力。通过这一环 节教学，让学生根据不同的情况设置不同的路径，提高学生的实际操作能力。(三)分享评价教师在巡视指导的过程中选出具有代表性的作品。展示个别学生作品，让同 学说出自己制作的思路，自认为优缺点。

10、有哪些，其他同学评价，说出他们的优缺 点，然后教师点评。设计意图：通过自评、互评、师评让学生发现自己的优缺点，发现问题及时 改正优化缺点，完善作品，让学生掌握幻灯片自定义动画四种方式的设置。(四)课后作业：尝试自己编一个小故事，以幻灯片的方式把故事呈现出 来，要求故事画面整洁大方，动作路径绘制流畅，体现一定的艺术性，幻灯片之 间过度切换自然，并试着运用超链接。(超链接相关知识点参照下节内容)设计意图：拔高练习，让学生自己创作的过程中回顾本节内容，预习下节课 内容(幻灯片的切换方式、超链接)(五)总结教师：你学到了什么？学生回顾本节课自己所掌握的知识教师总结：本节课我们学习了自定义动画中的动作路。

11、径，设置幻灯片的动画 效果，使我们的小猫、蝴蝶、蜡蜓等动起来，完善了故事情节，使我们感觉到幻 灯片功能的强大，在我们没有学过Flash的基础上，可以做出这样的动画效果。 本节课的知识点主要是绘制动作路径的操作要领：选定对象、绘制动作路径、 动作路径的调整和设置、开始选项“之前”“之后”的运用、调节速度、调整顺 序。同时通过小猫钓鱼的故事，不管我们学习或做事都不能三心二意、心不 在焉，只有一心一意、竭尽全力才能成功。学生通过老师的总结回顾所学的内容，强化知识点，领会小猫钓鱼故 事的蕴意。设计意图：通过归纳总结，理清知识脉络，为了让学生更好的明确知识点强 化巩固知识。课后作业：用幻灯片制作一个自己。

12、喜欢的小故事，充分运用幻灯片中所学过 的知识点，充分地体现故事情节。设计意图：拔高练习八、教学反思优点：本节课参照教材知识点不是单纯地照本宣科讲授知识点，而是运用学 生都皆知的小故事小猫钓鱼，易于学生理解，吸引学生的注意力，激发学生 的学习兴趣。讲授新课之前给学生播放做好的小猫钓鱼幻灯片，让学生感觉 幻灯片也可以做出这样的动画效果，还可以用幻灯片的方式讲故事，播放完后明 显感觉学生对本课的内容非常感兴趣。都有种跃跃欲试的冲动，所以运用任务驱 动教学法，正迎合了学生的心理也培养了学生自主学习、自主探究、动手实践操 作的能力。在学生完成任务一、二、三的过程中，教师巡视指导，及时发现问题 加以纠正，。

13、然后集中讲解强化知识点。讲练结合，利于学生发现错误及时纠正， 练习强化巩固知识。也可以明确所要掌握的知识点。在整个教学过程中，教师为 主导，学生为主体。分享评价环节，自评、互评、师评可以发扬优点改正缺点， 让学生体验成功再接再厉，也激励其他同学继续努力。课后作业，是一个拔高练 习，学生在创作的过程中可以回顾本节课内容也可以预习新知。教师在传授知识 的同时更要育人，通过实例小猫钓鱼的故事，让学生明口不管是做事还是学 习都不能三心二意，一心一意才有可能成功。缺点：虽然学生对本节课内容非常感兴趣，学生都投入到学习情境中，学生 的思路随着任务层层递进吸引学生的注意力，大部分学生都完成了教学内容，达 到。

14、了教学目标，但忽略了对学困生的照顾，同时运用“出现”、“消失”、“之 前”、“之后”的设置，对于学困生来说，有一定的难度，所以在课上出现了一 大部分学生学得热火朝天，惊呼自己的杰作，自我陶醉无暇顾及帮助学困生，其 中有4、5个学生，到任务二和任务三时，干着急不知如何下手，默默欣赏别人作 品时有种失落感，尽管教师巡视指导时个别辅导，但在有限的时间内，学困生还 是不能较好的掌握难点。布置课后作业，对于学困生来说也有一定的难度。所 以，以后任务要分层，布置基础任务和拔高任务。作业也要分层。在课上也要学 生之间互帮互助，可以让先完成任务的学生充当小老师，帮助学困生。课程内容比较紧凑，在分享评价时不能展示更多学生的作品。所以以后在时间分配上要改进，多关注后进生，实行分层任务、分层作业， 完成基础任务多鼓励学困生，提高他们的学习自信心。810。

layout: post

title: "svg自定义路径动画"

subtitle: "svg path 动画"

date: 2016-09-26 12:00:00

author: "Guolei"

header-img: ""

header-mask: 0.3

catalog: false

tags:

- svg

svg相对于canves，svg更加适合做小图标和线条，canves做大型游戏

svg的基础教程可以在w3c上查看，本篇文章主要讲，如何绘制自定义路径，以及如何在自定义路径上实现动画。

先看效果

(忽略我丑陋的书法)

难点：

如何将自定义路径转化为Path代码

如何获取svn每个像素点的坐标

车子并不是简单的位移，车头方向和前进方向相同(切线)

原理

svg实现动画一般是通过 stroke-dasharray和stroke-dashoffset这两个属性来实现。

html

path {

stroke-dasharray: 3000;

stroke-dashoffset: 3000;

-webkit-animation: dash 5s linear infinite;

animation: dash 5s linear infinite;

}

css

stroke-dasharray代表虚线之间的间距大小

stroke-dashoffse代表虚线的偏移量

实现过程

设置一个足够长的间距 (大于路径的长度)

设置一个足够长的偏移量，保证刚开始看不到路径。(可以和长度一样)

让偏移变成0 最后在配合css3的animation 增加一个动画过度，实现动画。

path代码

问题来了，path的代码哪里来的

难道自己一个个像素点去算?

当然不是，我们有工具

使用教程：

选择画笔工具

在画板上绘制路线

点击view，导出路径代码

高阶用法

绘制好svn路线之后，如何让物体沿着路径前进

// 配置位移矢量 一共走100步

var STEP = 100;

var curStep = 0;

var path = $('#path')[0];

var $car = $('#car');

var timer = null;

// 最重要的两个属性 获取长度，以及每个点的坐标

var totalLength = path.getTotalLength();

var initPosition = path.getPointAtLength(0);

var prePosition = initPosition;

var curPosition = initPosition;

// 获取前进切线角度

function getRotate(a, b) {

var k = (b.y - a.y) / (b.x - a.x);

var rotate = Math.atan(k) * 180 / Math.PI;

return k < 0 ? rotate + 90 : rotate - 90;

}

// 定位car

$car.css({

left: initPosition.x,

top:initPosition.y,

'-webkit-transform': 'translate(-2px, 0) rotate(' + getRotate(curPosition , path.getPointAtLength(1)) +'deg)'

}).show()

// 定时器控制前进

timer = setInterval(function() {

if (curStep != STEP) {

curStep++;

curPosition = path.getPointAtLength(totalLength/STEP * curStep);

$car.css({

left: curPosition.x,

top:curPosition.y,

'-webkit-transform': 'translate(-2px, 0) rotate('+getRotate(prePosition, curPosition)+'deg)'

}).show();

prePosition = curPosition;

} else {

clearInterval(timer);

}

}, 100)

原理就是将svn的长度平分100次，每100ms走一次，每次的坐标通过 path.getPointAtLength(totalLength/STEP * curStep)计算，然后通过js控制小车的位置。

通过setimeout可以配置小车运动的快慢，还可以通过缓动函数，使小车具有惯性。