自动动画的力量：Adobe XD如何改善用户体验设计的10个示例

自动动画，使您能够轻松地创建逼真的动画过渡的原型，是最大的除了到的Adobe XD的原型还没有的功能。为了演示您可以使用Auto-Animate创造的流畅效果，我们采访了Adobe高级XD传播者Howard Pinsky（他还经营一个涵盖XD新闻的受欢迎的YouTube频道）和Adobe XD高级产品经理Jonathan Pimento。

霍华德（Howard）和乔纳森（Jonathan）都在广泛地研究自动动画，在本文中，他们将向您展示一些令人惊叹的新功能实例，以及如何改进用户体验设计。

首先，让我们从乔纳森的动画开始：

过滤咖啡应用

借助Adobe XD的新“自动动画”功能，我可以对矢量路径进行动画处理，以修改咖啡，水和牛奶的不同含量。设置不同矢量路径动画的功能使您可以为图标和其他UI元素创建一些漂亮的动画。

卷盘iPad应用

自动动画允许您对同一对象的属性差异进行动画处理。即使没有时间轴，您也可以在XD中实现一些基本的排序。请注意场景如何从底部开始依次滑动？您可以通过将它们从“开始”屏幕上的画板中移出并堆叠起来，使其一个接一个地动画来实现相同的效果。

卷轴移动应用

该示例演示了如何轻松地将“轻击”，“拖动”和“时间”等手势与“自动动画”结合起来，以构建移动端到端的体验。通过使用新的缓动功能（如反弹，捕捉和结束）可以实现微妙的缓动效果。

滑卡

本示例说明如何使用“自动动画”来设置蒙版和图像的位置动画。我已经设置了使用拖动的示例，然后使用“自动动画”功能，通过重新定位和调整遮罩的大小轻松地对卡片图像进行了动画处理。

接下来，看一下霍华德使用自动动画创建的内容：

汉堡爆炸

这是一个有趣的互动过程。在Dribbble上看到爆炸汉堡的静态图像后，我想到了将其变为现实的想法。借助Adobe XD现在支持Illustrator文件的功能，我从Adobe Stock中抓取了一个看上去很美味的汉堡，并将其直接弹出到XD中。从那里，我利用自动动画和拖动触发器来创建交互，以模拟用户如何简单地将浇头拖走。

照片编辑原型

创建较小的交互很有趣，但是对于这个项目，我想更深入地研究。看到我不断地在手机上编辑照片，我想使用Adobe XD建立类似的体验，包括图库，裁剪/旋转和图像调整。特别是，裁剪交互是一个有趣的交互，因为它涉及对蒙版的形状和图像进行动画处理。

移动滚动互动

这张照片是在一些用户问我XD是否支持“滚动”作为触发之后发生的。尽管还没有（只是），但当然可以仅使用两个或三个画板和“自动动画”来创建类似的交互。

视差着陆页

我不确定为什么，但是我一直是视差交互的爱好者（当它们正确完成时），所以一旦发布自动动画，我决定开始进行实验。像许多其他示例一样，我只需要设计各种画板，XD就会处理背景中所有复杂的关键帧。进行这种交互的想法是，用户可以将鼠标悬停在各个目的地的上方以展开它们，然后单击一个以查看更多详细信息并开始视差效果。

日夜切换开关

虽然我喜欢设计完整的项目，但有时在单个元素上工作很有趣-像这样的开关！使用导入的Illustrator文件，我将各种昼/夜图层添加到药丸状的蒙版中，然后设计了两种状态（昼/夜），并确保在每个画板上移动元素。由于路径在XD中具有精美的动画效果，因此创建移动的月亮非常简单。

特斯拉苹果手表概念

像特斯拉一样精通技术的人，令我惊讶的是，他们没有官方的Apple Watch应用程序。因此，就像任何好奇的设计师都会做的那样，我开始考虑用例。通过使用XD，我预想了如何使用简单的拖动手势来实现躯干/碰撞交互的外观和感觉。

也可以在Howard的Dribbble页面上找到更多示例。

加入社区

您可以使用“自动动画”进行处理的可能性是无限的。我们很乐意看到您使用新功能创建的内容，因此请在Twitter上与@AdobeXD团队联系，并确保包含#AdobeXD主题标签。您也可以在Facebook上与该团队联系，并在Behance上共享您的原型，使用#MadeWithAdobeXD标记它们，然后在“使用的工具”下选择Adobe XD，以便有机会在Adobe XD时事通讯中进行介绍。

让我们为网络动画！