xd可以用ui动效效果吗_通过动画使UI设计栩栩如生：Adobe XD和After Effects-CSDN博客

xd可以用ui动效效果吗

Note — If you don’t fancy splashing out on an Adobe license, you can trial their products for 14 days each. That should give you more than enough time to play, check it out.

注意—如果您不愿意花钱购买Adobe许可证，则可以分别试用其产品14天。 那应该给您足够的时间来玩， 请检查一下 。

1.下载所有应用 (1. Download all the apps)

You’ll need to download two applications from the Adobe suite to use this method; Adobe XD and Adobe After Effects.

您需要从Adobe套件下载两个应用程序才能使用此方法。 Adobe XD和Adobe After Effects 。

Adobe XD — a vector-based graphics package aimed at the UI/UX crowd and very similar to the likes of Sketch and Figma
Adobe XD-针对UI / UX人群的基于矢量的图形包，与Sketch和Figma相似
Adobe After Effects — a motion-graphics package specialising in high-fidelity animation. Not to be confused with Adobe Premiere, which is primarily for stitching together footage
Adobe After Effects-专用于高保真动画的动态图形包。不要与Adobe Premiere混淆，后者主要用于将素材拼接在一起

2.准备我们的设计 (2. Prepare our design)

You can grab a copy of the sketch file for this tutorial, here.

您可以在此处获取本教程的草图文件的副本。

A list of layers for the design, well organised into groups and named. All redundant layers have been removed — Sketch layers

Take a look at the file. Pretty organised, huh? Anyone who has ever had the misfortune of exploring one of my Sketch files knows that I don’t often pay close attention to my layer hygiene, but here it’s important.

看一下文件。井井有条，是吗？任何曾经不幸浏览过我的Sketch文件之一的人都知道，我并不经常密切关注图层的卫生状况 ，但这很重要。

As we migrate our design across to XD and over to After Effects, it's really easy to lose track of layers and become confused by the way each application handles grouping. The easiest way to avoid all of that confusion is simply to tidy up our sketch file before we begin.

当我们将设计迁移到XD以及After Effects时，很容易失去对层的跟踪并因每个应用程序处理分组的方式而感到困惑。避免所有这些混乱的最简单方法就是在开始之前整理一下草图文件。

A couple of best practice guidelines to observe here;

这里有一些最佳实践准则；

Name all of your layers and remove any unnecessary ones. The less layers we take forward, the better
全部命名去除所有不必要的层。我们前进的层数越少越好
Be considerate of groups. Groups are great, but beware they cannot be easily ungrouped once we move into Adobe After Effects
体谅团体。分组很棒，但是请注意，一旦我们进入Adobe After Effects，就不能轻易将它们分组
Take stock of any unusual layer settings (e.g. multiple drop shadows)
盘点任何不寻常的图层设置(例如多个阴影)
Center your artwork on a HD (1920x1080) or 4k canvas (3840x2160)
在HD(1920x1080)或4k画布(3840x2160)上将作品居中

3.将我们的Sketch设计转换为XD设计 (3. Convert our Sketch design into an XD design)

In order to animate our design, we’re going to need access to the various layers, groups and masks we setup in the original sketch file.

为了使我们的设计动起来，我们需要访问在原始草图文件中设置的各个层，组和蒙版。

It turns out that this is easier than it sounds. Adobe have created two fantastic integrations that make doing this pretty straightforward.

事实证明，这比听起来容易。 Adobe已经创建了两个出色的集成，使这样做非常简单。

XD natively loads Sketch files, with a bloody good degree of accuracy too in my experience
XD以本机方式加载Sketch文件，根据我的经验，它也具有很高的准确性
XD integrates seamlessly with After effects
XD与After Effects无缝集成

Simply open up the Sketch file directly from XD and make a quick pass over the design to make sure everything looks ship shape. On closer inspection of my Sketch file I noticed that XD doesn’t support multiple drop shadows. No matter, they can be re-added in After Effects later.

只需直接从XD打开Sketch文件，然后快速遍历设计以确保一切看起来都很好。在仔细检查我的Sketch文件时，我发现XD不支持多个投影。没关系，以后可以在After Effects中重新添加它们。

In XD, select the artboard, then hit File > Export > Export to After Effects

在XD中，选择画板，然后单击“ File > Export > Export to After Effects

If you haven’t already kicked up a new After Effects project, XD will create you one and import the design as a composition.

如果尚未启动新的After Effects项目，则XD将为您创建一个项目并将设计作为合成导入。

Image for post — Layered Sketch design, loaded into Adobe After Effects

4.动画，动画，动画 (4. Animate, animate, animate)

Opening the newly created composition, you will find that all the layers of the design have been preserved. You can now make use of all of the after effects effects and keyframe manipulators to create really awesome animations.

打开新创建的合成，您会发现设计的所有层均已保留。现在，您可以利用所有的After Effects效果和关键帧操纵器来创建非常棒的动画。

For a step by step guide on animating this sequence, follow the video walkthrough below.

有关动画制作此序列的逐步指南，请按照下面的视频演练进行操作。

Video walkthrough — A step-by-step guide to animating this design

视频演练—动画化此设计的分步指南

Enjoyed this tutorial? Post a comment and share your design success!

喜欢本教程吗？ 发表评论并分享您的设计成功！

Happy sketching!

素描愉快！