《UI视觉设计案例教程》348-7（李爱平）教案 第六章 常见 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

课题第六章常见UI交互动效设计与实现(下)课时6课时（270min）教学目标知识技能目标：（1）了解文字、界面加载和界面转场交互动效的基础知识。（2）掌握使用AfterEffects制作文字、界面加载和界面转场交互动效的方法和技巧。（3）掌握使用AfterEffects制作动画的方法与技巧。思政育人目标：（1）紧跟时代潮流，培养自身的创新意识和实践能力。（2）加强基础知识的学习，不断进行实践练习，从而实现从量变到质变的转化。教学重难点教学重点：文字、界面加载和界面转场交互动效的基础知识教学难点：文字、界面加载、界面转场交互动效和动画的方法和技巧教学方法问答法、讨论法、讲授法、实训法、演示法教学用具电脑、投影仪、多媒体课件、教材教学设计教学过程主要教学内容及步骤设计意图第1节课文字动效课前任务【教师】布置课前任务，提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请大家预习本任务的相关知识点。【学生】完成课前任务通过课前任务，使学生了解本次课的重要性，增加学生的学习兴趣考勤

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

（3min）【教师】介绍本章节大致内容，导入课题常见的UI交互动效除上一章介绍的图标、按钮和导航栏外，还有文字动效、界面加载交互动效、界面转场交互动效和AfterEffects动画。本章将逐个介绍它们的表现形式及设计方法，并通过案例制作使读者掌握它们的制作方法，进一步理解什么是交互动效设计，开阔思维，提高实践能力。【学生】聆听、互动通过新章预热，让学生了解本章节的大致内容和考核要求传授新知

（10min）【教师】提出以下问题：大家使用过的app有哪些文字动效形式？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识，讲解文字动效的表现形式等相关知识6.1文字动效文字是界面交互设计中最常见的动效对象之一。文字动效可用于强调关键词和重要信息，使内容表达更清晰、更简洁、更具冲击力，便于用户更好地理解信息。常见文字动效的表现形式文字动效的制作方法和表现形式与界面中的其他元素相似，大多是通过改变文字属性，为文字添加蒙版、遮罩和各种效果来实现的。下面介绍几类常见的文字动效表现形式。1.基础文字动效【多媒体】教师展示基础文字动效图片，并进行讲解基础文字动效是指基于文字的基础属性所制作的动效，如文字的放大与缩小效果、位置的移动，以及不透明度的变化等都属于基础文字动效。文字动效可以是针对单个字词的，也可以是针对一段完整文本的。如图6-1所示的动效是通过改变文本中每个字符的位置，使文字从左向右移动，制作出拉伸的文字动效。2.文字遮罩与蒙版动效【多媒体】教师展示文字遮罩与蒙版动效图片，并进行讲解文字遮罩与蒙版动效就是通过对文字或图形元素添加遮罩与蒙版效果而制作出的文字动效，这类动效往往可以使用简单的元素制作出丰富的、具有冲击力的效果。如图6-2所示的动效通过对矩形添加遮罩或蒙版效果，使矩形在文字上方左右移动来显示部分文字，最后将矩形拉伸使之覆盖文字，以显示出文字全貌。3.基于路径的文字动效【多媒体】教师展示沿文字路径生成动效图片，并进行讲解基于路径的文字动效可以以文字本身为路径，使线段沿路径运行，最后生成文字。如图6-3所示的动效使不同颜色的文字描边沿路径运行，最终生成文字，使得其动效绚丽多彩。【多媒体】教师展示基于路径的文字动效图片，并进行讲解基于路径的文字动效也可以是对其他元素做路径动画，最后显示出文字内容。如图6-4所示的动效，首先使粒子围绕圆形路径运动，并逐渐向中心汇聚;然后从中心向四周扩散，逐渐显示出文字内容。4.文字特效动画【多媒体】教师展示粒子插件制作的流动文字动画图片，并进行讲解文字特效动画是指为文字添加各种效果，使文字内容与各种效果相结合而形成的动效(如图6-5所示)，如粒子效果、光晕与光效效果和闪电效果等。AfterEffects中有各种内置效果，直接将其应用到文字上即可快速地制作出各种酷炫的、富有视觉冲击力的文字动画。【学生】聆听、理解通过教师的讲解和演示，使学生掌握文字动效的表现形式实训说明（5min）【教师】介绍项目实训内容，分析任务：本案例带领读者制作一个赛博朋克风格的文字转换动效，其效果如图6-6所示。该动效主要是使用AfterEffects中的内置效果及3D图层来实现的，其中主要用到了“卡片擦除”效果、“复合模糊”效果、“快速方框模糊”效果，以及“四色渐变”效果。【多媒体】展现文字转换动效效果图片，教师分析其最终效果通过实训说明的方式，引入要讲的知识，使学生了解赛博朋克风格的文字转换特效的制作思路项目实训（25min）【教师】分析任务，并进行演示【课堂演示】教师演示文字转换动效制作方法步骤1在AfterEffects中新建项目，选择“合成/新建合成...”菜单项，弹出“合成设置”对话框，在其中进行相关设置，然后单击“确定”按钮新建合成，如图6所示。【课堂演示】教师演示“合成设置”对话框制作方法步骤2在工具栏中选择横排文字工具，在“合成”窗口中单击，输入“SHADOW”，选中文字，在“字符”面板中设置字体为“Captureit”，字体大小为220像素，颜色为蓝色“#80DEF9”，设置锚点位于其中心位置，并使文本居中显示。步骤3先将文本图层重命名为“文本1”，按快捷键“Ctrl+D”复制一个图层副本，双击复制的图层，进入文本编辑模式，输入“SUNSHINE”，设置锚点位于其中心位置，在“字符”面板中设置颜色为粉紫色“#EF6EFB”，使文本居中显示;然后隐藏复制图层的内容。【课堂演示】教师演示如何设置“过渡完成”属性值步骤4选择“文本1”图层，选择“效果/过渡/卡片擦除”菜单项，添加“卡片擦除”效果。将“时间指示器”移到0秒位置，在“效果控件”面板中单击“过渡完成”属性左侧的“秒表”按钮添加关键帧，设置属性值为0%，如图6-8将“时间指示器”移到2秒位置，在“效果控件”面板中设置“过渡完成”属性值为100%，此时在“时间指示器”位置会自动为该属性添加关键帧。【课堂演示】教师演示如何设置“文本1”图层转换后的背面图层步骤5在“效果控件”面板中单击“背面图层”右侧“2.文本1”文本框的下拉按钮，在下拉列表中选择“1.文本2”，如图6-9所示。此时，便完成了文字转换动效的制作，接下来设置“卡片擦除”效果中的相应属性值，使文字过渡效果更加细腻、丰富。【课堂演示】教师演示如何设置“卡片擦除”效果中的属性值并添加关键帧步骤6在“效果控件”面板中设置“行数”和“列数”属性值分别为20和50，“随机时间”属性值为0.6，并单击“位置抖动”左侧的“>”按钮展开属性组。将“时间指示器”移到0秒位置，单击“z抖动量”左侧的“秒表”按钮添加关键帧，将“时间指示器”移到1秒位置，设置“z抖动量”属性值为15，将“时间指示器”移到2的位置，设置“z抖动量”属性值为0，使文字抖动复原，如图6-10所示。【课堂演示】教师演示如何设置“填充”效果颜色步骤7选择“文本1”图层，按快捷键“Ctrl+D”复制一个图层副本。选择“文本3”图层，为其添加“填充”效果，在“效果控件”面板中设置填充颜色为黄色“#FFD71D”，如图6-11所示。按快捷键“Ctrl+Alt+Shift+↓”将图层置底。【课堂演示】教师演示1秒处的属性值与文字效果制作方法步骤8选择“文本3”图层，将“时间指示器”移到0秒位置，在“效果控件”面板中为“位置抖动”属性组中的“x抖动量”属性和“y抖动量”属性添加关键帧;将“时间指示器”移到1秒位置，设置属性值都为2，如图6-12所示;将“时间指示器”移到2秒位置，设置属性值都为0。【课堂演示】教师演示0秒处的关键帧属性值制作方法步骤9取消选中图层，先右键单击图层控制区域的空白处，在弹出的快捷菜单中选择“新建/调整图层”，新建调整图层;然后选择“效果/风格化/发光”菜单项，为图层添加“发光”效果。将“时间指示器”移到0秒位置，在“效果控件”面板中为“发光阈值”属性和“发光半径”属性添加关键帧，并设置属性值分别为100%和0，如图6-13所示。【课堂演示】教师演示15秒处的文字效果和关键帧属性值制作方法步骤10选择调整图层，按快捷键“U”显示已添加关键帧的属性，在15帧处为它们添加关键帧并设置属性值分别为70%和66(如图6-14所示)，在1秒20帧处添加关键帧，属性值不变，在2秒处添加关键帧，设置属性值分别为100%和0。【课堂演示】教师演示“预合成”对话框制作方法步骤11同时选中上述创建的4个图层，先右键单击选中图层，在弹出的快捷菜单中选择“预合成...”，弹出“预合成”对话框，在其中设置相关选项;然后单击“确定”按钮，生成预合成，如图6-15所示。步骤12右键单击图层控制区域的空白处，先在弹出的快捷菜单中选择“新建/纯色...”，弹出“纯色设置”对话框，在其中设置名称为“背景”;然后单击“确定”按钮新建纯色图层。【课堂演示】教师演示如何为“背景”图层添加“四色渐变”效果步骤13先选择“背景”图层;再选择“效果/生成/四色渐变”菜单项，为其添加“四色渐变”效果，在“效果控件”面板中分别设置4个点的颜色;然后在“合成”窗口中按下鼠标左键分别拖动点到合适位置，并设置“混合”属性值为548，如图6-16所示。选择“背景”图层并按快捷键“Ctrl+Alt+Shift+↓”将图层置底。步骤14选择“合成/新建合成...”菜单项，弹出“合成设置”对话框，先在其中设置合成名称为“地面纹理”，然后单击“确定”按钮新建合成。右键单击图层控制区域的空白处，在弹出的快捷菜单中选择“新建/纯色...”，弹出“纯色设置”对话框，设置名称为“纹理”，然后单击“确定”按钮新建纯色图层。【课堂演示】教师演示“分形杂色”效果制作方法步骤15先选择“纹理”图层;再选择“效果/杂色和颗粒/分形杂色”菜单项，为其添加“分形杂色”效果，在“效果控件”面板中单击“分形类型”右侧的下拉按钮，在下拉列表中选择“涡旋”;然后设置“对比度”属性值为130，“亮度”属性值为-30，如图6-17所示。【课堂演示】教师演示如何设置“纹理”图层属性值步骤16先单击“纹理”图层的“3D图层”按钮;然后按快捷键“R”显示其“旋转”属性，设置“x轴旋转”属性值为-90°，如图6-18所示。【课堂演示】教师演示如何拖动“纹理”图层到界面底端步骤17在“合成”窗口中，按住快捷键“Shift”的同时按下鼠标左键垂直向下拖动纹理至界面底端，如图6-19所示。【课堂演示】教师演示如何选中y轴向上拖动步骤18先按快捷键“S”显示“缩放”属性，单击属性名称右侧的“约束比例”按钮;然后设置x轴、y轴、z轴的属性值分别为350%、650%、450%，在“合成”窗口选中y轴，按下鼠标左键向上拖动到合适位置，其效果如图6-20所示。【课堂演示】教师演示倒影在“合成”窗口中的效果制作方法步骤19先在“项目”面板中双击“文字转换动效”合成;然后按下鼠标左键拖动“地面纹理”合成至“时间轴”面板中，使其位于“文字转换”预合成下方。先将“时间指示器”移到0秒位置，选中“文字转换”预合成，按快捷键“Ctrl+D”复制一个预合成副本，将位于下方的预合成重命名为“倒影”，单击“倒影”预合成的“3D图层”按钮;然后设置“x轴旋转”属性值为120°，并在“合成”窗口中按下鼠标左键向下拖动倒影到合适位置，如图6-21所示。【课堂演示】教师演示各图层间的排序方法步骤20右键单击图层控制区域的空白处，在弹出的快捷菜单中选择“新建/调整图层”，新建调整图层，在“时间轴”面板中调整图层排序，并隐藏“地面纹理”合成中的内容，效果如图6-22所示。选择调整图层，选择“效果/模糊和锐化/复合模糊”菜单项，添加“复合模糊”效果。【课堂演示】教师演示“复合模糊”效果制作方法步骤21在“效果控件”面板中单击“模糊图层”右侧的“3.调整图层2”下拉按钮，在下拉列表中选择“2.地面纹理”，设置“最大模糊”属性值为30，如图6-23所示。【课堂演示】教师演示“快速方框模糊”效果制作方法步骤22选择“倒影”预合成，选择“效果/模糊和锐化/快速方框模糊”菜单项，添加“快速方框模糊”效果，在“效果控件”面板中设置“模糊半径”属性值为3，如图6-24所示。步骤23最后将文件保存。【教师】安排学生完成任务实施，没有掌握操作步骤的学生可以扫描二维码（详见教材）观看操作视频再次学习【教师】巡堂辅导，及时解决学生遇到的问题；安排每组做得最快、最好的学生辅导其他学生进行操作，并解答其遇到的问题通过实操练习使学生掌握文字转换动效制作方法，并以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识第2节课界面交互动效传授新知

（10min）【教师】提出以下问题：大家在浏览网页、玩游戏、使用手机应用时，什么类型的页面等待加载不会觉得无聊与焦虑？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识，讲解界面交互动效的相关知识6.2界面交互动效6.2.1界面加载交互动效在浏览网页、玩游戏、使用手机应用时，由于网速或设备硬件问题，难免会遇上等待加载的情况。没人喜欢等待，耐心差的用户可能会因为得不到反馈而直接关闭界面。添加一个加载动效就可以在很大程度上缓解用户等待时的无聊与焦虑情绪，给用户明确提示，让用户知晓目前的状态，并改变用户对于时间的感知，通过转移注意力的方式降低用户等待时的消极情绪。加载动效作为强化用户印象的组件，不仅可用于界面转场或加载数据的过程中，也可用于界面崩溃或出错时，将错误和等待转化为令用户愉悦的细节。总之，加载动效是打造用户优秀体验的必要组件，优秀的加载动效除了要传达正确的信息外，还要充满趣味性，以吸引用户留在当前页面。下面简单介绍一下常见加载动效的表现形式，希望读者可以在其基础上进行创新。1.进度条式加载动效【多媒体】教师展示常见进度条式加载动效图片和添加小动画的矩形式加载动效图片，并进行讲解进度条式加载动效用于显示当前任务处理的进度，以及完成任务大概所需的时间，如视频下载和播放进度。该加载动效一般用于较长时间的加载，通常配合百分比数目，让用户对加载进度和剩余时间有明确的心理预期。在进度条式加载动效中，最常见的是直线进度条，一般有长条矩形和圆形两种形式，其设计方法相对简单，但设计时要注意与界面风格相匹配，如图6-25所示。还有一些进度条加载动效在直线进度条的基础上添加了小动画，表明进度的同时还增添了趣味性，如图6-26所示。2.旋转式加载动效【多媒体】教师展示旋转式加载动效图片，并进行讲解旋转式加载动效模仿时钟顺时针旋转，不停地旋转不仅能吸引用户眼球，还能给用户一种时间快速流逝，快速加载的感觉，如图6-27所示。这类加载动效常用于时间较短的加载中，如果长时间一直旋转而不加载新界面的话，容易使用户焦虑。3.动画式加载动效【多媒体】教师展示动画式加载动效图片，并进行讲解动画式加载动效就是以生动的动画形象进行展示的加载动效，如图6-28所示。在使用动画式加载动效时，要注意添加的动画形象与产品的整体风格相吻合，以提高产品辨识度。另外，在制作时要注意动画的流畅度，给用户舒适、有趣的体验。通过教师的讲解和演示，使学生掌握界面交互动效的分类实训说明（5min）【教师】介绍项目实训内容，分析任务：【多媒体】教师展示进度条加载动效图片，分析其最终效果进度条式加载动效可以明确地显示当前加载进度，有效提升用户体验，是交互设计中较为常见的一种加载动效。本案例带领读者完成进度条加载动效的制作，使读者对该类加载动效制作有一个简单的了解，其效果如图6-29所示。该动效主要通过“线性擦除”效果，使进度条从左到右发生变化，并通过“编号”效果使表示加载进度的百分比数值随进度条变化而递增。通过实训说明的方式，引入要讲的知识，使学生了解进度条加载动效的制作思路项目实训（30min）【教师】分析任务，并进行演示【课堂演示】教师演示“合成设置”对话框制作方法步骤1先在AfterEffects中新建项目，选择“合成/新建合成...”菜单项，弹出“合成设置”对话框，在其中进行相关设置;然后单击“确定”按钮新建合成，如图6-30所示。【课堂演示】教师演示如何设置“描边”图层属性值步骤2右键单击图层控制区域的空白处，在弹出的快捷菜单中选择“新建/形状图层”创建图层，并将其重命名为“描边”。先在工具栏中选择矩形工具，设置填充为无，描边颜色为白色，描边宽度为5;然后在“合成”窗口中绘制一个“大小”属性值为“1125，100”的矩形，设置锚点位于其中心位置，“圆度”属性值为60，并使矩形居中显示，如图6-31所示。步骤3选择“描边”图层，按快捷键“Ctrl+D”复制一个图层副本，将复制的图层重命名为“填充”，设置“填充”图层中矩形的填充颜色为蓝色“#8DAEE4”，描边为无。【课堂演示】教师演示如何添加“位移路径”属性组步骤4选择“填充”图层的“内容”属性，单击该属性右侧的按钮，在弹出的菜单中选择“位移路径”，添加“位移路径”属性组，设置“内容/位移路径”属性组中的“数量”属性值为-10，如图6-32所示。步骤5选择“填充”图层，选择“效果/过渡/线性擦除”菜单项，为其添加“线性擦除”效果，在“效果控件”面板中设置“擦除角度”属性值为-90°。【课堂演示】教师演示0秒处的关键帧属性值制作方法步骤6将“时间指示器”移到0秒位置，在“效果控件”面板中为“过渡完成”属性添加关键帧并设置属性值为80%，如图6-33所示;将“时间指示器”移到3秒位置，设置“过渡完成”属性值为21%，此时便完成了进度条动效的制作。步骤7右键单击图层控制区域的空白处，在弹出的快捷菜单中选择“新建/纯色...”，弹出“纯色设置”对话框，在其中设置名称为“数字”，然后单击“确定”按钮新建纯色图层。【课堂演示】教师演示“编号”对话框制作方法步骤8先选择“效果/文本/编号”菜单项，弹出“编号”对话框，在其中设置相关选项;然后单击“确定”按钮添加“编号”效果，如图6-34所示。在“效果控件”面板中设置“格式”属性组中的“小数位数”属性值为0，“填充和描边”属性组中的“位置”属性值为“922，414”，填充颜色为白色，“大小”属性值为66。【课堂演示】教师演示“数值/位移/随机最大”属性的关键帧如何设置步骤9将“时间指示器”移到0秒位置，在“效果控件”面板中为“数值/位移/随机最大”属性添加关键帧;将“时间指示器”移到3秒位置，设置“数值/位移/随机最大”属性值为100，如图6-35所示。此时进行预览，可以看到表示加载进度的百分比数值会从0增加到100。【课堂演示】教师演示百分号在“合成”窗口中的位置操作方法步骤10先在工具栏中选择横排文字工具;然后在“合成”窗口中单击，输入“%”并将其选中;再在“字符”面板中设置字体大小为80，颜色为白色，字体为“仿宋”，并设置锚点位于其中心位置;最后设置图层的“位置”属性值为“1020，418”，如图6-36所示。步骤11选择“%”图层，按快捷键“Ctrl+D”复制一个图层副本，双击复制的图层，输入“Loading”，设置锚点位于其中心位置，并设置图层的“位置”属性值为“960，684”。【课堂演示】教师演示5帧处的“源文本”属性关键帧如何设置及其文本效果步骤12将“时间指示器”移到0秒位置，为“Loading”图层下“文本”属性组中的“源文本”属性添加关键帧;将“时间指示器”移到5帧位置，单击“合成”窗口中的“Loading”文本，进入文本编辑模式，在文本末端输入“.”，如图6-37所示。【课堂演示】教师演示15帧处的“源文本”属性关键帧如何设置及其文本效果步骤13依次将“时间指示器”移到10帧和15帧位置，重复步骤12输入文本的操作，15帧处效果如图6-38所示。【课堂演示】教师演示“源文本”属性中的关键帧如何设置步骤14将“时间指示器”移到20帧位置，同时选中“源文本”属性上的4个关键帧，按快捷键“Ctrl+C”复制关键帧，再按快捷键“Ctrl+V”从当前位置依次复制粘贴的关键帧，重复以上步骤，每隔20帧粘贴一组关键帧，使最后一个关键帧位于3秒05帧处，如图6-39所示。步骤15选中所有关键帧，按快捷键“F9”添加“缓动”效果，最后将文件保存。【教师】安排学生完成任务实施，没有掌握操作步骤的学生可以扫描二维码（详见教材）观看操作视频再次学习【教师】巡堂辅导，及时解决学生遇到的问题；安排每组做得最快、最好的学生辅导其他学生进行操作，并解答其遇到的问题通过实操练习使学生掌握进度条加载动效的制作方法，并以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识第3节课界面转场交互动效传授新知（10min）【教师】通过ppt讲解界面转场交互动效的相关知识6.2.2界面转场交互动效界面转场交互动效能够清晰地表现界面中元素之间的变化过程，各界面之间的逻辑关系及层次结构，降低用户的认知负担，提高用户对产品的整体认知。动效不是装饰，而是一种行为，用于帮助用户获得更好的体验，因此在设计界面转场交互动效时，需要遵守一些设计规则和要求。1.过渡自然转换动效过于生硬，会使用户产生困惑。为什么该界面或元素会突然出现或消失?增加用户认知负担。因此，在设计中需要使用渐变的转换动效来表现多个界面或元素之间的转换过程，便于用户理解。【多媒体】教师展示银行app的界面转场交互动效图片（详见教材）谈一谈图中银行app的界面转场交互动效的排列规律？【教师】对学生的发言进行总结在该App中，所有银行卡都排列于界面底部，当前选择的银行卡会放大位于界面中央，以方便用户查看银行卡上的信息。用户可以在界面下方通过左右滑动来切换银行卡，点击界面中央的银行卡，银行卡会旋转至界面上方，此时有关该银行卡的详细信息界面会从界面下方向上移动。整个界面中的转场动效设计流畅自然，便于用户快速理解与操作。2.层次分明一个层次分明的界面转场交互动效一方面可以清晰地展示界面与元素状态的变化;另一方面可以有效地吸引用户注意力，决定用户关注的持续时间。【多媒体】教师展示界面中图标按钮的切换动效图片，对比图中三种表现形式，与学生互动讨论，并进行讲解图中图标按钮的切换方式那种最合理？【教师】对学生的发言进行总结图中点击界面的扩展按钮可以展开5个功能操作图标。该按钮在以白色和紫色为主色的界面中使用了绿色，并且尺寸大于一般按钮与图标，与界面中的其他元素做了区分，吸引了用户眼球，有助于引导用户的下一步操作。3.相互关联大多数界面转场交互动效都会涉及转换前后元素和状态之间的变化，良好的界面转场交互动效会将转换前后的元素关联起来，并让用户清楚地感知到界面变化的过程，以及所产生的变化。4.快速精准在设计界面转场交互动效时，时间与速度是需要重点考虑的因素，既不能太慢，让用户以为产品出现了延迟现象，从而产生厌烦感;也不能过快，让用户看不清楚，难以理解。在一般情况下，应该使动效发生在用户触发后的0.1秒之内，大概在3秒左右结束，这样既不会浪费用户的时间，还可以使动效快速精准。5.简单清晰当界面中存在过多的交互元素与动效时，会分散用户的注意力，给人很乱的感觉，因此在界面转场交互动效中少即是多的道理同样成立。越是简单的动效，越能得到用户的青睐。当然，这里简单的前提是，可以清楚地表现出界面及界面元素之间状态的变化。界面转场交互动效始终是围绕产品和用户存在的，无论怎样的转场交互动效，都要先服务于功能，然后再考虑动效的风格与样式。通过教师的讲解和演示，使学生掌握界面转场交互动效的设计规则和要求实训说明（5min）【教师】介绍项目实训内容，分析任务：多数App都会设置启动界面和登录界面，启动界面通常使用美观的通栏图片吸引用户眼球，彰显App的整体风格，而登录界面则用来验证用户身份。本案例带领读者制作一个登录转场动效，效果如图6-42所示。该动效的整个过程是通过启动界面的“立即登录”按钮转场到登录界面，在登录界面演示App的用户登录流程，登录成功后再转场到首页界面。为便于读者学习，此处将案例分为3节来讲。【多媒体】展现登陆转场动效图片，教师分析其最终效果通过实训说明的方式，引入要讲的知识，使学生了解登陆转场动效的制作思路项目实训（30min）【教师】分析任务，并进行演示：1.制作启动界面到登录界面的转场动效【课堂演示】教师演示如何设置对话框步骤1启动AfterEffects，选择“文件/导入/文件...”菜单项，弹出“导入文件”对话框，在其中选择“素材与实例/第6章/案例6-3/转场动效素材.psd”，单击“导入”按钮，弹出设置对话框，在其中设置相关选项，单击“确定”按钮，导入PSD素材并自动生成合成，如图6-43所示。【课堂演示】教师演示“合成设置”对话框制作方法步骤2先在“项目”面板中的“转场动效素材”合成上单击右键，在弹出的快捷菜单中选择“合成设置...”，弹出“合成设置”对话框后，在其中进行相关设置;然后单击“确定”按钮应用合成设置，如图6-44所示。双击合成，在“时间轴”面板中显示其中的图层。步骤3先在工具栏中选择椭圆工具，并在“合成”窗口中绘制一个“大小”属性值为“40，40”的正圆，设置其描边颜色为白色，描边宽度为2，无填充，锚点位于其中心位置;然后设置其“变换”属性组中的“位置”属性值为“640，1150”，并将图层重命名为“鼠标”。【课堂演示】教师演示“鼠标”图层的关键帧如何设置步骤4选择“鼠标”图层，按快捷键“P”显示其“位置”属性，在0秒和20帧处为该属性添加关键帧，并设置20帧处的属性值为“410，1240”，制作鼠标移到“立即登录”按钮上的动效。在0秒、20帧、25帧、1秒和1秒05帧处为“变换”属性组中的“缩放”属性添加关键帧，设置其属性值分别为85%、85%、70%、85%、100%;在0秒、20帧、1秒和1秒05帧处为“变换”属性组中的“不透明度”属性添加关键帧，设置其属性值分别为0%、100%、100%、0%，制作鼠标在25帧时点击，并放大消失不见的效果，如图6-45所示。【课堂演示】教师演示“立即登录框”和“立即登录”图层的关键帧如何设置步骤5同时选中“立即登录框”和“立即登录”图层，在25帧、28帧和1秒01帧处为它们的“缩放”属性添加关键帧，设置28帧处的属性值为90%;在1秒01帧和1秒10帧处为它们的“不透明度”属性添加关键帧，设置1秒10帧处的属性值为0%，并按快捷键“Alt+]”将“立即登录框”图层和“立即登录”图层时间线的出点修剪到1秒10帧处，如图6-46所示。步骤6先单击“背景下”图层左侧的“视频”按钮显示图层内容，在1秒01帧和1秒20帧处为该图层的“位置”属性和“缩放”属性添加关键帧，将“时间指示器”移到1秒01帧位置，设置“位置”属性值为“355，1344”;然后单击“缩放”属性名称右侧的“约束比例”按钮，设置其y值为0%。【课堂演示】教师展示1秒01帧和1秒20帧处的操作及其效果步骤7选择“背景”图层，在1秒01帧和1秒20帧处为其“位置”属性和“缩放”属性添加关键帧，设置1秒20帧处的“位置”属性值为“450，320”，“缩放”属性值为65%。此时1秒01帧和1秒20帧处的效果如图6-47所示。【课堂演示】教师演示如何进行图层排序步骤8显示“登录转场动效”合成中其余未显示图层的内容，并按快捷键“Alt+[”将这些图层时间线的入点修剪到1秒03帧处，并重新排列图层，效果如图6-48所示。【课堂演示】教师演示“不透明度”属性的关键帧如何设置步骤9同时选中步骤8中的所有图层，在1秒03帧和1秒12帧处为它们的“不透明度”属性添加关键帧，并设置1秒03帧处的属性值为0%。分别将不同图层中的关键帧整体向右拖动到指定位置(如图6-49所示)，使界面元素由下向上逐渐显现。2.制作登录界面的交互动效【课堂演示】教师演示“鼠标2”图层的关键帧如何设置步骤1将“时间指示器”移到1秒05帧位置，选择“鼠标”图层，按快捷键“Ctrl+Shift+D”拆分图层。选择“鼠标2”图层，设置该图层中正圆的描边颜色为灰色“#939090”，并按快捷键“U”显示图层中所添加的关键帧。同时选中图层中的所有关键帧，按下鼠标左键向右拖动关键帧，使第一个关键帧位于1秒25帧处。将该图层时间线的入点修剪到1秒25帧处，设置“位置”属性上关键帧的属性值分别为“490，880”和“208，720”，如图6-50所示。步骤2选择“用户名”图层，在2秒20帧和2秒25帧处为其“不透明度”属性添加关键帧，设置2秒25帧处的属性值为0%。在制作鼠标点击时，“用户名”图层中的文字消失的动效。步骤3先取消选中图层，在工具栏中选择横排文字工具，在“合成”窗口中单击并输入“××××××××”，在“字符”面板中设置其字体为“华文细黑”，字体大小为36，颜色为橙色“#E9A53E”;然后设置锚点位于其中心位置，并设置文本图层的“位置”属性值为“282，714”;最后将图层重命名为“输入用户名”。【课堂演示】教师演示为文本添加“打字机”制作方法及其效果步骤4在“效果和预设”面板的搜索框中输入“打字机”并搜索，按下鼠标左键拖动“打字机”到添加的文本上，为文本添加“打字机”效果，如图6-51所示。选中“输入用户名”图层，按快捷键“U”显示已添加的关键帧，按下鼠标左键向左拖动最后一个关键帧到3秒25帧处，此时逐个输入用户名的动效就制作完成了。【课堂演示】教师演示“鼠标3”图层的关键帧如何设置步骤5参照步骤1的方法，先在“鼠标2”图层中最后一个关键帧的位置拆分图层;然后拖动“鼠标3”图层上的所有关键帧使第一个关键帧位于3秒20帧处，并将图层时间线的入点修剪到3秒20帧处;最后设置“位置”属性上关键帧的属性值，如图6-52所示。步骤6接下来制作鼠标点击“密码”时的动效。选中步骤2添加的两个关键帧，按“Ctrl+C”复制关键帧，选中“密码”图层，将“时间指示器”移到4秒15帧位置，按“Ctrl+V”粘贴关键帧，制作鼠标点击“密码”时，“密码”图层中文字消失的动效。【课堂演示】教师演示“输入密码”图层中的关键帧如何设置步骤7先选中“输入用户名”图层，复制一个图层副本，将复制图层重命名为“输入密码”，双击复制图层，输入“××××”;然后设置锚点位于其中心位置。先选中该图层上的所有关键帧，按下鼠标左键向右拖动关键帧到4秒15帧处;然后将该图层中的最后一个关键帧向左拖到5秒05帧处;最后设置该图层的“位置”属性值为“238，812”，此时鼠标点击“密码”后输入密码的动效就制作完成了，如图6-53所示。【课堂演示】教师演示“鼠标4”图层的关键帧如何设置步骤8参照步骤5的方法拆分“鼠标3”图层，制作鼠标点击“发送验证码”的动效，“鼠标4”图层的关键帧设置如图6-54所示。步骤9选择“发送验证码”图层，在6秒10帧和6秒13帧处为其“缩放”属性添加关键帧，设置6秒13帧处的属性值为90%。为该图层添加“填充”效果，选择图层下“效果/填充”属性组中的“颜色”属性，在6秒10帧和6秒13帧处为该属性添加关键帧，设置6秒10帧处的颜色为橙色“#E9A53E”，6秒13帧处的颜色为浅灰色“#B9B9B9”。【课堂演示】教师演示鼠标点击“请输入验证码”时相应图层的关键帧如何设置步骤10参照步骤5和步骤6的方法制作鼠标点击“请输入验证码”时，鼠标的动效和“请输入验证码”图层中文字消失的动效，相应图层的关键帧设置如图6-55所示。【课堂演示】教师演示“输入验证码”图层的关键帧如何设置选择“输入密码”图层，复制一个图层副本，将复制图层重命名为“输入验证码”，修改图层中的文本为“××××××”，设置锚点位于其中心位置，如果参照步骤7的方法制作输入验证码的动效，其关键帧设置如图6-56所示。3.制作登录界面到首页的转场动效【课堂演示】教师演示“鼠标6”图层的关键帧如何设置步骤1使用上述方法拆分“鼠标5”图层，制作鼠标点击“登录”按钮的动效，“鼠标6”图层的关键帧设置如图6-57所示。【课堂演示】教师演示“登录”和“登录框”图层的关键帧如何设置步骤2同时选中“登录”和“登录框”图层，在9秒20帧和9秒25帧处为它们的“缩放”属性添加关键帧，设置9秒25帧处的属性值为95%;选中“登录框”图层为其添加“填充”效果，在9秒20帧和9秒25帧处为“效果/填充”属性组中的“颜色”属性添加关键帧，设置9秒20帧处的颜色为橙色“#E9A53E”，9秒25帧处的颜色为暗橙色“#E4A47D”，此时“登录”按钮的选中效果就制作完成了，如图6-58所示。【课堂演示】教师演示“预合成”对话框制作方法步骤3同时选中“时间轴”面板中的所有图层，右键单击所选图层，在弹出的快捷菜单中选择“预合成...”，弹出“预合成”对话框，在其中设置相关选项(如图6-59所示)，然后单击“确定”按钮，生成预合成。步骤4选择“文件/导入/文件...”菜单项，弹出“导入文件”对话框，在其中选择“素材与实例/第6章/案例6-3/首页.jpg”，单击“导入”按钮导入图片素材。步骤5在“项目”面板中按下鼠标左键拖动“首页.jpg”到“时间轴”面板中，使其位于“登录界面动效”预合成上方，在9秒20帧和10秒15帧处为其“缩放”属性添加关键帧，设置9秒20帧处的属性值为0%;在9秒20帧和10秒10帧处为其“不透明度”属性添加关键帧，设置9秒20帧处的属性值为0%。选中该图层上的所有关键帧，按快捷键“F9”添加“缓动”效果。步骤6最后将文件保存。【教师】安排学生完成任务实施，没有掌握操作步骤的学生可以扫描二维码（详见教材）观看操作视频再次学习【教师】巡堂辅导，及时解决学生遇到的问题；安排每组做得最快、最好的学生辅导其他学生进行操作，并解答其遇到的问题通过项目实训，使学生掌握启动界面到登录界面的转场动效的制作方法，并以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识第4节课AfterEffects动画实训说明（10min）【教师】介绍项目实训内容，分析任务：在UI交互动效设计中，动画的设计与添加也是需要慎重考虑的，动画需要具备实际功能，要有助于提高产品的用户体验，并且在产品的最初设计阶段就应该纳入考虑范围，如果在产品成熟之后再考虑添加动画，很容易使整体界面太过突兀，不够协调。【多媒体】展现人物行走动画效果图片，教师分析其最终效果很多加载界面中都会设置人物动画，通过生动有趣的人物动画吸引用户观看，缓解用户的焦虑情绪。本案例带领读者制作一个生动的人物行走动画，其效果如图6-60所示。该动画主要通过“时间轴”面板中的“父级和链接”列，使人物的小腿和小臂跟随大腿和大臂运动，最终形成人物行走动画。通过实训说明的方式，引入要讲的知识，使学生了解制作任务行走动画的制作思路项目实训（35min）【教师】进行任务演示【课堂演示】教师演示如何调整锚点位置步骤1启动AfterEffects，单击“打开项目”按钮，在弹出的“打开”对话框中选择“素材与实例/第6章/案例6-4/人物形象.aep”，单击“打开”按钮，打开项目文件。步骤2在工具栏中，选择向后平移(锚点)工具，调整“合成”窗口中所有图形的锚点位置，使头和身体的锚点位于各自图形的底端，使大臂、大腿、小臂和小腿的锚点位于各自图形的顶端，如图6-61所示。步骤3在“时间轴”面板中，右键单击列标题栏，在弹出的快捷菜单中选择“列数/父级和链接”，使“父级和链接”列显示于“时间轴”面板中。【课堂演示】教师演示如何拖动“父级关联器”按钮步骤4按下鼠标左键拖动“小臂右”图层上的“父级关联器”按钮到“大臂右”图层，使“大臂右”图层成为“小臂右”图层的父级图层，如图6-62所示。【课堂演示】教师演示如何将头、手臂、腿都链接到身体步骤5重复以上操作，分别链接小臂到大臂，小腿到大腿，再链接头到身体，大臂和大腿到身体，如图6-63所示。【课堂演示】教师演示如何设置“旋转”属性值及其效果步骤6隐藏“身体”图层内容，同时选中除“头”和“身体”图层外的所有图层，按快捷键“R”，显示它们的“旋转”属性，并分别设置它们的属性值为52°、-32°、-40°、26°、-28°、-32°、30°、26°，使人物处于行走状态，如图6-64所示。【课堂演示】教师演示大臂和大腿的“旋转”属性值制作方法步骤7再次选中除“头”和“身体”图层外的所有图层，在0秒、1秒10帧和2秒20帧处为“旋转”属性添加关键帧，并将“时间指示器”移到1秒10帧位置，设置大臂和大腿的属性值分别为-25°、36°、52°、-44°，如图6-65所示。【课堂演示】教师演示20帧处“旋转”属性值设置和2秒处“旋转”属性值如何设置步骤8将“时间指示器”移到20帧的位置，为“大腿左”图层和“小腿左”图层的“旋转”属性添加关键帧，分别设置属性值为-24°和79°，如图6-66所示;将“时间指示器”移到2秒的位置，为“大腿右”图层和“小腿右”图层的“旋转”属性添加关键帧，分别设置属性值为-9°和70°，如图6-67所示。步骤9显示“身体”图层内容，选中该图层，在0秒、20帧、1秒10帧、2秒和2秒20帧处为“变换”属性组中的“位置”属性添加关键帧;将“时间指示器”移到20帧位置，设置“位置”属性的y值为588;复制20帧处的关键帧粘贴到2秒位置。使用快捷键“F9”为该属性的所有关键帧添加“缓动”效果。步骤10选择“头”图层，在0秒、20帧、1秒10帧、2秒和2秒20帧处为“变换”属性组中的“旋转”属性添加关键帧，将“时间指示器”移到20帧位置，设置其属性值为-5°;复制20帧处的关键帧粘贴到2秒位置。步骤11同时选中所有关键帧，按住快捷键“Alt”的同时按下鼠标左键向左拖动最后一个关键帧到1秒20帧处。将“时间指示器”移到1秒20帧位置，按快捷键“N”使工作区的结束时间移至1秒20帧处。此时，按“空格键”便能预览到一个不断行走的人物动画，接下来为他添加阴影。【课堂演示】教师演示“预合成”对话框制作方法步骤12同时选中“时间轴”面板中的所有图层，右键单击所选图层名称，在弹出的快捷菜单中选择“预合成...”，弹出“预合成”对话框，在其中设置相关选项，并单击“确定”按钮生成预合成，如图6-68所示。【课堂演示】教师演示如何设置“阴影”图层的“x轴旋转”属性值和“位置”属性值步骤13选择“人物动画”预合成，按快捷键“Ctrl+D”复制一个预合成副本，将其重命名为“阴影”，在“时间轴”面板中按下左键向下拖动“阴影”预合成到“人物动画”预合成下方;单击“阴影”预合成的“3D图层”按钮，并设置该图层“x轴旋转”属性值为88°，“位置”属性的y值为760，如图6-69所示。【课堂演示】教师演示如何添加“填充”和“快速方框模糊”效果步骤14先为“阴影”预合成添加“填充”效果，在“效果控件”面板中设置颜色为深灰色“#424040”;然后选择“效果/模糊和锐化/快速方框模糊”菜单项，为其添加“快速方框模糊”效果，在“效果控件”面板中设置“模糊半径”属性值为56，如图6-70所示。步骤15将文件保存。至此，人物行走动画就制作完成了。【教师】安排学生完成任务实施，没有掌握操作步骤的学生可以扫描二维码（详见教材）观看操作视频再次学习【教师】巡堂辅导，及时解决学生遇到的问题；安排每组做得最快、最好的学生辅导其他学生进行操作，并解答其遇到的问题通过项目实训使学生掌握制作人物行走动画的制作方法，并以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识第5节课案例练习6-5制作纸飞机沿路径运动动画实训说明（7min）【教师】介绍项目实训内容，分析任务：本案例带领读者制作纸飞机沿路径运动的动画，效果如图6-71所示。制作该动画首先需要使用钢笔工具绘制出路径;然后将绘制的路径复制到纸飞机图层的“位置”属性上，并使用“描边”效果为纸飞机添加拖尾效果。【多媒体】展现纸飞机沿路径运动动画效果图片，教师分析其最终效果通过项目说明的方式，引入要讲的知识，使学生了解纸飞机沿路径运动动画的制作思路项目实训（35min）【教师】分析任务，并进行演示【课堂演示】教师演示“合成设置”对话框制作方法步骤1在AfterEffects中新建项目，选择“合成/新建合成...”菜单项，弹出“合成设置”对话框，在其中进行相关设置，如果单击“确定”按钮新建合成，如图6-72所示。【课堂演示】教师演示如何设置对话框步骤2先选择“文件/导入/文件...”菜单项，弹出“导入文件”对话框，在其中选择“素材与实例/第6章/案例6-5/纸飞机.psd”，单击“导入”按钮，弹出设置对话框，在其中设置相关选项;然后单击“确定”按钮导入素材并创建合成，如图6-73所示。【课堂演示】教师演示如何拖动锚点至机身步骤3在“项目”面板中按下鼠标左键将“纸飞机”合成向下拖到“时间轴”面板中，设置其“缩放”属性值为15%，在工具栏中选择向后平移(锚点)工具，将该图层的锚点拖到纸飞机机身上，如图6-74所示。步骤4右键单击图层控制区域的空白处，在弹出的快捷菜单中选择“新建/纯色...”，弹出“纯色设置”对话框，设置名称为“路径”，然后单击“确定”按钮新建纯色图层。【课堂演示】教师演示如何使用钢笔工具绘制路径步骤5隐藏“路径”图层内容并选中该图层，在工具栏中选择钢笔工具，在“合成”窗口中绘制蒙版路径，如图6-75所示。【课堂演示】教师演示如何复制粘贴路径步骤6选中“路径”图层中“蒙版/蒙版1”属性组中的“蒙版路径”属性，按快捷键“Ctrl+C”复制路径;选中“纸飞机”合成的“位置”属性，按快捷键“Ctrl+V”将复制的路径粘贴到该属性中，此时“位置”属性上会自动添加5个关键帧，分别对应步骤5中所绘制的5个路径顶点，如图6-76所示。步骤7在“时间轴”面板中选择“纸飞机”合成，右键单击所选合成，在弹出的快捷菜单中选择“变换/自动定向...”，弹出“自动方向”对话框，在其中选择“沿路径定向”，然后单击“确定”按钮，此时机头会随纸飞机的运动而变换方向。设置合成的“旋转”属性值为28°，使机头与路径对齐。步骤8右键单击图层控制区域的空白处，在弹出的快捷菜单中选择“新建/调整图层”，新建调整图层，将其重命名为“拖尾”并置底。步骤9选中“路径”图层的“蒙版路径”属性，按快捷键“Ctrl+C”复制路径;选中“拖尾”图层按快捷键“Ctrl+V”粘贴路径。【课堂演示】教师演示如何添加“描边”效果步骤10选中“拖尾”图层，选择“效果/生成/描边”菜单项为其添加“描边”效果，在“效果控件”面板中设置颜色为浅蓝色“#DEE9F8”，“画笔大小”属性值为5，如图6-77所示。【课堂演示】教师演示单击“切换蒙版和形状路径可见性”按钮步骤11单击“合成”窗口下方的“切换蒙版和形状路径可见性”按钮，设置路径为不可见模式，如图6-78所示。【课堂演示】教师演示第二个关键帧处纸飞机的拖尾制作方法及其效果步骤12将“时间指示器”移至0秒位置，在“效果控件”面板中为“起始”属性和“结束”属性添加关键帧，设置“结束”属性值为0%;将“时间指示器”移至“纸飞机”图层中“位置”属性的第二个关键帧处，在“效果控件”面板中左右拖动“结束”属性值和“起始”属性值，使路径起始位置被纸飞机遮住，结束位置在纸飞机后一段距离处，效果如图6-79所示。步骤13将“时间指示器”移至“纸飞机”图层中“位置”属性的第三个关键帧处，参照步骤12设置“结束”属性值和“起始”属性值;采用同样方法设置第四个关键帧和第五个关键帧的“结束”属性值和“起始”属性值。步骤14将“时间指示器”移至2秒05帧位置，设置“起始”属性值为100%，使拖尾在运动结束后消失。步骤15将文件保存。至此，纸飞机沿路径运动的动画就制作完成了。【教师】安排学生完成任务实施，没有掌握操作步骤的学生可以扫描二维码（详见教材）观看操作视频再次学习【教师】巡堂辅导，及时解决学生遇到的问题；安排每组做得最快、最好的学生辅导其他学生进行操作，并解答其遇到的问题通过项目实训使学生巩固所学知识，并以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识课堂小结

（3min）【教师】简要总结本节课的要点本章介绍了文字动效、界面加载交互动效、界面转场交互动效和AfterEffects动画的相关知识，并使用AfterEffects制作了几个相关动效的案例。UI交互动效包括各种不同类型、不同表现形式的动效，但无论何种动效，都是由多种基础动效组合而成的。希望通过本章的学习，学生可以掌握常见UI交互动效的制作，可以通过将不同的基础动效进行组合，制作出更加精美的、符合界面设计风格的交互动效。【学生】总结回顾知识点总结知识点，巩固学生对流程图相关知识的印象第6节课项目实训——制作圆形进度条加载动效佳作赏析（10min）【教师】讲解新知【多媒体】展现网页动效图片，并进行讲解如图6-80所示，是国货彩妆品牌“花西子”的网站界面交互动效图。界面以白色和蓝绿色作为主色，搭配精美的图片和细长、优美的文字，充满民族特色的同时又不缺乏时尚感，给人简洁明了，高端大气上档次的感觉。在界面中，滚动鼠标或单击“下一页”按钮会从侧面滑出下一页面。简单的侧滑动效相对于复杂的、炫酷的动效，更能使用户目光集中在界面产品上，从而达到推销产品的目的。“花西子”品牌除了网站界面整体的交互动效外，在界面元素和细节的动效设计上也有值得学习的亮点。【多媒体】展现鼠标样式图片，并进行讲解(1)“花西子”品牌的网站界面交互动效中，将鼠标样式设计成了花朵的形状，当鼠标移到可点击的元素或按钮上时，花朵会变为显眼的红色花朵剪影，给用户眼前一亮的感觉，如图6-81所示。这一设计降低了用户认知成本，清晰地向用户展示了哪些元素是可点击的。【多媒体】展现导航栏图片，并进行讲解(