《UI视觉设计案例教程》348-7（李爱平）教案 第四章 用 After Effects 设计和实现 UI 交互动效

PAGE4PAGE4PAGE3PAGE3《UI交互设计案例教程》

教案课时分配表章序课程内容课时备注1第1章UI交互设计基础62第2章UI交互设计规范和原则63第3章使用AxureRP实现线框原型设计104第4章用AfterEffects设计和实现UI交互动效85第5章常见UI交互动效设计与实现(上)66第6章常见UI交互动效设计与实现(下)67第7章文旌课堂App的界面与动效设计6合计48文旌课堂APP

课题第四章用AfterEffects设计和实现UI交互动效课时8课时（360min）教学目标知识技能目标：（1）了解AfterEffects软件的基础知识。（2）掌握AfterEffects的基本操作。（3）掌掌握使用AfterEffects制作UI交互动效的方法与技巧。（4）掌握使用AfterEffects预览、渲染和导出交互动效的方法。思政育人目标：（1）加强练习，在实践中培养自己的专业技能和职业素养。（2）完善作品设计，培养精益求精的良好品质。教学重难点教学重点：AfterEffects软件的基础知识和基本操作教学难点：AfterEffects制作UI交互动效，预览、渲染和导出交互动效的方法与技巧教学方法问答法、讨论法、讲授法、实训法、演示法教学用具电脑、投影仪、多媒体课件、教材教学设计教学过程主要教学内容及步骤设计意图第1节课初识AfterEffects课前任务【教师】布置课前任务，提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请大家预习本任务的相关知识点。【学生】完成课前任务通过课前任务，使学生了解本次课的重要性，增加学生的学习兴趣考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况新章预热

（3min）【教师】介绍本课章节大致内容，导入课题静态的线框原型很难完整地表达出设计师的设计思维，尤其是交互思维，而要表达交互思维，就需要制作交互动效。UI交互动效可以提升页面的表达效果，带给用户更好的视觉体验，还可以更加有效地说明产品的使用方法和功能，增加产品的趣味性，利于展示产品细节。本章介绍制作UI交互动效的相关软件及其操作方法，一方面可以使读者更好地理解和掌握软件，另一方面可以培养读者脚踏实地、精益求精的良好品质。【学生】聆听、互动通过新章预热，让学生了解本章节的大致内容和考核要求互动导入

（5min）【教师】根据预习内容提出问题：介绍AdobeAfterEffects软件的用途和主要功能。【学生】思考、讨论、举手发言【教师】与学生简单互动，总结内容，引入课程内容通过互动导入，引导学生思考，调动学生的主观能动性传授新知

（25min）【教师】根据ppt内容初识AdobeAfterEffects软件4.1初识AfterEffectsAdobeAfterEffects是Adobe公司推出的一款动态图形制作和视觉效果设计软件，由于其自身强大、丰富的动效制作和高度灵活的2D、3D合成功能，以及数百种预设的效果与动画，被广泛应用于UI交互动效设计、视频后期合成处理等领域。AfterEffects支持无限多个图层，能够直接导入Illustrator和Photoshop文件，并且保留文件中的图层，实现了与Adobe公司其他相关软件的无缝衔接。除此之外，AfterEffects还配有多种内置插件，以满足更复杂、更独特的设计要求。在学习AfterEffects之前，要先了解该软件的操作界面，如图4-1所示。【多媒体】教师展现AfterEffects2021操作界面，操作并分别讲解界面中不同区域的功能下面简单介绍界面中不同区域的功能。(1)标题栏:其中包括软件名和正在制作的项目名称，以及最小化、还原、关闭按钮。(2)菜单栏:位于标题栏下方，AfterEffects的大部分功能都位于该区域，选择菜单项可执行相应功能，包括调整参数、切换面板和添加效果等。(3)工具栏:包括选取工具、缩放工具、形状工具、文本工具、绘图工具和Roto笔刷等制作交互动效的常用工具。要使用某个工具，单击选择即可。鼠标左键长按工具右下方的◢按钮，可以在下拉列表中查看并选择隐藏工具。(4)“项目”面板:用于管理项目中的所有素材和合成，上方为素材与合成的预览区域，下方为文件列表区域，可以对素材和合成进行导入、新建、删除、编辑等操作。(5)“合成”窗口:一般位于界面正中，是交互动效的预览区，可以显示当前合成和素材的效果。(6)“时间轴”面板:一般位于界面底部，是用于组织素材的重要区域，可以对图层进行选择、创建、排序和重命名等操作，还可以添加和设置关键帧。【多媒体】教师展现“窗口”子菜单图片，操作并讲解工作面板中的隐藏面板除上述常用面板外，还有一些工作面板，在菜单栏的“窗口”菜单中选择面板名称即可打开相应面板，如图4-2所示。【学生】聆听、观察、跟随操作【多媒体】教师展现改变界面布局图片，操作并讲解如何改变界面布局选择“窗口/工作区”菜单项，可在其子菜单中选择不同的界面布局;单击工具栏中的按钮，也可在下拉列表中选择不同的界面布局，如图4-3所示。【学生】聆听、观察、跟随操作【教师】根据ppt内容讲解AdobeAfterEffects基本操作4.2AfterEffects基本操作4.2.1项目文件基本操作AfterEffects与其他软件有一个明显的不同之处，就是在该软件中创建的项目不能直接操作，还需要在项目文件中创建合成。1.创建和打开项目文件【多媒体】教师展现“开始”界面图片，操作并讲解如何创建和打开项目文件在启动软件时，会出现“开始”界面，在该界面中单击“新建项目”按钮可以创建新项目;单击“打开项目”按钮，可以在弹出的“打开”对话框中选择并打开本地项目文件，另外，该界面还会列出“最近使用项”，直接单击项目名称即可打开对应的项目文件，如图4-4所示。【多媒体】教师展现创建项目或打开本地项目文件图片，操作并讲解如何创建项目或打开本地项目文件关闭“开始”界面后，可以通过选择“文件/新建/新建项目”菜单项创建新项目;或者选择“文件/打开项目...”菜单项，在弹出的“打开”对话框中选择并打开本地项目文件，如图4-5所示。在AfterEffects中一次只能打开一个项目文件，如果在已有项目打开时创建或打开新项目，系统将提醒你保存已经打开的项目并将其关闭，之后再创建或打开新项目。【学生】聆听、观察、跟随操作【教师】根据ppt内容操作并讲解创建合成的方法2.创建合成合成是动效的框架，每个合成都有自己的时间轴，一个项目文件可以包含数百个合成，每个合成都单独列于“项目”面板中，双击“项目”面板中的合成可以在“合成”窗口中显示该合成的效果，并且合成中的图层将显示于“时间轴”面板中。如果要创建新的空白合成，可以先选择“合成/新建合成...”菜单项，在弹出的“合成设置”对话框中设置合成的相关选项;然后单击“确定”按钮。如果要基于素材创建合成，可先双击“项目”面板文件列表区域的空白处，在弹出的“导入文件”对话框中选择文件;然后单击“导入”按钮即可导入文件，并显示于“项目”面板中。在“项目”面板中还会基于该文件自动创建一个与该文件名称相同的合成。另外，在创建项目文件之后，在“合成”窗口中也提供了两个创建合成的按钮，分别是“新建合成”和“从素材新建合成”，直接单击并进行操作即可。【学生】聆听、观察、跟随操作【教师】根据ppt内容讲解新知3.保存和关闭项目文件【多媒体】教师展现文件菜单中的保存命令图片，操作并讲解如何保存和关闭项目文件“文件”菜单中有多个保存项目文件的菜单项，如图4-6所示。选择“文件/保存”菜单项，在弹出的“另存为”对话框中设置保存位置，输入文件名，然后单击“保存”按钮即可保存项目文件;选择“文件/另存为/另存为...”菜单项，可将保存过的文件作为新文件保存到其他位置。要将项目保存为项目副本，可以选择“文件/增量保存”菜单项，将文件保存于原始文件所在的文件夹中，此时的文件名称为在原始文件名基础上添加一个数字，当原始文件名最后一位是数字时，该数字加1。要使项目文件可以用旧版本软件打开，可以选择“文件/另存为/将副本另存为...(主要版本号)”菜单项，弹出“将副本另存为...(主要版本号)”对话框，在其中选择保存位置，输入文件名，然后单击“保存”按钮即可保存项目文件为早期版本。保存项目文件之后选择“文件/关闭项目”菜单项，可关闭当前打开的项目文件。【学生】聆听、观察、跟随操作【教师】根据ppt内容讲解新知4.2.2导入素材1.导入普通图像文件【多媒体】教师展现导入素材选项图片，操作并讲解如何导入普通图像文件使用AfterEffects制作交互动效，经常需要从外部导入各种格式的素材文件，选择“文件/导入”子菜单中的各项可以导入不同类型的文件，如图4-7所示。【多媒体】教师展现“导入文件”对话框图片，操作如何导入文件，并讲解导入对话框的相关参数在“文件/导入”子菜单中选择“文件...”菜单项可打开“导入文件”对话框，在此对话框中选择文件，并单击“导入”或“导入文件夹”按钮即可将文件导入项目文件中;要导入序列图像，需要在对话框中单击序列图像中的第一张图像，并勾选“...序列”复选框，然后单击“导入”按钮，如图4-8所示。【学生】聆听、观察、跟随操作【教师】根据ppt内容讲解新知2.导入Photoshop和Illustrator文件为了制作出效果精彩的交互动效，经常需要把专业图像设计软件中制作的文件导入AfterEffects中。在AfterEffects中可以直接导入Photoshop和Illustrator的分层文件，尤其是Photoshop文件，在AfterEffects中可以显示其所有属性。【多媒体】教师展现设置对话框图片，操作如何导入Photoshop和Illustrator文件，并讲解不同的导入类型和图层选项的不同状态。选择“文件/导入/文件...”菜单项，在弹出的“导入文件”对话框中选择PSD格式或AI格式文件，单击“导入”按钮，弹出设置对话框，在该对话框的“导入种类”下拉列表中选择导入类型，然后单击“确定”按钮，即可将Photoshop或Illustrator文件导入AfterEffects中，如图4-9所示。当导入文件时，在如图4-9所示的对话框中，选择不同的导入种类和图层选项会使文件导入后呈现不同的状态。……详见教材【教师】根据ppt内容讲解源文件导入AfterEffects中时的注意事项。在将专业图像设计软件的源文件导入AfterEffects中时，还需要注意以下四点。……详见教材【学生】聆听、观察、跟随操作通过教师的讲解和演示，使学生了解AfterEffects的操作界面项目实训（10min）【教师】分析任务，并进行演示【课堂演示】教师演示“导入文件”对话框制作方法步骤1在AfterEffects中新建项目，选择“文件/导入/文件...”菜单项，在弹出的“导入文件”对话框中选择“素材与实例/第4章/案例4-1/中秋节.psd”文件，如图4-10所示。单击“导入”按钮，弹出设置对话框。【课堂演示】教师演示如何基于文件创建合成步骤2在设置对话框中选择导入种类为“合成-保持图层大小”，在图层选项处勾选“合并图层样式到素材”单选钮，然后单击“确定”按钮导入文件，此时在“项目”面板中基于该文件就自动创建了一个合成，如图4-11所示。【课堂演示】教师演示如何导入PSD格式文件为合成后的工作界面效果步骤3双击“项目”面板中自动生成的合成，“合成”窗口中将显示与PSD素材图像相同的效果，并且在“时间轴”面板中列出与PSD文件中图层相对应的图层，如图4-12所示。步骤4选择“文件/保存”菜单项，弹出“另存为”对话框，在其中设置保存位置，输入文件名称，然后单击“保存”按钮保存当前项目。【教师】安排学生完成任务实施，没有掌握操作步骤的学生可以扫描二维码（详见教材）观看操作视频再次学习【教师】巡堂辅导，及时解决学生遇到的问题；安排每组做得最快、最好的学生辅导其他学生进行操作，并解答其遇到的问题通过项目实训使学生掌握导入PSD格式文件为合成的方法，并以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识第2节课交互动效制作基础传授新知

（30min）【教师】讲解新知，边讲解边演示，学生跟随练习4.3交互动效制作基础使用AfterEffects制作交互动效需要用到“时间轴”面板和关键帧，本节将详细讲解“时间轴”面板和关键帧的基础知识及操作方法。4.3.1“时间轴”面板在AfterEffects中制作交互动效的大多数操作都是在“时间轴”面板中完成的，因此想要制作交互动效就要先认识“时间轴”面板。认识“时间轴”面板【多媒体】教师展示“时间轴”面板图片，并进行讲解“时间轴”面板主要分为图层控制区域和时间线区域两大部分，另外还包括时间码、搜索框与合成开关等，如图4-13所示。【多媒体】教师展示列数菜单图片，并进行讲解图层控制区域由13列组成，右键单击列标题栏，在快捷菜单的“列数”子菜单中单击列名称，即可在“时间轴”面板中显示或隐藏列，如图4-14所示。【多媒体】教师展示时间线和时间指示器图片，并进行讲解时间线区域由时间线和时间指示器组成，如图4-15所示。每个图层都有对应的时间线，时间指示器所在的位置称为当前时间，并且会在时间码中显示。【教师】边操作边讲解“时间轴”面板中的主要设置项：A/V设置项2)“转换控制”选项3)父级和链接4)“时间控制”选项【教师】讲解图层基本操作，边讲解边演示，学生跟随练习2.图层基本操作图层是AfterEffects的基础，是构成合成的基本元素，所有的交互动效在编辑时都以图层的方式显示在“时间轴”面板中，如果没有图层，合成就只是一个空壳，而且“时间轴”面板中的选项，以及特效效果也是施加在图层及图层内容中的。因此我们需要掌握图层的基本操作方法。1）基础操作(1)重命名。(2)创建图层。2)选择图层(1)选择图层(2)多选图层(3)选择被遮挡的图层(4)全选(5)反向选择(6)选择标签组(7)选择子图层……详见教材3)改变图层排序【多媒体】教师展示改变图层排序图片，操作并讲解图层排序的不同效果在“时间轴”面板中，按下鼠标左键向上或向下拖动图层，可以改变图层的排序;选中图层后，按快捷键“Ctrl+Alt+↑/↓”可将该图层上移或下移;按快捷键“Ctrl+Alt+Shift+↑/↓”可将图层置顶或置底;选择菜单栏“图层/排列”子菜单中的选项也可以改变图层排序，如图4-16所示。【教师】讲解图层属性，边讲解边演示，学生跟随练习3.图层属性【多媒体】教师展示展开或折叠属性图片，操作并讲解如何展开或折叠属性每个图层都有一个基础属性组，即“变换”属性组，其中包括“锚点”“位置”“缩放”“旋转”和“不透明度”属性。单击图层名称或属性组名称左侧的“>”按钮可展开属性组;单击“〉”按钮可折叠属性组，如图4-17所示。可以通过单击属性名称右侧的蓝色数字并输入数值来设置属性值，也可以通过在蓝色数字上按下鼠标左键并左右拖动来设置属性值。1)“锚点”属性【多媒体】教师展示调整锚点位置图片，操作并讲解如何调整锚点位置“锚点”属性主要用于设置素材的中心点位置。对素材做缩放、旋转、移动等操作时，都是基于素材的中心点进行的。选中图层按快捷键“A”，可以显示该图层的“锚点”属性。选择图层，按快捷键“Ctrl+Alt+Home”可以使该图层中内容的锚点位于图层内容的中心位置。在工具栏中选择“向后平移(锚点)工具”，可以在“合成”窗口中按下鼠标左键拖动锚点，调整锚点位置，如图4-18所示。2)“位置”属性“位置”属性主要用于控制素材在“合成”窗口中的位置。选择图层按快捷键“P”，可以显示该图层的“位置”属性。除设置“位置”属性值外，在工具栏中选择选取工具，在“合成”窗口中按下鼠标左键拖动素材，也可改变素材位置。3)“缩放”属性【多媒体】教师展示拖动控制点缩放素材图片，操作并讲解如何拖动控制点缩放素材“缩放”属性主要用于设置素材在“合成”窗口中的大小，选择图层按快捷键“S”，可以显示该图层的“缩放”属性。除设置“缩放”属性值外，在工具栏中选择选取工具，先在“合成”窗口中选择素材，然后按下鼠标左键拖动素材周围的控制点，也可改变素材大小，如图4-19所示。在按下鼠标左键对素材进行缩放操作时，按住快捷键“Shift”，可使素材等比例缩放。4)“旋转”属性“旋转”属性主要用于设置素材的旋转角度，选择图层按快捷键“R”，可以显示图层的“旋转”属性。除设置“旋转”属性值外，在工具栏中选择旋转工具，在“合成”窗口中选择素材并按下鼠标左键进行拖动，也可改变素材的旋转角度。5)“不透明度”属性“不透明度”属性用于设置图层的不透明度，选择图层按快捷键“T”，可以显示图层的“不透明度”属性。要显示或隐藏属性，还可以使用以下方法:……详见教材【教师】讲解关键帧的相关知识，边讲解边演示，学生跟随练习4.3.2关键帧关键帧是AfterEffects中制作动效的关键，在合适的位置添加关键帧，可以制作出符合实际的动效和动画效果，因此理解关键帧，学习关键帧的操作尤为重要。1.什么是关键帧AfterEffects是通过使图层属性随时间变化而实现动效的。……详见教材2.添加关键帧【多媒体】教师展示添加关键帧图片，操作并讲解如何添加关键帧在“时间轴”面板中，选择要添加关键帧的图层属性，并单击属性名称左侧的“秒表”按钮，即可激活秒表并在当前“时间指示器”的位置添加关键帧，如图4-20所示。也可以在选中图层属性后，选择“动画/添加...关键帧”菜单项，在当前位置添加关键帧。【多媒体】教师展示按钮图片，操作并讲解不同按钮的功能和属性添加关键帧后，该属性的最左侧会出现三个按钮，分别是“转到上一个关键帧”“在当前时间添加或移除关键帧”和“转到下一个关键帧”，如图4-21所示。如果当前“时间指示器”位置有关键帧，单击“在当前时间添加或移除关键帧”按钮，会删除此关键帧，如果当前位置没有关键帧，单击该按钮会添加新关键帧。3.编辑关键帧1)选择关键帧【多媒体】教师展示选中关键帧图片，操作并讲解如何选中关键帧以及选择关键帧的方法。当关键帧被选中时会显示为蓝色，当未被选中时会显示为灰色，如图4-22所示。选择关键帧的方法有以下四种。……详见教材2)删除关键帧3)复制关键帧4)移动关键帧通过教师的讲解和演示，使学生掌握交互动效制作基础随堂练习

（15min）【教师】进行分组，提出问题：5人一组，进行讨论并回答以下问题：（1）“时间轴”面板主要由哪几部分组成，分别需要注意哪些方面？（2）关键帧的主要操作有哪些，如何操作？【学生】思考、讨论、举手发言【教师】与学生简单互动，总结内容等【教师】根据课上教师讲解，随堂巩固练习【学生】完成课上练习任务【教师】巡堂辅导，及时解决学生遇到的问题，总结本节课的要点【学生】聆听、理解随堂练习加深学生对知识点的记忆，锻炼学生的理解和记忆能力第3节课案例练习-制作界面动效实训说明（10min）【教师】介绍项目实训内容，分析任务：本案例制作界面动效，效果如图4-23所示。【多媒体】教师展示界面动效图片，教师分析其最终效果通过实训说明的方式，引入要讲的知识，使学生了解界面动效的制作思路项目实训（35min）【教师】分析任务，并进行演示【课堂演示】教师演示如何设置对话框步骤1在AfterEffects中新建项目，选择“文件/导入/文件...”菜单项，在弹出的“导入文件”对话框中选择“素材与实例/第4章/案例4-2/界面动效素材.psd”，单击“导入”按钮，弹出设置对话框，在其中设置相关选项，如图4-24所示。【课堂演示】教师演示如何在“合成设置”对话框中修改“持续时间”步骤2单击“确定”按钮，导入PSD素材并自动生成合成。在“项目”面板中右键单击生成的合成，在弹出的快捷菜单中选择“合成设置...”，弹出“合成设置”对话框，在其中设置合成名称为“界面动效”，帧速率为25，持续时间为4秒，并单击“确定”按钮完成设置，如图4-25所示。步骤3双击“项目”面板中的合成，在“合成”窗口显示合成效果，并在“时间轴”面板中显示合成中的图层。【课堂演示】教师演示如何给灯笼的“位置”属性添加关键帧步骤4调整灯笼在不同关键帧的位置，制作其从底部向上飘的效果。选择“灯笼”图层，按快捷键“P”显示其“位置”属性，将“时间指示器”移到0秒位置，单击属性名称左侧的“秒表”按钮为该属性添加关键帧;将“时间指示器”移到2秒位置，单击“在当前时间添加或移除关键帧”按钮为该属性添加关键帧;采用同样方法在3秒处添加关键帧，如图4-26所示。【课堂演示】教师演示灯笼在0秒时的位置信息制作方法与效果步骤5单击0秒处的关键帧，使该关键帧处于选中状态，并确保“时间指示器”位于该位置，设置“位置”属性值为“2300，7800”，效果如图4-27所示。使用同样方法将2秒处的“位置”属性值设置为“3500，5000”。步骤6制作小船从左侧移出的效果。选择“小船”图层，按快捷键“P”显示其“位置”属性，在0秒、1秒10帧和2秒20帧处为“位置”属性添加关键帧，设置0秒处的属性值为“-40，7300”，1秒10帧处的属性值为“1000，7600”。【课堂演示】教师演示“小船”图层的关键帧如何设置按快捷键“Shift+S”显示其“缩放”属性，在0秒、1秒10帧和2秒20帧处为“缩放”属性添加关键帧，设置0秒处的属性值为50%，1秒10帧处的属性值为80%，如图4-28所示。【课堂演示】教师演示如何修剪“散光”图层的时间线入点步骤7修改散光、光效、灯笼亮光的不透明度，使亮光呈现一闪一闪的效果。选择“散光”图层，将“时间指示器”移到2秒05帧位置，按下快捷键“Alt+[”，将该图层时间线的入点修剪到当前时间，如图4-29所示。使用同样方法将“光效”图层和“灯笼亮光”图层时间线的入点分别修剪到2秒15帧和2秒10帧处。【课堂演示】教师演示3个图层的关键帧如何设置步骤8分别选中步骤7中的三个图层，并按快捷键“T”显示它们的“不透明度”属性。在2秒05帧、2秒10帧、2秒17帧和3秒05帧处为“散光”图层的“不透明度”属性添加关键帧，从左到右设置其属性值为0%、50%和0%;在2秒15帧、2秒20帧、3秒和3秒10帧处为“光效”图层的“不透明度”属性添加关键帧，设置属性值同上;在2秒10帧和3秒处为“灯笼亮光”图层的“不透明度”属性添加关键帧，并设置2秒10帧处的属性值为0%，如图4-30所示。【课堂演示】教师演示2秒05帧处“标题”和“文本”图层的效果步骤9制作标题和文本从底部移出，并进行跳动和缩放的效果。同时，选中“标题”图层和“文本”图层，将“时间指示器”移到2秒05帧处，按下快捷键“Alt+[”，将所选图层时间线的入点修剪到当前时间，并在当前位置为它们的“位置”属性添加关键帧，按住快捷键“Shift”的同时在“合成”窗口中按下鼠标左键垂直向下拖动两段文本，将它们移至界面底部，如图4-31所示。步骤10选择“标题”图层的“位置”属性，在2秒15帧处添加关键帧，并设置其y值为5856。步骤11选择“标题”图层的“缩放”属性，在2秒15帧、3秒和3秒10帧处添加关键帧，并设置3秒处的属性值为120%。步骤12选择“文本”图层的“位置”属性，在3秒、3秒06帧、3秒10帧、3秒14帧和3秒16帧处添加关键帧，从左到右设置属性的y值为6150、6500、6250、6400和6363。步骤13此时，大致的界面动效就做好了，选择“合成/预览/播放当前预览”菜单项或按“空格键”可预览动效，再次按“空格键”可停止预览动效。步骤14“文本”图层中的文字可以在图表编辑器模式下进行调整，使效果看起来更加和谐。选择“文本”图层的“位置”属性，单击“图表编辑器”按钮，进入图表编辑器模式，单击时间线区域下方的“选择图表类型和选项”按钮，在下拉列表中选择“编辑速度图表”显示速度图表曲线。【课堂演示】教师演示如何给关键帧添加“缓动”效果选择“文本”图层的“位置”属性以选中该属性上的所有关键帧，单击“缓动”按钮，添加“缓动”效果，如图4-32所示。步骤15最后将文件保存。【教师】安排学生完成任务实施，没有掌握操作步骤的学生可以扫描二维码（详见教材）观看操作视频再次学习【教师】巡堂辅导，及时解决学生遇到的问题；安排每组做得最快、最好的学生辅导其他学生进行操作，并解答其遇到的问题通过项目实训使学生掌握界面动效的制作方法，并以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识第4节课蒙版和遮罩互动导入

（5min）【教师】根据预习进行讨论并回答问题：什么是蒙版？创建蒙版常用的工具有哪些？简述蒙版属性面板主要功能。【学生】思考、讨论、举手发言【教师】与学生简单互动，总结内容，引入课程内容通过互动导入，引导学生思考，调动学生的主观能动性传授新知（40min）【教师】根据ppt内容边操作边讲解蒙版的相关知识，学生跟随练习4.4蒙版和遮罩4.4.1认识蒙版蒙版的原理，就是透过蒙版中的图形或轮廓显示出蒙版下方的内容。蒙版依附于图层，与“变换”属性组一样，作为图层的特殊属性存在，不是单独的图层，且一个图层可以包含多个蒙版。【多媒体】教师展示添加圆形蒙版图片，操作并讲解添加蒙版的方法和效果，学生跟随练习【学生】聆听、观察、跟随操作当为某个图层创建蒙版后，图层中位于蒙版范围内的区域会显示出来，位于蒙版范围以外的区域将不被显示，如图4-33所示。因此，蒙版的轮廓形状和范围决定了被看到的图像的形状和范围，而从蒙版中看到的内容取决于图层中的内容。【教师】总结蒙版的操作原理【教师】根据ppt内容讲解创建蒙版的常用工具4.4.2创建蒙版常用工具使用AfterEffects中的工具可以创建各种形状的蒙版。1.形状工具在AfterEffects中，形状工具包括矩形、圆角矩形、椭圆、多边形和星形工具。按快捷键“Q”可以选择和循环切换形状工具，选择形状工具后在“合成”窗口中按下鼠标左键并拖动可绘制相应图形。【多媒体】教师展示选择形状工具后的工具栏图片，操作并讲解不同形状工具的功能以及不同快捷键的不同功能当选中图层为形状图层时，选择形状工具后，会在工具栏中出现“工具创建形状”按钮和“工具创建蒙版”按钮(如图4-34所示)，单击相应按钮并在“合成”窗口中绘制图形可创建形状或蒙版;当所选图层不是形状图层时，使用形状工具绘制的图形会自动转化为当前选中图层的蒙版。使用形状工具按下鼠标左键并拖动绘制图形时，按不同的快捷键有不同的功能。……详见教材【学生】聆听、观察、跟随操作【教师】根据ppt内容讲解钢笔工具的相关知识2.钢笔工具在AfterEffects中，钢笔工具组中包括钢笔工具，添加、删除、转换“顶点”工具和蒙版羽化工具，其中钢笔工具和蒙版羽化工具可以按快捷键“G”选中与切换。在AfterEffects中，钢笔工具的使用方法与AxureRP中钢笔工具的使用方法相同，且使用钢笔工具创建蒙版的方法与上述使用形状工具创建蒙版的方法相同。此外，在绘制时按住快捷键“Shift”可以使当前顶点的控制手柄按45°的倍数改变方向。【多媒体】教师展示“RotoBezier”复选框图片，操作并讲解如何创建不包含控制手柄的形状选择钢笔工具，在绘制之前勾选工具栏中的“RotoBezier”复选框(如图4-35所示)，可创建不包含控制手柄的形状，此时形状顶点的手柄方向和路径的弯度是通过自动计算得出的。【学生】聆听、观察、跟随操作【教师】根据ppt内容讲解蒙版属性的相关知识4.4.3蒙版属性【多媒体】教师展示蒙版属性图片，操作并讲解蒙版属性的不同功能当创建蒙版后，在“时间轴”面板中单击蒙版名称左侧的“>”按钮，可展开蒙版属性，此时“>”按钮变为“〉”按钮，如图4-36所示。通过设置蒙版属性可以对图层蒙版效果进行设置，并且可以为蒙版属性添加关键帧制作出形式多样的蒙版动效。1.蒙版路径蒙版路径用于控制蒙版的图形形状和范围。为方便识别，在“合成”窗口中绘制的蒙版路径是有颜色的，并且在“时间轴”面板中该蒙版名称左侧会显示与蒙版路径相同的颜色。【多媒体】教师展示“蒙版形状“对话框图片，操作并演示如何改变蒙版的形状和大小。单击“蒙版路径”属性右侧的“形状...”文字，弹出“蒙版形状”对话框，在其中可以改变蒙版路径的形状与大小，如图4-37所示;在工具栏中选择选取工具，单击选择图层控制区域的图层名称，可以在“合成”窗口中按下鼠标左键并拖动蒙版路径的“顶点”改变蒙版路径的形状;单击选择蒙版名称，可以在“合成”窗口中按下鼠标左键并拖动蒙版路径，改变蒙版路径的位置;双击蒙版形状的边框显示其变换框，按下鼠标左键拖动变换框可以改变蒙版路径的形状和大小。【学生】聆听、观察、跟随操作【教师】根据ppt内容讲解蒙版羽化的相关知识2.蒙版羽化使用蒙版羽化可以实现更为自然的融合效果，在默认情况下，羽化宽度跨蒙版边缘，一半在内一半在外。选择添加蒙版的图层后按快捷键“F”，可显示已添加蒙版图层的“蒙版羽化”属性;修改“蒙版羽化”右侧的蓝色数字可以按比例设置羽化值;单击“约束比例”按钮，可以锁定或解除水平和垂直方向的约束比例，分别设置水平和垂直方向的羽化值。【多媒体】教师展示羽化效果对比图图片，操作并讲解如何使用羽化功能以及羽化后的效果对比。未设置羽化效果和设置了羽化效果的对比如图4-38所示。【学生】聆听、观察、跟随操作【教师】根据ppt内容讲解新知3.蒙版不透明度【多媒体】教师展示蒙版不透明度效果图片，操作并讲解如何设置蒙版不透明度蒙版不透明度用于设置蒙版的不透明度，设置不透明度为50%的蒙版效果如图4-39所示。4.蒙版扩展【多媒体】教师展示蒙版扩展和收缩效果图片，操作并讲解如何进行蒙版扩展“蒙版扩展”属性用于扩展或收缩受蒙版影响的区域，实际指的就是蒙版区域与蒙版路径的距离，是一个偏移量，当数值为“正”时，蒙版区域扩展;数值为“负”时，蒙版区域收缩，如图4-40所示。5.反转【多媒体】教师展示蒙版“反转“效果图片，操作并讲解如何设置蒙版“反转“效果选择“反转”复选框后，可以反转当前蒙版的形状和路径区域，效果如图4-41所示。6.蒙版模式【多媒体】教师展示选择蒙版模式图片，操作并讲解如何选择蒙版模式以及各个蒙版模式的功能和应用效果蒙版模式用于控制图层中的蒙版与其上方蒙版之间的交互方式，仅作用于同一图层上的不同蒙版之间。在默认情况下，所有蒙版均设置为“相加”，此外，还包括“无”“相减”“交集”“变亮”“变暗”“差值”，可以从“时间轴”面板中的蒙版名称右侧的下拉列表中选择蒙版模式，如图4-42所示。下面简述各个蒙版模式的功能和应用效果。【多媒体】教师展示无图片，操作并进行讲解(1)无:蒙版对图层没有直接影响，如图4-43所示。对蒙版添加“填充”“描边”等效果时可以选择该模式。【多媒体】教师展示相加图片，操作并进行讲解(2)相加:与上方蒙版叠加后的效果，如图4-44所示。【多媒体】教师展示相减图片，操作并进行讲解(3)相减:从上方蒙版的效果中减去该蒙版的效果，如图4-45所示。【多媒体】教师展示交集图片，操作并进行讲解(4)交集:仅在与上方蒙版的相交区域中产生蒙版效果，如图4-46所示。(5)变亮、变暗和差值模式只对蒙版的不透明度产生影响。【学生】聆听、观察、跟随操作通过教师的讲解和操作，使学生掌握蒙版和遮罩的相关知识第5节课项目实训—制作蒙版位移动效实训说明（10min）【教师】介绍项目实训内容，分析任务本案例制作蒙版位移动效，效果如图4-47所示。该动效是通过为文字添加蒙版并为“蒙版路径”属性和图层的“位置”属性添加关键帧实现的。【课堂演示】教师展示蒙版位移动效图片，教师分析其最终效果通过实训说明的方式，引入要讲的知识，使学生了解蒙版位移动效的制作思路项目实训（35min）【教师】分析任务，并进行演示【课堂演示】教师演示“导入文件”对话框制作方法步骤1在AfterEffects中新建项目，单击“合成”窗口中的“从素材新建合成”按钮，弹出“导入文件”对话框，先在其中选择“素材与实例/第4章/案例4-3/启动页.jpg”;然后单击“导入”按钮，导入素材并自动创建合成，如图4-48所示。【课堂演示】教师演示如何新建文本图层步骤2在工具栏中选择直排文字工具，在“合成”窗口中单击，输入“恭贺新春”，此时在“时间轴”面板中会新建文本图层，如图4-49所示。【课堂演示】教师演示如何进行文本设置步骤3选中文字，在“字符”面板中设置字体为“文鼎CS大宋”，字体大小为190像素，颜色为黄色“#FFDD88”，字符间距为112，水平缩放为90%，如图4-50所示。选择文本图层，先按快捷键“Ctrl+Alt+Home”使文本的锚点位于其中心位置，然后设置文本图层“变换”属性组中的“位置”属性值为“272，548”。【课堂演示】教师演示如何绘制矩形蒙版步骤4在工具栏中选择矩形工具，确保文本图层为选中状态，在“合成”窗口的文本框左上角按下鼠标左键并向右下方拖动绘制矩形蒙版，使矩形蒙版完全遮盖文本，如图4-51所示。步骤5先在“时间轴”面板中单击文本图层左侧的“〉”按钮折叠图层属性，然后依次按快捷键“M”和“Shift+P”，同时显示图层的“蒙版路径”属性和“位置”属性，将“时间指示器”移到1秒15帧位置，依次单击这两个属性名称左侧的“秒表”按钮添加关键帧。【课堂演示】教师演示如何拖动蒙版路径步骤6将“时间指示器”移到15帧位置，为“蒙版路径”属性和“位置”属性添加关键帧，设置“位置”属性的x值为92，在工具栏中选择选取工具，在“合成”窗口中双击蒙版路径，然后在文本框左侧边框中心按下鼠标左键向右拖动蒙版路径，直至文字完全消失，如图4-52所示。【课堂演示】教师演示如何为所选关键帧添加“缓动”效果步骤7同时选中1秒15帧处的两个关键帧，单击“图表编辑器”按钮，进入图表编辑器模式，单击时间线区域下方的“缓动”按钮，为其添加“缓动”效果，如图4-53所示。步骤8最后将文件保存。【教师】安排学生完成任务实施，没有掌握操作步骤的学生可以扫描二维码（详见教材）观看操作视频再次学习【教师】巡堂辅导，及时解决学生遇到的问题；安排每组做得最快、最好的学生辅导其他学生进行操作，并解答其遇到的问题通过项目实训使学生掌握蒙版位移动效的制作方法，并以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识第6节课轨道遮罩传授新知（10min）【教师】根据ppt内容边操作边讲解初识轨道遮罩，学生跟随练习4.4.4轨道遮罩轨道遮罩可以使一个图层的内容透过另一个图层定义的形状显现出来，是一个单独的图层，且只能应用于下方图层，如果想应用于多个图层，需要将多个图层进行预合成。知识链接如果要对合成中已有的图层进行分组，可以对这些图层进行预合成。进行预合成的图层会被放置在新的合成中，并且该预合成将替换原始合成中的图层列于“时间轴”面板中。可以将预合成作为单个图层在其他合成中使用，并对其进行各种操作。【课堂演示】教师展示“预合成”对话框图片，操作并讲解预合成对话框的相关功能和设置在“时间轴”面板中选择所需图层，选择“图层/预合成...”菜单项或者按快捷键“Ctrl+Shift+C”，在弹出的“预合成”对话框中输入合成名称，并进行相关设置，然后单击“确定”按钮即可将所选图层合并为预合成，如图4-54所示。【教师】重点讲解制作轨道遮罩需要执行的操作：(1)首先确保在“时间轴”面板中的“模式”列可见。如不可见，可在“时间轴”面板中右键单击列的标题栏，并在弹出的快捷菜单中选择“列数/模式”显示该列。(2)在“时间轴”面板中拖动图层，确保作为轨道遮罩的图层位于要显示内容的图层上方。【课堂演示】教师展示“TrkMat”下拉列表图片，操作并讲解“TrkMat”下拉列表中的每个选项(3)在下方图层的“TrkMat”下拉列表中选择任一选项，定义遮罩类型，如图4-55所示。其中，Alpha遮罩，是利用素材Alpha通道创建轨道遮罩;Alpha反转遮罩，是反转素材的Alpha通道创建轨道遮罩;亮度遮罩，是利用素材的亮度创建轨道遮罩;亮度反转遮罩，是反转素材的亮度通道创建轨道遮罩。(4)此时，软件会将上方的图层自动转换为轨道遮罩，并在轨道遮罩图层名称左边显示图标。通过教师的讲解和演示，使学生掌握轨道遮罩的相关知识实训说明（10min）【教师】介绍项目实训内容，分析任务本案例制作文字遮罩动效，效果如图4-56所示。该动效是通过设置图层的“TrkMat”模式来制作轨道遮罩而实现的。通过实训说明的方式，引入要讲的知识，使学生了解文字遮罩动效的制作思路项目实训（25min）【教师】分析任务，并进行演示【课堂演示】教师演示如何导入文件步骤1在AfterEffects中新建项目，单击“合成”窗口中的“从素材新建合成”按钮，弹出“导入文件”对话框，在其中先选择“素材与实例/第4章/案例4-4/4-4-1.jpg”，然后单击“导入”按钮，导入素材并自动创建合成，如图4-57所示。【课堂演示】教师演示如何新建文本图层步骤2在工具栏中选择横排文字工具，在“合成”窗口中的头像下方单击，输入“中国航天梦”，此时在“时间轴”面板中会新建文本图层，如图4-58所示。【课堂演示】教师演示文本如何设置步骤3选中文字，在“字符”面板中设置字体为“Adobe黑体Std”，字体大小为550像素，颜色为白色，并将其放置于合适位置，如图4-59所示。【课堂演示】教师演示如何设置渐变色步骤4在不选择任何图层的情况下，在工具栏中选择矩形工具，先按住快捷键“Alt”的同时重复单击填充色块，使填充类型变为线性渐变，之后再次单击填充色块，在弹出的“渐变编辑器”对话框中的渐变条上方和下方的中间分别单击，添加一个不透明度色标和一个色标;然后设置3个色标的颜色均为蓝色“#6181BC”，中间不透明度色标的不透明度为100%，两侧不透明度色标的不透明度为0%;最后单击“确定”按钮，如图4-60所示。使用同样方法设置描边颜色为无。【课堂演示】教师演示如何绘制矩形步骤5在文本左上角按下鼠标左键并向右拖动绘制矩形，使矩形完全遮盖文本，如图4-61所示。【课堂演示】教师演示如何调整渐变效果按快捷键“V”选择选取工具，此时刚绘制的矩形中间会显示渐变的起点和终点，分别选中起点和终点，按下鼠标左键并分别向左上方和右下方拖动改变渐变的起止点，如图4-62所示。【课堂演示】教师演示如何创建关键帧并移动矩形步骤6选中形状图层，按快捷键“P”显示其“位置”属性，在0秒的位置为该属性添加关键帧，在“合成”窗口中按快捷键“Shift”的同时按下鼠标左键水平向左拖动矩形到左侧画面外，如图4-63所示。【课堂演示】教师演示如何向右拖动矩形步骤7将“时间指示器”移动到2秒位置，为“位置”属性添加关键帧，并在“合成”窗口中按住快捷键“Shift”的同时按下鼠标左键向右拖动矩形到右侧画面外，如图4-64所示。【课堂演示】教师演示“时间轴”面板制作方法步骤8在“时间轴”面板中，按下鼠标左键向下拖动形状图层到文本图层下方，设置形状图层的“TrkMat”模式为“Alpha遮罩‘...’”，使文本图层中的文字轮廓成为形状图层的遮罩。选中文本图层，先按快捷键“Ctrl+D”复制一个图层副本;然后拖动复制的图层到形状图层下方，并单击图层左侧的“视频”按钮显示图层中的文本内容，如图4-65所示。步骤9在“项目”面板中选择“4-4-1”合成，将“时间指示器”移到2秒位置，按快捷键“N”使工作区的结束时间移至当前时间，选择“合成/将合成裁剪到工作区”菜单项，将所选合成的持续时间裁剪成2秒01帧。【课堂演示】教师演示如何设置工作区步骤10单击“时间轴”面板中的“图表编辑器”按钮，进入图表编辑器模式，选择形状图层“变换”属性组中的“位置”属性以选中该属性中的所有关键帧，单击“缓动”按钮添加“缓动”效果，如图4-67所示。步骤11最后将文件保存。【教师】安排学生完成任务实施，没有掌握操作步骤的学生可以扫描二维码（详见教材）观看操作视频再次学习【教师】巡堂辅导，及时解决学生遇到的问题；安排每组做得最快、最好的学生辅导其他学生进行操作，并解答其遇到的问题通过项目实训使学生掌握文字遮罩动效的制作方法，并以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识第7节课交互动效的预览、渲染和导出互动导入

（5min）【教师】根据预习提出问题：交互动效的主要功能有哪些？【学生】思考、讨论、举手发言【教师】与学生简单互动，总结内容，引入课程内容通过互动导入，引导学生思考，调动学生的主观能动性传授新知（35min）【教师】根据ppt内容边操作边讲解预览动效的相关知识，学生跟随练习4.5.1预览动效【多媒体】教师展示“预览”面板图片，操作并讲解如何打开预览图片使用预览功能可以随时查看动效。单击“预览”面板中的►按钮(如图4-68所示)，按“空格键”，或选择“合成/预览/播放当前预览”菜单项，均可预览动效。单击“预览”面板中的■按钮，再次按“空格键”，或按快捷键“Esc”均可退出预览模式。【学生】聆听、观察、跟随操作【教师】根据ppt内容边操作边讲解渲染和导出动效的相关知识，学生跟随练习4.5.2渲染和导出动效1.使用“渲染队列”面板渲染和导出动效在AfterEffects中，主要通过“渲染队列”面板渲染和导出动效。使用“渲染队列”面板可以成批渲染多个项目。【多媒体】教师展示“渲染列队”面板图片，操作并讲解渲染列队面板的各项功能和参数设置......详见教材上面介绍了采用默认设置输出动效的方法，如果想要设置渲染动效的帧速率、分辨率等，可在“渲染队列”面板中进行设置。(1)渲染设置【多媒体】教师展示“输出模块设置”对话框图片，操作并讲解输出模块设置对话框的各项功能和参数(2)输出模块(3)输出到(4)渲染项状态1）未加入队列:表示渲染项已添加到“渲染队列”面板中，但不能渲染。【多媒体】教师展示将渲染项状态设置为已加入队列图片，并进行讲解2）已加入队列:表示渲染项可以渲染。勾选相应渲染项“渲染”列的复选框，可使渲染项的状态由未加入队列变为已加入队列，如图4-71所示。3）完成:指渲染项已完成渲染。【学生】聆听、观察、跟随操作【教师】根据ppt内容边操作边讲解使用Photoshop将动效输出为GIF文件的相关知识，学生跟随练习2.使用Photoshop将动效输出为GIF文件GIF格式的动画文件支持透明效果，占用空间小，不会损坏图片和视频质量，还可以循环播放动画，并且大多数网络浏览器和图像浏览软件都支持该文件格式，方便查看动效，也有利于在网络中进行传播与分享。在AfterEffects中无法直接导出GIF格式的动画文件，需要将该软件中导出的其他格式的视频文件导入Photoshop中，然后再输出为GIF格式。【多媒体】教师展示“存储为web所用格式”对话框图片，操作并讲解如何使用Photoshop将动效输出为GIF文件......详见教材通过教师的讲解和演示，使学生掌握预览动效的相关知识点课堂小结

（5min）【教师】简要总结本节课的要点本章介绍了AfterEffects的基础知识，包括软件的工作界面、基本操作、素材的导入与合成、交互动效的渲染和导出。希望通过本章的学习，读者可以了解制作交互动效和动画的原理，并能使用AfterEffects制作出简单的交互动效与动画效果。【学生】总结回顾知识点总结知识点，巩固学生对流程图相关知识的印象第8节课项目实训—制作波形充电效果佳作赏析（10min）【教师】讲