【年末案列下】彩色自行车AE动画

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词
本文是接上篇《彩色自行车AI绘制》的下篇,上篇分享了用AI绘制彩色自行车,本篇运用AE做动效。本篇所用到的都是AE中比较基础的技能,包括关键帧定帧,五大元素等等,其中还会穿插AE的小技巧,相信看完本篇教程的你也能掌握基本的AE技能。

【年末案列下】彩色自行车AE动画

1.在Adobe Illustrator中准备好素材并将其导入Adobe After Effects

步骤1

我们将使用年末案列上教程中的插画。首先,我们需要在Adobe Illustrator中准备好我们的素材。您可以向自行车添加更多细节,例如阴影或高光或某些配件 – 任何使您的自行车更有细节的东西。还有需要确保将第二个踏板添加到自行车(后面的那个),因为我们将使踏板旋转。我已经将背景的大小更改为800 x 600像素,使其不那么方形。

此外,我们需要将每个将要移动的部分放在单独的层上。但是,您可以将静态部件组合在一起:例如,管子,车把和我们自行车的座椅。

在新文件中保存地面和云。我们也会为它们制作动画。将每个点和每个云保存在Adobe Illustrator中的单独图层上。

现在我们有三个Adobe Illustrator文件:一个用于自行车,一个用于地面,一个用于云。请查看下面屏幕截图中的“图层”面板,以便保持一切有序。记住是把自行车和地面和云分别存为三个文件。并且分好组。

【年末案列下】彩色自行车AE动画

步骤2

现在让我们启动Adobe After Effects并开始制作一个新项目!转到文件>导入>文件,然后选择我们在Adobe Illustrator中创建的* .ai自行车图像。

【年末案列下】彩色自行车AE动画

步骤3

然后导入种类选择为合成,素材尺寸选择图层大小,然后单击确定就可以开始制作动画了。不过现在,您可以在左侧的“项目”窗口中找到您的文件,然后双击它以在中心的“合成”窗口中将其打开。在本教程中,我们使用标准工作区。如果你发现你的面板和教程不一样,那么你可以在窗口里面进行调出!

【年末案列下】彩色自行车AE动画

2.制作自行车轮胎动画

步骤1

让我们从自行车最简单的动画部分开始制作吧。在底部找到 “时间轴” 面板。在 “时间轴” 面板的左侧区域, 您可以看到自行车的所有部件, 这些部件被放置在 adobe illustrator 中的不同图层上。这就是为什么我们一开始需要这样做, 所以现在我们可以独立地处理每一个部分。如果我们想把几个部分合并成一个小组, 使我们的工作更有组织, 那么我们可以使用以下方法。首先在左侧区域的时间轴面板里面选择我们的自行车的后轮胎连同它的挡泥板 , 鼠标右键单击, 并从弹出菜单中选择预合成。现在, 我们可以双击预合成组将其隔离。如果元素的数量不困扰您, 只需跳过此步骤, 双击所需的对象 (在我们的示例中, 使用的是后轮), 将其在单独的 “合成” 窗口中打开即可。

【年末案列下】彩色自行车AE动画

步骤2

现在, 我们已经隔离了后轮, 前往 “时间轴” 面板, 然后通过单击 “标签” 旁边的小三角形图标打开轮胎的下拉菜单。在这里我们会看见一个变换功能,然后我们点击变换的三角形图标展开隐藏的功能,为了使我们的车轮旋转, 我们需要使用旋转功能。所以点击旋转旁边的小秒表图标, 从而设置我们的第一个关键帧, 让我们开始制作动画吧!

【年末案列下】彩色自行车AE动画

步骤3

查看我们的时间轴面板的主要区域。它有一个时间指示器, 现在设置在时间轴的最开头, 并指在我们的第一个关键帧上, 即对象的初始位置。我们将为我们的车轮创建一个简单的双帧动画。选择时间指示器并将其移动到时间标尺的4s位置(你随意,不一定是4秒), 设置为结束帧。您可以单击 “时间轴” 面板左侧的菱形图标 (它位于 “旋转” 旁边), 以设置第二个关键帧;但是, 如果此时更改对象的任何参数, 它都将自动设置关键帧。在 “时间轴” 面板的底部, 您可以找到刻度滑块 (“山脉” 图标), 该滑块可帮助您在时间轴上放大和缩小。

【年末案列下】彩色自行车AE动画

步骤4

将时间指示器保持在其终点 (我们的第二个关键帧的位置), 单击蓝色旋转值, 并将度值设置为360。现在, 我们在第二个关键帧中就会有一个新的旋转值, 如下所示: 1x+0,0 °。如果你前后移动时间指示器, 你会看到车轮在旋转。您还可以在工作区的右侧区域的 “预览” 框中点击 “播放”, 以预览旋转效果。(直接空格键就好了)Image title

【年末案列下】彩色自行车AE动画

步骤5

让我们为自行车的前轮做同样的两帧动画。要使事情快速和容易, 请选择后轮的旋转属性, 就是我们刚刚做的动画, 并复制 (control-c) 他。然后前往前轮, 双击将其隔离, 选择 “旋转” 并粘贴 (control-v) 。现在我们有完全相同的动画前轮!(这一步是复制粘贴旋转的属性设置)如果不成功就手动设置。

【年末案列下】彩色自行车AE动画

您可以通过单击 “时间轴” 面板顶部的选项卡来返回主合成窗口并检查两个车轮的动画。为了使动画无限的循环, 可以前往 “时间轴” 面板并找到 “工作区结束” 滑块, 就在时间标尺下。将滑块拉回到4秒, 将其放置在与时间指示器相同的位置。现在, 如果您在 “预览” 面板中点击 “播放”, 您的动画将会一次又一次地无缝地重复。

【年末案列下】彩色自行车AE动画

3.踏板旋转动画

步骤1

首先, 我们制作前踏板的动画。它由三部分组成, 因此我们可以选择所有部分并进行预合成。双击预组合组, 并在需要时通过按 “ctrl-+” 或简单地滚动鼠标滚轮进行缩放 (矢量对象在此步骤中可能会出现一点像素化, 但这就是ae在实际工作中放大缩小方式)。让我们从粉红色的圆圈开始制作动画, 我们已经把它放在底部。在 “时间轴” 面板中打开其 “变换” 菜单。

【年末案列下】彩色自行车AE动画

步骤2

我们现在需要做和车轮一样的事情。点击 “旋转” 旁边的 “时间秒表”, 在时间轴的最开头创建我们的第一个关键帧。将时间指示器移动到4秒, 并将 “旋转” 值设置为360度, 从而创建第二个关键帧。

【年末案列下】彩色自行车AE动画

步骤3

让我们把踏板臂绑定到粉红色的圆圈上。首先, 我们需要确保踏板臂的支点在粉红圆圈的中心。保持踏板臂的选中状态, 按y(向后平移工具)并将中心锚点拖动到粉红色圆圈的中心。现在, 只需单击 “父子级的图标” 并将其拖到车轮图层上, 即可使用 “父子级” (时间轴面板中的一个漩涡图标, 位于图层旁边) 将踏板臂绑定到粉红色的车轮。您会看到一条连接的蓝线, 如下面的屏幕截图所示。也可以通过选择踏板臂层旁边的小下拉菜单手动选择父对象为旋转轮而不是无。

【年末案列下】彩色自行车AE动画

现在, 如果我们移动时间指示器, 我们将看到踏板臂与粉红色的车轮一起移动。然而, 绿色踏板部分仍然留在它的位置。让我们解决这个问题, 让整个动画完美起来。

【年末案列下】彩色自行车AE动画

步骤4

选择绿色踏板, 让我们尝试将其绑定到踏板臂。现在, 如果我们移动时间指示器, 我们将看到所有的动画是在一起的, 但踏板也围绕自己的轴旋转。这不是我们真正想要的。为了避免这种情况, 让我们使用一个简单而有用的技巧!

【年末案列下】彩色自行车AE动画

步骤5

打开绿色踏板的 “变换” 菜单, 然后单击 “旋转” 旁边的秒表以添加表达式(按住ALT点击秒表就可以打开表达式属性)。您将看到一个新的子菜单出现。现在选择 “表达式: 旋转” 旁边的 “涡轮图标”, 并将其链接到粉红色车轮的 “旋转” 值上。执行此操作后, 您会注意到 “时间轴” 面板中的文本字符串, 那便是提到绿色踏板的旋转表达式。我们在这里需要做的是将鼠标光标放在文本的末尾, 并添加以下值: *-1 (乘以负1)。现在, 如果你检查你的动画, 你会看到踏板的动画与整个动画是合理的。

 收藏