跳到主要内容

没有编写代码行的原型动画

知道如何编码不应该是能够对设计思想进行原型设计并使其运行的先决条件。在本教程中,我将向您介绍如何使用Adobe快速模拟您的UI动画创意边缘动画CC

对于寻求更轻松地向客户或团队成员传达动画创意的设计师而言,Edge Animate等基于视觉时间轴的工具是理想的原型设计解决方案。我们的例子只是在线框图阶段,但这是开始考虑UI动画的最佳时机。越早越好!

观看本教程的独家截屏视频

在接下来的步骤中,我们将构建一个快速原型,说明非画布菜单如何为我们的虚构项目表现。我们将使用for-position-only(FPO)内容,并专注于如何使用Edge Animate的时间轴来快速生成一个工件,我们可以使用它来测试我们的想法并演示我们想到的行为。我们将介绍如何使用Edge Animate时间轴进行动画处理,以及如何通过添加动作和标签来演示交互性。

尽早进行原型设计通常是了解UI动画创意是否有效的最佳方法。 Edge Animate肯定不会产生生产就绪的输出,但它在我们熟悉的浏览器环境中工作的事实使它成为网页设计师非常合适的原型选择。

01.新项目

当您首次在Edge中打开一个新项目时,您将看到一个空白的Stage图层和默认尺寸。对于此原型,我们将使用1024x768px并通过舞台设置中的下拉菜单将Overflow属性设置为Hidden。

02.开始画画

在编写本文时,Edge Animate无法导入已完成的分层文件,但是当您使用它来构建原型时,这并不是什么大问题。首先使用矩形工具绘制将成为菜单背景的矩形,然后导入并放置菜单SVG图标。我使用矩形工具绘制了菜单图标;它只是三个充满白色的小矩形,所以我们可以稍后单独制作动画。

03.添加字体

Edge可以使用网络字体,使您更容易在这些原型中反映您的设计选择。要在基本屏幕字体之外添加字体,请从字体下拉菜单选项中选择添加字体。从字体模式窗口中选择Open San Condensed。 (您添加的任何字体也将列在“库”面板的“字体”部分中。)

04.做一些符号

符号是将元素组合在一起的一种方式。我们将动画菜单图标和菜单,因此为每个菜单创建符号将使它们更易于使用。选择所有菜单文本,图标和菜单背景,然后将它们转换为符号(“修改”>“转换为符号”)。将其命名为Menu。对构成菜单图标的三条线执行相同操作。将此符号命名为Hamburger_Icon,或您喜欢的其他名称。

05.动画!

让我们来看一些动画!我们首先将菜单从关闭状态设置为打开状态。从播放头在0:00的主时间轴中选择Hamburger_Icon和Menu图层,并将它们分别向左移动到10px和-250px。将播放头移动到大约半秒标记并将它们完全移动到舞台上。关键帧和过渡将自动在时间轴上创建。选择时间轴上的两个过渡,右键单击并选择Easing。将这些设置为缓动对话框中的EaseInOutQuad,以获得对默认线性缓动的改进。

06.退出动画

我们可以重复使用并反转我们的开场动画,以便在闪光灯中为菜单的出口设置动画。在时间轴上选择两个图层的过渡并复制它们。现在将播放头向前移动到0.75 秒,并在该时间点粘贴时间轴上的副本。保持选中新粘贴的过渡,右键单击它们并选择“反转过渡”。退出动画完成!

07.关闭按钮

我们的三条线将在中间相遇然后旋转以为关闭按钮创建一个X.我们首先将顶部和底部线条设置为动画,以满足中间的线条。选中顶部矩形后,单击“属性”面板中Y值旁边的菱形以生成顶部关键帧。移动到0.4秒并向下移动矩形以与中间的矩形重叠。将自动为您创建两个关键帧之间的过渡。重复底部矩形,将其向上移动以与中间的另外两个相交。

要制作X形,请将播放头保持0.4秒,并在“属性”面板的“变换”部分中为底部和中间矩形添加一个用于旋转的关键帧。将播放头向前拖动到0.67秒,然后将底部矩形旋转45度,将中间矩形旋转-45度以创建X形状。我在旋转开始时将顶部矩形的不透明度设置为0。

08.标签和触发器

对于这个原型,菜单的动画分为三个阶段:闭合状态,开始动画和结束动画。我们将向主时间轴添加标签和触发器,以表示这些阶段。首先,选择我们到目前为止创建的所有动画并将其及时移出0.2秒,这样我们就有了一些工作空间。随着播放头0:00,添加时间轴标签(时间轴>插入标签)并将其命名为“开始”。在 0.1秒,添加时间线触发器(时间轴>插入触发器)并从右侧的模态选项中选择停止。这将停止主时间轴,直到采取某些行动。

我们还需要阻止我们的汉堡包图标动画。将播放头放在当前位置,转到Hamburger_Icon图层,然后直接从图层名称下的播放选项中选择停止。

将播放头移动到开始动画开始的位置。在此处添加一个名为Open的标签。同时,为Hamburger_Icon添加Play的播放动作。要添加停止操作,以便我们不直接进入菜单关闭动画,将播放头移动到大约0.8秒并在此处添加触发器以停止主时间轴。

要标记结束片段,请将播放头移动到关闭动画开始的位置,然后添加名为“关闭”的标签。在同一时间点,我们希望我们的汉堡包图标反向播放动画。为此,请为Play Reverse添加播放操作。

最后,为了确保在关闭完成后我们回到Start位置以关闭循环,在时间轴的最后添加一个触发器。从Trigger actions菜单中选择Stop At,然后用Start替换括号中的1000。生成的代码行将是Sym.stop( “开始”);。我们的标记都到位了!

09.隐形按钮

为了增加交互性,接下来我们将为原型添加两个不可见的按钮。这不是我在生产工作中推荐的东西,但是,因为这是一个原型,快速和肮脏的是我们如何滚动!

在时间轴的开头,在舞台左角的菜单图标上绘制一个正方形。将图层命名为Button_Open并将不透明度设置为0.在仍然选中该矩形的情况下,单击图层名称左侧的括号以打开操作窗口。使用+按钮,选择点击作为添加动作的交互。从右侧菜单中选择Play From并将1000替换为Open。短代码将会读取Sym.play( “打开”);

要完成此按钮,请将播放头向前移动到打开标签。此时,创建一个新的显示关键帧并将其设置为Off。一旦开始动画开始,该按钮将不再存在。有点脆弱,当然。但足够稳定的原型。

在0.8秒重复此操作以创建一个类似的按钮,用于关闭菜单并设置单击操作以从关闭标签播放。短代码应为:Sym.play( “关闭”);。将显示关键帧设置为“开”,以便此按钮仅在打开动画播放后才会出现。我们可以在浏览器中预览我们的原型(文件>在浏览器中预览),以仔细检查一切是否按预期工作。

10. FPO内容

现在我们的动画已经完成,让我们添加FPO内容来演示这个菜单应该如何与其他内容相关联。我们的原型菜单应该滑过其余内容的顶部。默认情况下,当我们现在导入我们的FPO图像时,它们将出现在我们的动画内容之上。我们可以通过将这两个图像移动到右侧元素面板的底部来重新排序图层。

11.发布!

我们已准备好导出我们的原型以与我们的团队或客户分享。我们可以打包我们需要共享的文件。要发布我们的原型,只需转到文件>发布。将在与工作文件相同的位置创建名为“发布”的文件夹。在其中将是一个web文件夹,其中包含您需要共享原型的图像,JavaScript和HTML文件。有了这个,我们对这个非画布菜单原型的第一次尝试就可以分享!

Val Head

这篇文章最初出现在网络杂志问题254。



翻译字数超限