第三课 动画补间动画课件2026-2027学年教科版（云南）初中信息科技八年级下册

这段动画，是怎么做出来的 情境导入 先看清楚 蝴蝶在飞， 翅膀还在一下一下扇。 这些画面，是一张一张画出来的吗？ 位置　左下、右下 → 飞向右上 大小　停在左下时很大 → 越飞越小 背景　整幅江南图从近处慢慢推远 三样东西都在动，可人只定了每样的头尾两帧。 动作补间动画 · 八年级信息科技 动 03 / 16 八年级 信息科技 · 第四课 动作补间动画 只做两个关键帧， 中间的变化交给电脑补 授课教师： 动 01 / 16 这节课，你要会做三件事 学习目标 01 说清它是什么 用自己的话讲出动作补间和逐帧动画的区别 02 做出一个补间 让一张导入的图片，在自己的舞台上动起来 03 会看时间轴 一眼判断补间成没成功，出错能自己排查 本课任务 让这只蝴蝶，从画面左下角飞到右上角 动作补间动画 · 八年级信息科技 动 02 / 16 电脑替你「补」出来的动画 概念 定义 在两个关键帧里，给同一个对象分别摆好起点和终点，中间的过程由电脑自动计算补出来。 就像拍电影，只拍开头和结尾，中间让电脑替你画。 逐帧动画 每一帧都要自己画 动作生硬，文件很大 适合没有规律的动作 动作补间动画 只做首尾两个关键帧 电脑补出中间，文件小 适合位置、大小、旋转、透明度 动作补间动画 · 八年级信息科技 动 04 / 16 谁能当「演员」 对象前提 可以直接补间 元件实例（图形 / 影片剪辑 / 按钮） 文本块 组合后的对象 必须先转成元件 导入的位图（jpg / png / gif） 没组合的矢量形状 —— 它要用「补间形状」 为什么 补间时电脑要算「这个对象从 A 挪到 B」，它得先能把你给的看成一个整体 —— 散图和没组合的矢量是一堆点，挪不动。 一句话 一张导入的图片要动起来，先按 F8 把它变成元件。 动作补间动画 · 八年级信息科技 动 05 / 16 放大之后，才分得清 为什么要转元件 位图放大 8 倍：每个小方块都是一个像素 位图 由像素点拼成 · 放大就糊 · jpg / png / gif 矢量图 由数学公式描述 · 放大不失真 · 形状、文字、元件 导入的照片是位图，Flash 只把它当成「一张图」。 转成元件，它才成为可以被补间的「一个演员」。 动作补间动画 · 八年级信息科技 动 06 / 16 动作补间动画，三步走完 操作骨架 01 找演员 —— 做成元件 把要动的对象转成元件，它才有资格上台 02 请上台 —— 摆首尾两帧 第 1 帧摆起点，第 30 帧按 F6 摆终点 03 让它动 —— 创建补间 在第 1 帧和第 30 帧之间，创建传统补间 动作补间动画 · 八年级信息科技 动 07 / 16 第一步：把图片变成「演员」 创建元件 路径 A 新建元件 选中图片→ 单击右键→新建元件（Ctrl + F8） 路径 B · 更快 转换成元件 选中舞台上的对象 → 转换为元件（F8） 建好之后，检查三件事 类型选「图形」　·　命名写「蝴蝶_蓝」，别用默认名 原件住进「库」（Ctrl + L），舞台上那个是它的「实例」 改库里的原件，舞台上所有实例一起变 动作补间动画 · 八年级信息科技 动 08 / 16 第二步：摆好起点和终点 两个关键帧 舞台 第 1 帧 · 起点 → 第 30 帧 · 终点 ① 第 1 帧 把蝴蝶放在起点，这就是初始状态 ② 第 30 帧按 F6 插入关键帧，把蝴蝶拖到终点 ③ 中间一帧都别动 手画了中间帧，就不叫补间了 时间轴 每格 = 1 帧 第 1 帧 · 关键帧 第 30 帧 · 关键帧（F6） 中间这 28 帧，一帧都不用你画 —— 那正是电脑要补的部分。 动作补间动画 · 八年级信息科技 动 09 / 16 第三步：让它动起来 创建补间 入口 A 在两帧之间点右键 → 创建传统补间 入口 B 选中这段帧 → 属性面板 → 补间：动画 成功的样子 → 淡紫色底 + 一条实线箭头 别认错这三种颜色 淡紫 + 箭头 = 传统补间 淡绿 = 补间形状 淡蓝 + 菱形 = 补间动画 没变紫？ 对象不是元件 / 两个关键帧里不是同一个对象 / 只选了一个帧 动作补间动画 · 八年级信息科技 动 10 / 16 任务一：让蝴蝶飞起来 动手做 目标：左下角 → 右上角 四步做完，不要跳步 ① 文件 → 导入 → 导入到舞台，选「蓝蝴蝶3.gif」 ② 选中它，按 F8 转成元件，命名「蝴蝶_蓝」 ③ 第 30 帧按 F6，把蝴蝶拖到右上角，顺带放大一点 ④ 在第 1 帧和第 30 帧之间右键 → 创建传统补间 验收：时间轴淡紫 + 箭头，Ctrl + Enter 预览，蝴蝶匀速飞过去。 做完了别删，第 12 页的进阶就改在这个文件上。 动作补间动画 · 八年级信息科技 动 11 / 16 进阶：大小 · 透明度 · 旋转 三个属性 进阶 ① 改大小 第 30 帧选中实例 用「任意变形工具」拉大 效果：由远及近 进阶 ② 改透明度 属性 → 色彩效果 → Alpha 第 30 帧调到 0% 效果：淡入淡出 进阶 ③ 改旋转 属性 → 旋转 选「顺时针 1 次」 效果：边飞边转 要点 三个属性都改在「终点那一帧的实例」上，而且可以叠加 —— 边飞、边变大、边转圈。 动作补间动画 · 八年级信息科技 动 12 / 16 综合案例：水墨江南 多图层 开头那段动画，拆开就是三层。 背景层 江南图转成元件：位置 + 大小补间，由近推远 蝴蝶层 ① 蓝蝴蝶：位置 + 大小补间，右下飞向右上 蝴蝶层 ② 绿蝴蝶：位置 + 大小补间，左下飞向右上 三层各建各的补间 —— 改哪一层，都不会牵动别的层。 动作补间动画 · 八年级信息科技 动 13 / 16 随堂练习 当堂检测 ① 动作补间动画，至少需要几个关键帧？ A. 1 个　　B. 2 个　　C. 3 个　　D. 任意多个 ② 判断：文本块不能创建动作补间动画。（　　） 对的打 ✓，错的打 ×，并说出理由 ③ 把一张 jpg 拖上舞台，直接创建传统补间，会看到什么？ 正确做法又是什么？ 三个都答完，再翻下一页对答案。 动作补间动画 · 八年级信息科技 动 14 / 16 答案，以及最容易错的地方 讲评 参考答案 ① B　两个关键帧 一个起点、一个终点，中间由电脑补出来 ② ×　错 文本块可以补间。不行的是没组合的矢量形状、没转成元件的位图 ③ 时间轴不会变紫 jpg 不是元件。先 F8 转成元件，再创建补间 四条辨析 ✓ 任意变形工具能改大小，但改的是「那一帧的实例」 × 「必须先选中两个关键帧」—— 点两帧之间任意一处就行 × 「关键帧越多越顺」—— 补间靠的就是少帧，手加帧会打断补间 ✓ 淡紫色是传统补间的底色，但箭头断了就是失败 动作补间动画 · 八年级信息科技 动 15 / 16 本课小结与作业 收束 01 动作补间 = 首尾两个关键帧，中间交给电脑补 02 对象必须是元件实例；淡紫底 + 实线箭头，才算成功 03 位置、大小、透明度、旋转，都能靠补间做出来 作业 必做 ① 让蓝蝴蝶从左飞到右，再飞回来 必做 ② 用 Alpha 做一次淡入淡出 选做 ③ 三个属性叠加：边飞、边变大、边转圈 下一课 补间形状 —— 这次要变形的，是形状本身 动作补间动画 · 八年级信息科技 动 16 / 16 $