UI交互设计案例教程 第六章

06常见UI交互动效设计与实现（下）签到签到方式教师通过“文旌课堂APP”生成签到二维码，并设置签到时间，学生通过“文旌课堂APP”扫描“签到二维码”进行签到。。扫码下载文旌课堂APP扫码签到

常见的UI交互动效除上一章介绍的图标、按钮和导航栏外，还有文字动效、界面加载交互动效、界面转场交互动效和AfterEffects动画。

本章将逐个介绍它们的表现形式及设计方法，并通过案例制作使同学们掌握它们的制作方法，进一步理解什么是交互动效设计，开阔思维，提高实践能力。单元导读★了解文字、界面加载和界面转场交互动效的基础知识知识目标★紧跟时代潮流，培养自身的创新意识和实践能力★加强基础知识的学习，不断进行实践练习，从而实现从量变到质变的转化

思政目标★掌握使用AfterEffects制作文字、界面加载和界面转场交互动效的方法和技巧★掌握使用AfterEffects制作动画的方法与技巧

技能目标学习目标6.1文字动效

文字是界面交互设计中最常见的动效对象之一。文字动效可用于强调关键词和重要信息，使内容表达更清晰、更简洁、更具冲击力，便于用户更好地理解信息。

文字动效的制作方法和表现形式与界面中的其他元素相似，大多是通过改变文字属性，为文字添加蒙版、遮罩和各种效果来实现的。下面介绍几类常见的文字动效表现形式。1．基础文字动效

基础文字动效是指基于文字的基础属性所制作的动效，如文字的放大与缩小效果、位置的移动，以及不透明度的变化等都属于基础文字动效。文字动效可以是针对单个字词的，也可以是针对一段完整文本的。如图所示的动效是通过改变文本中每个字符的位置，使文字从左向右移动，制作出拉伸的文字动效。6.1文字动效2．文字遮罩与蒙版动效

文字遮罩与蒙版动效就是通过对文字或图形元素添加遮罩与蒙版效果而制作出的文字动效，这类动效往往可以使用简单的元素制作出丰富的、具有冲击力的效果。

如图所示的动效通过对矩形添加遮罩或蒙版效果，使矩形在文字上方左右移动来显示部分文字，最后将矩形拉伸使之覆盖文字，以显示出文字全貌。6.1文字动效3．基于路径的文字动效

基于路径的文字动效可以以文字本身为路径，使线段沿路径运行，最后生成文字。

如图所示的动效使不同颜色的文字描边沿路径运行，最终生成文字，使得其动效绚丽多彩。

基于路径的文字动效也可以是对其他元素做路径动画，最后显示出文字内容。

如图所示的动效，首先使粒子围绕圆形路径运动，并逐渐向中心汇聚；然后从中心向四周扩散，逐渐显示出文字内容。6.1文字动效4．文字特效动画

文字特效动画是指为文字添加各种效果，使文字内容与各种效果相结合而形成的动效，如粒子效果、光晕与光效效果和闪电效果等。AfterEffects中有各种内置效果，直接将其应用到文字上即可快速地制作出各种酷炫的、富有视觉冲击力的文字动画。还可以将上述文字动效表现形式相结合，制作出更加复杂的动效。我们在设计文字动效时要灵活运用各种形式，另外要使表现形式与文字内容相符合，切勿使形式大于内容。粒子插件制作的流动文字动画案例练习6-1制作文字转换动效

本案例带领同学们制作一个赛博朋克风格的文字转换动效，其效果如图所示。

该动效主要是使用AfterEffects中的内置效果及3D图层来实现的，其中主要用到了“卡片擦除”效果、“复合模糊”效果、“快速方框模糊”效果，以及“四色渐变”效果。6.1文字动效步骤1

在AfterEffects中新建项目，选择“合成/新建合成...”菜单项，弹出“合成设置”对话框，在其中进行相关设置，然后单击“确定”按钮新建合成，如图所示。案例练习6-1制作文字转换动效6.1文字动效步骤2

在工具栏中选择横排文字工具

，在“合成”窗口中单击，输入“SHADOW”，选中文字，在“字符”面板中设置字体为“Captureit”，字体大小为220像素，颜色为蓝色“#80DEF9”，设置锚点位于其中心位置，并使文本居中显示。案例练习6-1制作文字转换动效6.1文字动效步骤3先将文本图层重命名为“文本1”，按快捷键“Ctrl+D”复制一个图层副本，双击复制的图层，进入文本编辑模式，输入“SUNSHINE”，设置锚点位于其中心位置，在“字符”面板中设置颜色为粉紫色“#EF6EFB”，使文本居中显示；然后隐藏复制图层的内容。

★提示：当修改文本图层中的文字时，不会改变该图层中锚点的位置，因此修改文本后需要再次使用快捷键“Ctrl+Alt+Home”设置锚点位于当前文本的中心位置。步骤4选择“文本1”图层，选择“效果/过渡/卡片擦除”菜单项，添加“卡片擦除”效果。将“时间指示器”移到0秒位置，在“效果控件”面板中单击“过渡完成”属性左侧的“秒表”按钮添加关键帧，设置属性值为0%，如图所示。

将“时间指示器”移到2秒位置，在“效果控件”面板中设置“过渡完成”属性值为100%，此时在“时间指示器”位置会自动为该属性添加关键帧。知识链接：“卡片擦除”效果会将图层内容分解为卡片，分解的卡片经过翻转后再组成原图形，如设置了背面图层，卡片经过翻转后将切换为背面图层，因此该效果常用于制作转场动效。此外，还可以设置效果中的“行数”和“列数”属性值，以设置图层内容分解的卡片数量。案例练习6-1制作文字转换动效6.1文字动效设置“文本1”图层转换后的背面图层步骤5

在“效果控件”面板中单击“背面图层”右侧“2.文本1”文本框的下拉按钮，在下拉列表中选择“1.文本2”，如图所示。此时，便完成了文字转换动效的制作，接下来设置“卡片擦除”效果中的相应属性值，使文字过渡效果更加细腻、丰富。案例练习6-1制作文字转换动效6.1文字动效步骤6

在“效果控件”面板中设置“行数”和“列数”属性值分别为20和50，“随机时间”属性值为0.6，并单击“位置抖动”左侧的“>”按钮展开属性组。

将“时间指示器”移到0秒位置，单击“z抖动量”左侧的“秒表”按钮添加关键帧，将“时间指示器”移到1秒位置，设置“z抖动量”属性值为15，将“时间指示器”移到2的位置，设置“z抖动量”属性值为0，使文字抖动复原，如图所示。案例练习6-1制作文字转换动效6.1文字动效步骤7选择“文本1”图层，按快捷键“Ctrl+D”复制一个图层副本。选择“文本3”图层，为其添加“填充”效果，在“效果控件”面板中设置填充颜色为黄色“#FFD71D”，如图所示。按快捷键“Ctrl+Alt+Shift+↓”将图层置底。案例练习6-1制作文字转换动效6.1文字动效步骤8选择“文本3”图层，将“时间指示器”移到0秒位置，在“效果控件”面板中为“位置抖动”属性组中的“x抖动量”属性和“y抖动量”属性添加关键帧；将“时间指示器”移到1秒位置，设置属性值都为2，如图所示；将“时间指示器”移到2秒位置，设置属性值都为0。案例练习6-1制作文字转换动效6.1文字动效步骤9

取消选中图层，先右键单击图层控制区域的空白处，在弹出的快捷菜单中选择“新建/调整图层”，新建调整图层；然后选择“效果/风格化/发光”菜单项，为图层添加“发光”效果。将“时间指示器”移到0秒位置，在“效果控件”面板中为“发光阈值”属性和“发光半径”属性添加关键帧，并设置属性值分别为100%和0，如图所示。案例练习6-1制作文字转换动效6.1文字动效知识链接：在调整图层中添加的效果可以应用于调整图层下方的所有图层。步骤10选择调整图层，按快捷键“U”显示已添加关键帧的属性，在15帧处为它们添加关键帧并设置属性值分别为70%和66（如图所示），在1秒20帧处添加关键帧，属性值不变，在2秒处添加关键帧，设置属性值分别为100%和0。案例练习6-1制作文字转换动效6.1文字动效15帧处的文字效果和关键帧属性值步骤11同时选中上述创建的4个图层，先右键单击选中图层，在弹出的快捷菜单中选择“预合成...”，弹出“预合成”对话框，在其中设置相关选项；然后单击“确定”按钮，生成预合成，如图所示。案例练习6-1制作文字转换动效6.1文字动效步骤12右键单击图层控制区域的空白处，先在弹出的快捷菜单中选择“新建/纯色...”，弹出“纯色设置”对话框，在其中设置名称为“背景”；然后单击“确定”按钮新建纯色图层。步骤13先选择“背景”图层；再选择“效果/生成/四色渐变”菜单项，为其添加“四色渐变”效果，在“效果控件”面板中分别设置4个点的颜色；然后在“合成”窗口中按下鼠标左键分别拖动点到合适位置，并设置“混合”属性值为548，如图所示。选择“背景”图层并按快捷键“Ctrl+Alt+Shift+↓”将图层置底。案例练习6-1制作文字转换动效6.1文字动效为“背景”图层添加“四色渐变”效果步骤14

选择“合成/新建合成...”菜单项，弹出“合成设置”对话框，先在其中设置合成名称为“地面纹理”，然后单击“确定”按钮新建合成。右键单击图层控制区域的空白处，在弹出的快捷菜单中选择“新建/纯色...”，弹出“纯色设置”对话框，设置名称为“纹理”，然后单击“确定”按钮新建纯色图层。

步骤15

先选择“纹理”图层；再选择“效果/杂色和颗粒/分形杂色”菜单项，为其添加“分形杂色”效果，在“效果控件”面板中单击“分形类型”右侧的下拉按钮，在下拉列表中选择“涡旋”；然后设置“对比度”属性值为130，“亮度”属性值为-30，如图所示。案例练习6-1制作文字转换动效6.1文字动效“分形杂色”效果知识链接：“分形杂色”效果的应用非常广泛，可以制作出火焰、烟雾、水流、量子光波和雾面效果等多种多样的动效。步骤16

先单击“纹理”图层的“3D图层”按钮；然后按快捷键“R”显示其“旋转”属性，设置“x轴旋转”属性值为-90°，如图所示。

案例练习6-1制作文字转换动效6.1文字动效设置“纹理”图层属性值知识链接：单击某图层上的“3D图层”按钮，可以将相应图层转换为3D图层，并为“位置”属性、“锚点”属性和“缩放”属性添加z值，设置素材的深度。步骤17在“合成”窗口中，按住快捷键“Shift”的同时按下鼠标左键垂直向下拖动纹理至界面底端，如图所示。案例练习6-1制作文字转换动效6.1文字动效拖动“纹理”图层到界面底端步骤18先按快捷键“S”显示“缩放”属性，单击属性名称右侧的“约束比例”按钮；然后设置x轴、y轴、z轴的属性值分别为350%、650%、450%，在“合成”窗口选中y轴，按下鼠标左键向上拖动到合适位置，其效果如图如图所示。案例练习6-1制作文字转换动效6.1文字动效选中y轴向上拖动步骤19先在“项目”面板中双击“文字转换动效”合成；然后按下鼠标左键拖动“地面纹理”合成至“时间轴”面板中，使其位于“文字转换”预合成下方。

先将“时间指示器”移到0秒位置，选中“文字转换”预合成，按快捷键“Ctrl+D”复制一个预合成副本，将位于下方的预合成重命名为“倒影”，单击“倒影”预合成的“3D图层”按钮；然后设置“x轴旋转”属性值为120°，并在“合成”窗口中按下鼠标左键向下拖动倒影到合适位置，如图所示。案例练习6-1制作文字转换动效6.1文字动效倒影在“合成”窗口中的效果步骤20右键单击图层控制区域的空白处，在弹出的快捷菜单中选择“新建/调整图层”，新建调整图层，在“时间轴”面板中调整图层排序，并隐藏“地面纹理”合成中的内容，效果如图所示。选择调整图层，选择“效果/模糊和锐化/复合模糊”菜单项，添加“复合模糊”效果。案例练习6-1制作文字转换动效6.1文字动效各图层间的排序步骤21在“效果控件”面板中单击“模糊图层”右侧的“3.调整图层2”下拉按钮，在下拉列表中选择“2.地面纹理”，设置“最大模糊”属性值为30，如图所示。案例练习6-1制作文字转换动效6.1文字动效“复合模糊”效果步骤22选择“倒影”预合成，选择“效果/模糊和锐化/快速方框模糊”菜单项，添加“快速方框模糊”效果，在“效果控件”面板中设置“模糊半径”属性值为3，如图所示。案例练习6-1制作文字转换动效6.1文字动效“快速方框模糊”效果步骤23最后将文件保存。6.2界面交互动效6.2.1界面加载交互动效1．进度条式加载动效

进度条式加载动效用于显示当前任务处理的进度，以及完成任务大概所需的时间，如视频下载和播放进度。该加载动效一般用于较长时间的加载，通常配合百分比数目，让用户对加载进度和剩余时间有明确的心理预期。

在进度条式加载动效中，最常见的是直线进度条，一般有长条矩形和圆形两种形式，其设计方法相对简单，但设计时要注意与界面风格相匹配，如图所示。还有一些进度条加载动效在直线进度条的基础上添加了小动画，表明进度的同时还增添了趣味性，如图所示。常见进度条式加载动效

添加小动画的矩形式加载动效6.2界面交互动效6.2.1界面加载交互动效2．旋转式加载动效

旋转式加载动效模仿时钟顺时针旋转，不停地旋转不仅能吸引用户眼球，还能给用户一种时间快速流逝，快速加载的感觉，如图所示。这类加载动效常用于时间较短的加载中，如果长时间一直旋转而不加载新界面的话，容易使用户焦虑。旋转式加载动效6.2界面交互动效6.2.1界面加载交互动效3．动画式加载动效

动画式加载动效就是以生动的动画形象进行展示的加载动效，如图所示。

在使用动画式加载动效时，要注意添加的动画形象与产品的整体风格相吻合，以提高产品辨识度。另外，在制作时要注意动画的流畅度，给用户舒适、有趣的体验。案例练习6-2制作进度条式加载动效

进度条式加载动效可以明确地显示当前加载进度，有效提升用户体验，是交互设计中较为常见的一种加载动效。本案例带领同学们完成进度条加载动效的制作，使同学们对该类加载动效制作有一个简单的了解，其效果如图所示。该动效主要通过“线性擦除”效果，使进度条从左到右发生变化，并通过“编号”效果使表示加载进度的百分比数值随进度条变化而递增。进度条加载动效6.2界面交互动效步骤1

先在AfterEffects中新建项目，选择“合成/新建合成...”菜单项，弹出“合成设置”对话框，在其中进行相关设置；然后单击“确定”按钮新建合成，如图所示。“合成设置”对话框案例练习6-2制作进度条式加载动效6.2界面交互动效设置“描边”图层属性值案例练习6-2制作进度条式加载动效6.2界面交互动效步骤2

右键单击图层控制区域的空白处，在弹出的快捷菜单中选择“新建/形状图层”创建图层，并将其重命名为“描边”。先在工具栏中选择矩形工具，设置填充为无，描边颜色为白色，描边宽度为5；然后在“合成”窗口中绘制一个“大小”属性值为“1125，100”的矩形，设置锚点位于其中心位置，“圆度”属性值为60，并使矩形居中显示，如图所示。案例练习6-2制作进度条式加载动效6.2界面交互动效步骤

3

选择“描边”图层，按快捷键“Ctrl+D”复制一个图层副本，将复制的图层重命名为“填充”，设置“填充”图层中矩形的填充颜色为蓝色“#8DAEE4”，制作进度条式加载动效描边为无。步骤

4

选择“填充”图层的“内容”属性，单击该属性右侧的

按钮，在弹出的菜单中选择“位移路径”，添加“位移路径”属性组，设置“内容/位移路径”属性组中的“数量”属性值为-10，如图所示。添加“位移路径”属性组案例练习6-2制作进度条式加载动效6.2界面交互动效步骤

7

右键单击图层控制区域的空白处，在弹出的快捷菜单中选择“新建/纯色...”，弹出“纯色设置”对话框，在其中设置名称为“数字”，然后单击“确定”按钮新建纯色图层。步骤8先选择“效果/文本/编号”菜单项，弹出“编号”对话框，在其中设置相关选项；然后单击“确定”按钮添加“编号”效果，如图所示。在“效果控件”面板中设置“格式”属性组中的“小数位数”属性值为0，“填充和描边”属性组中的“位置”属性值为“922，414”，填充颜色为白色，“大小”属性值为66。“编号”对话框步骤9

将“时间指示器”移到0秒位置，在“效果控件”面板中为“数值/位移/随机最大”属性添加关键帧；将“时间指示器”移到3秒位置，设置“数值/位移/随机最大”属性值为100，如图所示。此时进行预览，可以看到表示加载进度的百分比数值会从0增加到100。“数值/位移/随机最大”属性的关键帧设置案例练习6-2制作进度条式加载动效6.2界面交互动效步骤10

先在工具栏中选择横排文字工具；然后在“合成”窗口中单击，输入“%”并将其选中；再在“字符”面板中设置字体大小为80，颜色为白色，字体为“仿宋”，并设置锚点位于其中心位置；最后设置图层的“位置”属性值为“1020，418”，如图所示。百分号在“合成”窗口中的位置案例练习6-2制作进度条式加载动效6.2界面交互动效步骤11

选择“%”图层，按快捷键“Ctrl+D”复制一个图层副本，双击复制的图层，输入“Loading”，设置锚点位于其中心位置，并设置图层的“位置”属性值为“960，684”。5帧处的“源文本”属性关键帧设置及其文本效果案例练习6-2制作进度条式加载动效6.2界面交互动效步骤12

将“时间指示器”移到0秒位置，为“Loading”图层下“文本”属性组中的“源文本”属性添加关键帧；将“时间指示器”移到5帧位置，单击“合成”窗口中的“Loading”文本，进入文本编辑模式，在文本末端输入“.”，如图所示。步骤13

依次将“时间指示器”移到10帧和15帧位置，重复步骤12输入文本的操作，15帧处效果如图所示。15帧处的“源文本”属性关键帧设置及其文本效果案例练习6-2制作进度条式加载动效6.2界面交互动效步骤15

选中所有关键帧，按快捷键“F9”添加“缓动”效果，最后将文件保存。“源文本”属性中的关键帧设置案例练习6-2制作进度条式加载动效6.2界面交互动效步骤14

将“时间指示器”移到20帧位置，同时选中“源文本”属性上的4个关键帧，按快捷键“Ctrl+C”复制关键帧，再按快捷键“Ctrl+V”从当前位置依次复制粘贴的关键帧，重复以上步骤，每隔20帧粘贴一组关键帧，使最后一个关键帧位于3秒05帧处，如图所示。6.2.2界面转场交互动效

界面转场交互动效能够清晰地表现界面中元素之间的变化过程，各界面之间的逻辑关系及层次结构，降低用户的认知负担，提高用户对产品的整体认知。动效不是装饰，而是一种行为，用于帮助用户获得更好的体验，因此在设计界面转场交互动效时，需要遵守一些设计规则和要求。1．过渡自然

事物不会突然消失，也不会突然出现，通常都会有一个渐变的转换过程。同样，界面转场交互动效也是如此，如果转换动效过于生硬，会使用户产生困惑。为什么该界面或元素会突然出现或消失？增加用户认知负担。因此，在设计中需要使用渐变的转换动效来表现多个界面或元素之间的转换过程，便于用户理解。

6.2界面交互动效6.2.2界面转场交互动效

如图所示是一个银行App的界面，在该App中，所有银行卡都排列于界面底部，当前选择的银行卡会放大位于界面中央，以方便用户查看银行卡上的信息。用户可以在界面下方通过左右滑动来切换银行卡，点击界面中央的银行卡，银行卡会旋转至界面上方，此时有关该银行卡的详细信息界面会从界面下方向上移动。整个界面中的转场动效设计流畅自然，便于用户快速理解与操作。6.2界面交互动效6.2.2界面转场交互动效

2．层次分明

一个层次分明的界面转场交互动效一方面可以清晰地展示界面与元素状态的变化；另一方面可以有效地吸引用户注意力，决定用户关注的持续时间。

如图所示，点击界面中的扩展按钮可以展开

5个功能操作图标。该按钮在以白色和紫色为主色的界面中使用了绿色，并且尺寸大于一般按钮与图标，与界面中的其他元素做了区分，吸引了用户眼球，有助于引导用户的下一步操作。6.2界面交互动效界面中图标按钮的切换动效6.2.2界面转场交互动效3．相互关联

大多数界面转场交互动效都会涉及转换前后元素和状态之间的变化，良好的界面转场交互动效会将转换前后的元素关联起来，并让用户清楚地感知到界面变化的过程，以及所产生的变化。4．快速精准

在设计界面转场交互动效时，时间与速度是需要重点考虑的因素，既不能太慢，让用户以为产品出现了延迟现象，从而产生厌烦感；也不能过快，让用户看不清楚，难以理解。在一般情况下，应该使动效发生在用户触发后的0.1秒之内，大概在3秒左右结束，这样既不会浪费用户的时间，还可以使动效快速精准。5．简单清晰

越是简单的动效，越能得到用户的青睐。当然，这里简单的前提是，可以清楚地表现出界面及界面元素之间状态的变化。

界面转场交互动效始终是围绕产品和用户存在的，无论怎样的转场交互动效，都要先服务于功能，然后再考虑动效的风格与样式。6.2界面交互动效

多数App都会设置启动界面和登录界面，启动界面通常使用美观的通栏图片吸引用户眼球，彰显App的整体风格，而登录界面则用来验证用户身份。本案例带领同学们制作一个登录转场动效，效果如图所示。6.2界面交互动效案例练习6-3制作登录转场动效

该动效的整个过程是通过启动界面的“立即登录”按钮转场到登录界面，在登录界面演示App的用户登录流程，登录成功后再转场到首页界面。为便于学习，此处将案例分为3节来讲。6.2界面交互动效案例练习6-3制作登录转场动效1．制作启动界面到登录界面的转场动效6.2界面交互动效案例练习6-3制作登录转场动效步骤1启动AfterEffects，选择“文件/导入/文件...”菜单项，弹出“导入文件”对话框，在其中选择“素材与实例/第6章/案例6-3/转场动效素材.psd”，单击“导入”按钮，弹出设置对话框，在其中设置相关选项，单击“确定”按钮，导入PSD素材并自动生成合成，如图所示。1．制作启动界面到登录界面的转场动效6.2界面交互动效案例练习6-3制作登录转场动效步骤2先在“项目”面板中的“转场动效素材”合成上单击右键，在弹出的快捷菜单中选择“合成设置...”，弹出“合成设置”对话框后，在其中进行相关设置；然后单击“确定”按钮应用合成设置，如图所示。双击合成，在“时间轴”面板中显示其中的图层。

★提示：如双击合成后，“时间轴”面板中图层的持续时间不足12秒，可以同时选中所有图层，将“时间指示器”移到11秒29帧位置，按快捷键“Ctrl+]”将出点修剪到11秒29帧处。案例练习6-3制作登录转场动效步骤3

先在工具栏中选择椭圆工具，并在“合成”窗口中绘制一个“大小”属性值为“40，40”的正圆，设置其描边颜色为白色，描边宽度为2，无填充，锚点位于其中心位置；然后设置其“变换”属性组中的“位置”属性值为“640，1150”，并将图层重命名为“鼠标”。6.2界面交互动效步骤4

选择“鼠标”图层，按快捷键“P”显示其“位置”属性，在0秒和20帧处为该属性添加关键帧，并设置20帧处的属性值为“410，1240”，制作鼠标移到“立即登录”按钮上的动效。1．制作启动界面到登录界面的转场动效案例练习6-3制作登录转场动效步骤4

在0秒、20帧、25帧、1秒和1秒05帧处为“变换”属性组中的“缩放”属性添加关键帧，设置其属性值分别为85%、85%、70%、85%、100%；在0秒、20帧、1秒和1秒05帧处为“变换”属性组中的“不透明度”属性添加关键帧，设置其属性值分别为0%、100%、100%、0%，制作鼠标在25帧时点击，并放大消失不见的效果，如图所示。6.2界面交互动效1．制作启动界面到登录界面的转场动效“鼠标”图层的关键帧设置案例练习6-3制作登录转场动效步骤5

同时选中“立即登录框”和“立即登录”图层，在25帧、28帧和1秒01帧处为它们的“缩放”属性添加关键帧，设置28帧处的属性值为90%；在1秒01帧和1秒10帧处为它们的“不透明度”属性添加关键帧，设置1秒10帧处的属性值为0%，并按快捷键“Alt+]”将“立即登录框”图层和“立即登录”图层时间线的出点修剪到1秒10帧处，如图所示。6.2界面交互动效1．制作启动界面到登录界面的转场动效“立即登录框”和“立即登录”图层的关键帧设置案例练习6-3制作登录转场动效步骤6

先单击“背景下”图层左侧的“视频”按钮

显示图层内容，在1秒01帧和1秒20帧处为该图层的“位置”属性和“缩放”属性添加关键帧，将“时间指示器”移到1秒01帧位置，设置“位置”属性值为“355，1344”；然后单击“缩放”属性名称右侧的“约束比例”按钮，设置其y值为0%。6.2界面交互动效1．制作启动界面到登录界面的转场动效步骤7

选择“背景”图层，在1秒01帧和1秒20帧处为其“位置”属性和“缩放”属性添加关键帧，设置1秒20帧处的“位置”属性值为“450，320”，“缩放”属性值为65%。此时1秒01帧和1秒20帧处的效果如图所示。案例练习6-3制作登录转场动效步骤8

显示“登录转场动效”合成中其余未显示图层的内容，并按快捷键“Alt+[”将这些图层时间线的入点修剪到1秒03帧处，并重新排列图层，如图所示。6.2界面交互动效1．制作启动界面到登录界面的转场动效图层排序案例练习6-3制作登录转场动效6.2界面交互动效1．制作启动界面到登录界面的转场动效1秒01帧和1秒20帧处的效果案例练习6-3制作登录转场动效步骤9

同时选中步骤8中的所有图层，在1秒03帧和1秒12帧处为它们的“不透明度”属性添加关键帧，并设置1秒03帧处的属性值为0%。分别将不同图层中的关键帧整体向右拖动到指定位置（如图所示），使界面元素由下向上逐渐显现。6.2界面交互动效1．制作启动界面到登录界面的转场动效2．制作登录界面的交互动效步骤

1

将“时间指示器”移到1秒05帧位置，选择“鼠标”图层，按快捷键“Ctrl+Shift+D”拆分图层。选择“鼠标2”图层，设置该图层中正圆的描边颜色为灰色“#939090”，并按快捷键“U”显示图层中所添加的关键帧。

同时选中图层中的所有关键帧，按下鼠标左键向右拖动关键帧，使第一个关键帧位于1秒25帧处。将该图层时间线的入点修剪到1秒25帧处，设置“位置”属性上关键帧的属性值分别为“490，880”和“208，720”，如图所示。案例练习6-3制作登录转场动效6.2界面交互动效“鼠标2”图层的关键帧设置步骤

2

选择“用户名”图层，在2秒20帧和2秒25帧处为其“不透明度”属性添加关键帧，设置2秒25帧处的属性值为0%。在制作鼠标点击时，“用户名”图层中的文字消失的动效。步骤3先取消选中图层，在工具栏中选择横排文字工具，在“合成”窗口中单击并输入“××××××××”，在“字符”面板中设置其字体为“华文细黑”，字体大小为36，颜色为橙色“#E9A53E”；然后设置锚点位于其中心位置，并设置文本图层的“位置”属性值为“282，714”；最后将图层重命名为“输入用户名”。2．制作登录界面的交互动效案例练习6-3制作登录转场动效6.2界面交互动效步骤

4

在“效果和预设”面板的搜索框中输入“打字机”并搜索，按下鼠标左键拖动“打字机”到添加的文本上，为文本添加“打字机”效果，如图所示。选中“输入用户名”图层，按快捷键“U”显示已添加的关键帧，按下鼠标左键向左拖动最后一个关键帧到3秒25帧处，此时逐个输入用户名的动效就制作完成了。2．制作登录界面的交互动效案例练习6-3制作登录转场动效6.2界面交互动效步骤

5

参照步骤1的方法，先在“鼠标2”图层中最后一个关键帧的位置拆分图层；然后拖动“鼠标3”图层上的所有关键帧使第一个关键帧位于3秒20帧处，并将图层时间线的入点修剪到3秒20帧处；最后设置“位置”属性上关键帧的属性值，如图所示。2．制作登录界面的交互动效案例练习6-3制作登录转场动效6.2界面交互动效步骤

6

接下来制作鼠标点击“密码”时的动效。选中步骤2添加的两个关键帧，按“Ctrl+C”复制关键帧，选中“密码”图层，将“时间指示器”移到4秒15帧位置，按“Ctrl+V”粘贴关键帧，制作鼠标点击“密码”时，“密码”图层中文字消失的动效。案例练习6-3制作登录转场动效6.2界面交互动效步骤

7先选中“输入用户名”图层，复制一个图层副本，将复制图层重命名为“输入密码”，双击复制图层，输入“××××”；然后设置锚点位于其中心位置。先选中该图层上的所有关键帧，按下鼠标左键向右拖动关键帧到4秒15帧处；然后将该图层中的最后一个关键帧向左拖到5秒05帧处；最后设置该图层的“位置”属性值为“238，812”，此时鼠标点击“密码”后输入密码的动效就制作完成了，如图所示。步骤

8

参照步骤5的方法拆分“鼠标3”图层，制作鼠标点击“发送验证码”的动效，“鼠标4”图层的关键帧设置如图所示。2．制作登录界面的交互动效案例练习6-3制作登录转场动效6.2界面交互动效步骤

9

选择“发送验证码”图层，在6秒10帧和6秒13帧处为其“缩放”属性添加关键帧，设置6秒13帧处的属性值为90%。为该图层添加“填充”效果，选择图层下“效果/填充”属性组中的“颜色”属性，在6秒10帧和6秒13帧处为该属性添加关键帧，设置6秒10帧处的颜色为橙色“#E9A53E”，6秒13帧处的颜色为浅灰色“#B9B9B9”。步骤

10

参照步骤5和步骤6的方法制作鼠标点击“请输入验证码”时，鼠标的动效和“请输入验证码”图层中文字消失的动效，相应图层的关键帧设置如图所示。

2．制作登录界面的交互动效案例练习6-3制作登录转场动效6.2界面交互动效步骤

10

选择“输入密码”图层，复制一个图层副本，将复制图层重命名为“输入验证码”，修改图层中的文本为“××××××”，设置锚点位于其中心位置，如果参照步骤7的方法制作输入验证码的动效，其关键帧设置如图所示。

2．制作登录界面的交互动效案例练习6-3制作登录转场动效6.2界面交互动效步骤

1

使用上述方法拆分“鼠标5”图层，制作鼠标点击“登录”按钮的动效，“鼠标6”图层的关键帧设置如图所示。

3.制作登录界面到首页的转场动效案例练习6-3制作登录转场动效6.2界面交互动效步骤

2

同时选中“登录”和“登录框”图层，在9秒20帧和9秒25帧处为它们的“缩放”属性添加关键帧，设置9秒25帧处的属性值为95%；选中“登录框”图层为其添加“填充”效果，在9秒20帧和9秒25帧处为“效果/填充”属性组中的“颜色”属性添加关键帧，设置9秒20帧处的颜色为橙色“#E9A53E”，9秒25帧处的颜色为暗橙色“#E4A47D”，此时“登录”按钮的选中效果就制作完成了，如图所示。3.制作登录界面到首页的转场动效案例练习6-3制作登录转场动效6.2界面交互动效步骤

3

同时选中“时间轴”面板中的所有图层，右键单击所选图层，在弹出的快捷菜单中选择“预合成...”，弹出“预合成”对话框，在其中设置相关选项（如图所示），然后单击“确定”按钮，生成预合成。3.制作登录界面到首页的转场动效案例练习6-3制作登录转场动效6.2界面交互动效3.制作登录界面到首页的转场动效案例练习6-3制作登录转场动效6.2界面交互动效步骤4选择“文件/导入/文件...”菜单项，弹出“导入文件”对话框，在其中选择“素材与实例/第6章/案例6-3/首页.jpg”，单击“导入”按钮导入图片素材。步骤5在“项目”面板中按下鼠标左键拖动“首页.jpg”到“时间轴”面板中，使其位于“登录界面动效”预合成上方，在9秒20帧和10秒15帧处为其“缩放”属性添加关键帧，设置9秒20帧处的属性值为0%；在9秒20帧和10秒10帧处为其“不透明度”属性添加关键帧，设置9秒20帧处的属性值为0%。选中该图层上的所有关键帧，按快捷键“F9”添加“缓动”效果。步骤6最后将文件保存。案例练习6-4制作人物行走动画

很多加载界面中都会设置人物动画，通过生动有趣的人物动画吸引用户观看，缓解用户的焦虑情绪。本案例带领同学们制作一个生动的人物行走动画，其效果如图所示。

该动画主要通过“时间轴”面板中的“父级和链接”列，使人物的小腿和小臂跟随大腿和大臂运动，最终形成人物行走动画。6.3AfterEffects动画步骤

1

启动AfterEffects，单击“打开项目”按钮，在弹出的“打开”对话框中选择“素材与实例/第6章/案例6-4/人物形象.aep”，单击“打开”按钮，打开项目文件。步骤

2在工具栏中，选择向后平移（锚点）工具

，调整“合成”窗口中所有图形的锚点位置，使头和身体的锚点位于各自图形的底端，使大臂、大腿、小臂和小腿的锚点位于各自图形的顶端，如图所示。案例练习6-4制作人物行走动画6.3AfterEffects动画

★提示：对于内容被遮挡的图层，在“时间轴”面板中选中图层，即可在“合成”窗口中显示该图层的锚点。步骤

3

在“时间轴”面板中，右键单击列标题栏，在弹出的快捷菜单中选择“列数/父级和链接”，使“父级和链接”列显示于“时间轴”面板中。步骤

4按下鼠标左键拖动“小臂右”图层上的“父级关联器”按钮

到“大制作人物行走动画臂右”图层，使“大臂右”图层成为“小臂右”图层的父级图层，如图所示。案例练习6-4制作人物行走动画6.3AfterEffects动画步骤

5重复以上操作，分别链接小臂到大臂，小腿到大腿，再链接头到身体，大臂和大腿到身体，如图所示。案例练习6-4制作人物行走动画6.3AfterEffects动画步骤

6隐藏“身体”图层内容，同时选中除“头”和“身体”图层外的所有图层，按快捷键“R”，显示它们的“旋转”属性，并分别设置它们的属性值为52°、-32°、-40°、26°、-28°、-32°、30°、26°，使人物处于行走状态，如图所示。案例练习6-4制作人物行走动画6.3AfterEffects动画步骤

7再次选中除“头”和“身体”图层外的所有图层，在0秒、1秒10帧和2秒20帧处为“旋转”属性添加关键帧，并将“时间指示器”移到1秒10帧位置，设置大臂和大腿的属性值分别为-25°、36°、52°、-44°，如图所示。案例练习6-4制作人物行走动画6.3AfterEffects动画步骤

8将“时间指示器”移到20帧的位置，为“大腿左”图层和“小腿左”图层的“旋转”属性添加关键帧，分别设置属性值为-24°和79°，如图所示；

将“时间指示器”移到2秒的位置，为“大腿右”图层和“小腿右”图层的“旋转”属性添加关键帧，分别设置属性值为-9°和70°，如图所示。案例练习6-4制作人物行走动画6.3AfterEffects动画

20帧处“旋转”属性值设置

2秒处“旋转”属性值设置步骤

9显示“身体”图层内容，选中该图层，在0秒、20帧、1秒10帧、2秒和2秒20帧处为“变换”属性组中的“位置”属性添加关键帧；将“时间指示器”移到20帧位置，设置“位置”属性的y值为588；复制20帧处的关键帧粘贴到2秒位置。使用快捷键“F9”为该属性的所有关键帧添加“缓动”效果。案例练习6-4制作人物行走动画6.3AfterEffects动画步骤

10选择“头”图层，在0秒、20帧、1秒10帧、2秒和2秒20帧处为“变换”属性组中的“旋转”属性添加关键帧，将“时间指示器”移到20帧位置，设置其属性值为-5°；复制20帧处的关键帧粘贴到2秒位置。步骤

11同时选中所有关键帧，按住快捷键“Alt”的同时按下鼠标左键向左拖动最后一个关键帧到1秒20帧处。将“时间指示器”移到1秒20帧位置，按快捷键“N”使工作区的结束时间移至1秒20帧处。此时，按“空格键”便能预览到一个不断行走的人物动画，接下来为他添加阴影。案例练习6-4制作人物行走动画6.3AfterEffects动画

★提示：在“预览”面板中，设置范围为“工作区”，即可预览到不停旋转的加载动效。步骤

12同时选中“时间轴”面板中的所有图层，右键单击所选图层名称，在弹出的快捷菜单中选择“预合成...”，弹出“预合成”对话框，在其中设置相关选项，并单击“确定”按钮生成预合成，如图所示。案例练习6-4制作人物行走动画6.3AfterEffects动画步骤

13选择“人物动画”预合成，按快捷键“Ctrl+D”复制一个预合成副本，将其重命名为“阴影”，在“时间轴”面板中按下左键向下拖动“阴影”预合成到“人物动画”预合成下方；单击“阴影”预合成的“3D图层”按钮，并设置该图层“x轴旋转”属性值为88°，“位置”属性的y值为760，如图所示。案例练习6-4制作人物行走动画6.3AfterEffects动画步骤

14先为“阴影”预合成添加“填充”效果，在“效果控件”面板中设置颜色为深灰色“#424040”；然后选择“效果/模糊和锐化/快速方框模糊”菜单项，为其添加“快速方框模糊”效果，在“效果控件”面板中设置“模糊半径”属性值为56，如图所示。案例练习6-4制作人物行走动画6.3AfterEffects动画

★提示：使用上述方法做出的阴影可以随人物运动发生变化。步骤

15将文件保存。至此，人物行走动画就制作完成了。

本案例带领同学们制作纸飞机沿路径运动的动画，效果如图所示。制作该动画首先需要使用钢笔工具绘制出路径；然后将绘制的路径复制到纸飞机图层的“位置”属性上，并使用“描边”效果为纸飞机添加拖尾效果。案例练习6-5制作纸飞机沿路径运动动画6.3AfterEffects动画步骤

1

在AfterEffects中新建项目，选择“合成/新建合成...”菜单项，弹出“合成设置”对话框，在其中进行相关设置，如果单击“确定”按钮新建合成，如图所示。案例练习6-5制作纸飞机沿路径运动动画6.3AfterEffects动画步骤

2

先选择“文件/导入/文件...”菜单项，弹出“导入文件”对话框，在其中选择“素材与实例/第6章/案例6-5/纸飞机.psd”，单击“导入”按钮，弹出设置对话框，在其中设置相关选项；然后单击“确定”按钮导入素材并创建合成，如图所示。案例练习6-5制作纸飞机沿路径运动动画6.3AfterEffects动画步骤

3

在“项目”面板中按下鼠标左键将“纸飞机”合成向下拖到“时间轴”面板中，设置其“缩放”属性值为15%，在工具栏中选择向后平移（锚点）工具

，将该图层的锚点拖到纸飞机机身上，如图所示。案例练习6-5制作纸飞机沿路径运动动画6.3AfterEffects动画步骤

4右键单击图层控制区域的空白处，在弹出的快捷菜单中选择“新建/纯色...”，弹出“纯色设置”对话框，设置名称为“路径”，然后单击“确定”按钮新建纯色图层。案例练习6-5制作纸飞机沿路径运动动画6.3AfterEffects动画步骤

5隐藏“路径”图层内容并选中该图层，在工具栏中选择钢笔工具，在“合成”窗口中绘制蒙版路径，如图所示。

★提示：选择蒙版所在图层，即可在单击蒙版路径顶点时显示该顶点的控制手柄。步骤

6

选中“路径”图层中“蒙版/蒙版1”属性组中的“蒙版路径”属性，按快捷键“Ctrl+C”复制路径；选中“纸飞机”合成的“位置”属性，按快捷键“Ctrl+V”将复制的路径粘贴到该属性中，此时“位置”属性上会自动添加5个关键帧，分别对应步骤5中所绘制的5个路径顶点，如图所示。案例练习6-5制作纸飞机沿路径运动动画6.3AfterEffects动画步骤7在“时间轴”面板中选择“纸飞机”合成，右键单击所选合成，在弹出的快捷菜单中选择“变换/自动定向...”，弹出“自动方向”对话框，在其中选择“沿路径定向”，然后单击“确定”按钮，此时机头会随纸飞机的运动而变换方向。设置合成的“旋转”属性值为28°，使机头与路径对齐。步骤8右键单击图层控制区域的空白处，在弹出的快捷菜单中选择“新建/调整图层”，新建调整图层，将其重命名为“拖尾”并置底。步骤9选中“路径”图层的“蒙版路径”属性，按快捷键“Ctrl+C”复制路径；选中“拖尾”图层按快捷键“Ctrl+V”粘贴路径。案例练习6-5制作纸飞机沿路径运动动画6.3AfterEffects动画步骤

10

选中“拖尾”图层，选择“效果/生成/描边”菜单项为其添加“描边”效果，在“效果控件”面板中设置颜色为浅蓝色“#DEE9F8”，“画笔大小”属性值为5，如图所示。案例练习6-5制作纸飞机沿路径运动动画6.3AfterEffects动画步骤

11

单击“合成”窗口下方的“切换蒙版和形状路径可见性”按钮，设置路径为不可见模式，如图所示。案例练习6-5制作纸飞机沿路径运动动画6.3AfterEffects动画步骤

12

将“时间指示器”移至0秒位置，在“效果控件”面板中为“起始”属性和“结束”属性添加关键帧，设置“结束”属性值为0%；将“时间指示器”移至“纸飞机”图层中“位置”属性的第二个关键帧处，在“效果控件”面板中左右拖动“结束”属性值和“起始”属性值，使路径起始位置被纸飞机遮住，结束位置在纸飞机后一段距离处，如图所示。案例练习6-5制作纸飞机沿路径运动动画6.3AfterEffects动画步骤

13

将“时间指示器”移至“纸飞机”图层中“位置”属性的第三个关键帧处，参照步骤12设置“结束”属性值和“起始”属性值；采用同样方法设置第四个关键帧和第五个关键帧的“结束”属性值和“起始”属性值。案例练习6-5制作纸飞机沿路径运动动画6.3AfterEffects动画步骤

14

将“时间指示器”移至2秒05帧位置，设置“起始”属性值为100%，使拖尾在运动结束后消失。步骤

15

将文件保存。至此，纸飞机沿路径运动的动画就制作完成了。

★提示：“纸飞机”合成中“位置”属性的关键帧是系统根据蒙版路径，以及路径上的顶点自动生成的，在实际绘制时，根据绘制路径的不同，关键帧位置和“拖尾”图层上“结束”属性值、“起始”属性值可能会与文中有所不同。总结2.界面交互动效3.AfterEffects动画1.文字动效佳作赏析

如图所示，是国货彩妆品牌“花西子”的网站界面交互动效图。界面以白色和蓝绿色作为主色，搭配精美的图片和细长、优美的文字，充满民族特色的同时又不缺乏时尚感，给人简洁明了，高端大气上档次的感觉。在界面中，滚动鼠标或单击“下一页”按钮会从侧面滑出下一页面。简单的侧滑动效相对于复杂的、炫酷的动效，更能使用户目光集中