A quick getting started guide

快速入门指南

I recently took on a project where the team wanted to add some animated icons and a logo. Besides UX & UI design I am also a motion graphic designer so I took on the challenge of doing it with after Effects & Lottie to preserve the vector quality, here is how I did it.

我最近接受了 项目所在的球队想添加一些动画图标和徽标 。 除了UX和UI设计之外，我还是运动图形设计师，因此我接受了用After Effects＆Lottie 来保持矢量质量的挑战，这就是我的方法。

动画与网络 (Animation & web)

In the early 2000s when flash was the king of animation on the web and every designer let loose of their creativity it was very common to find crazy websites where if you had flash player installed, you could navigate through. Some of them looked more like games, there were no rules like there are now, and you could tell by looking at them. If we were to analyze them now, they probably wouldn't have passed one heuristic rule of UX. With the disappearance of flash and the use of HTML as a standard and the use of UX, those webs disappeared and now most of the webs we navigate are easy to use, read well….but they also look alike. The effort and work that came in creating an animation for the web were far too high, the designer would give their animation to developers that had very limited options for implementation. Creating the animation in code from scratch apart from being super expensive and tedious would end up with a result far from what was first designed. Until Lottie.

在2000年代初期，Flash是网络上的动画之王，每位设计师都放开了他们的创造力，这是很常见的发现疯狂的网站的地方，如果您安装了Flash Player，就可以浏览。 其中一些看起来更像是游戏，没有像现在这样的规则，您可以通过观察它们来判断。 如果我们现在分析它们，它们可能不会通过UX的启发式规则 。 随着Flash的消失，HTML作为标准的使用以及UX的使用， 这些网站消失了 ，现在我们浏览的大多数网站都易于使用，易于阅读……但是它们看起来也很相似。 为网络创建动画所付出的努力和工作 实在太多了 ，设计人员会将其动画提供给实施方式非常有限的开发人员。 从头开始用代码创建动画不仅要花费大量的精力和繁琐 ，最终的结果会与最初设计的结果相去甚远 。 直到洛蒂。

洛蒂 (Lottie)

In 2015 Hernan Torrisi conceived the idea of exporting an animation created in After Effects, with the use of the plugin he created called Bodymovin, on to a JSON format description of the animation.

2015年， Hernan Torrisi想到了将After Effects中创建的动画导出的想法，并使用他创建的名为Bodymovin的插件 导出到该动画的JSON格式描述中。

He also released the first-ever renderer for the format with a Javascript-based player for the browser.

他还发布了该格式的首个渲染器 ，并为浏览器提供了基于Java的播放器。

In 2017 the engineers at Airbnb saw the potential of the JSON based animations and together with the lead of animation, created IOS and Android libraries that could render the JSON files, they called them “Lottie”.

2017年 ，Airbnb的工程师们看到了基于JSON的动画的潜力 ，并与动画的领导者一起，创建了可以渲染JSON文件的 IOS和Android库 ，他们将它们称为“ Lottie”。

You can read more about the history here.

您可以在此处阅读有关历史的更多信息。

The developers at Airbnb made this an open-source as the claim on their web not only to release it free but to create a community. They created a GitHub to communicate to designers and engineers, it is so new and evolving so fast it's a good idea to keep up to date.

Airbnb的开发人员将此开源作为其网络上的声明 不仅可以免费发布它，还可以创建一个社区。 他们创建了一个GitHub以与设计师和工程师进行交流，它是如此新，并且发展得如此之快，因此保持最新是一个好主意。

LottieFiles (LottieFiles)

LottieFiles is an independent platform from Airbnb on which designers can upload, test, buy and download animations, to start you only need to create a free account.

LottieFiles是Airbnb的一个独立平台，设计人员可以在该平台上上传，测试，购买和下载动画 ，开始时您只需要创建一个免费帐户即可。

They are also the creators of the LottieFiles, a plugin for After Effects, that works similar to Bodymoving and allows us to preview the animation, upload it to the LottieFiles platform, save it on our computer, etc.

他们也是LottieFiles( After Effects的插件，其工作原理类似于Bodymoving，并允许我们预览动画， 将其上传到LottieFiles平台 ， 将其保存在我们的计算机上等。

入门 (Getting started)

To start with, you need to have the plugin installed, you can install Bodymovin or LottieFile.

首先，您需要安装插件 ，可以安装Bodymovin或 LottieFile 。

I was in the middle of a project when I needed to make these animations and didn't have much time to research it, so I did what I always do … instead of reading the instructions, I tried to work it out on my own…I created a simple animation for my logo that would appear on the top menu of the website. It was a drone that had helix rotating so I imported in layers the Illustrator files, made the helix 3D layers and rotated them.

当我需要制作这些动画并且没有太多时间研究它时 ，我正处于一个项目的中间，所以我做了我经常做的事情……而不是阅读说明， 而是尝试自己动手制作 ……我为徽标创建了一个简单的动画，该动画将出现在网站的顶部菜单上。 那是一架螺旋旋转的无人机，所以我将Illustrator文件分层导入，制作了螺旋3D图层并对其进行了旋转。

When I tried to export it, the window gave me so many errors. I then found out that not all the effects are supported by these file formats.As for today, 3D layers are not supported. So before doing your animation is worth checking out what is supported and what not on their web. It can sometimes work for the web but not for IOs or Android.

当我尝试导出它时，窗口给了我很多错误。 然后我发现这些文件格式 并不支持 所有效果 。就目前而言， 不支持3D图层。 因此，在制作动画之前，值得一看的是在网络上支持哪些内容以及不支持哪些内容。 有时它可以在网络上运行，但不适用于IO或Android。

该做什么和不该做什么 (Do’s and don’ts)

Creating animations for the web is not as creating them for a traditional Video, we need to take into consideration several setup and format options that we never had to think about before.

为网络创建动画不同于为传统视频创建动画，我们需要考虑一些以前从未考虑过的设置和格式选项 。

Here is a list of suggestions Lottie creators give:

这是Lottie创作者提供的建议列表：

• Keep it simple: JSON files should be as compact and small as possible for mobile products.

  保持简单： JSON文件应尽可能小 ，并且对于移动产品而言应尽可能小 。

• Use your After Effect skills to avoid extra keyframes by for example parenting instead of adding a keyframe on each layer.

  使用After Effects技能来避免多余的关键帧 ，例如通过育儿而不是在每个图层上添加关键帧。

• Avoid using path keyframes as they create a very large document from converting all the vertex from the path.

  避免使用路径关键帧，因为它们会转换路径中的所有顶点而创建非常大的文档。

• Wiggle, Autotrace and similar techniques that produce a large number of keyframes are best to be avoided, creating such a large file may make the JSON file very large and could impact negatively on the performance.

  最好避免 使用会产生大量关键帧的摆动，自动跟踪和类似技术 ，创建如此大的文件可能会使JSON文件变得非常大，并可能对性能产生负面影响 。

• Convert any Illustrator, EPS, SVG or PDF layer on to shape layers in After Effects, otherwise, it would generate an error.

  在After Effects中将任何Illustrator，EPS，SVG或PDF图层转换为形状图层 ，否则会产生错误。

• Export at 1X when exporting the file every pixel on the artwork will be translated on to points for IOS and DPS for Android. here is a collection of device metrics in DPS that Google has put together.

  导出文件时， 以1倍速导出，图稿上的每个像素都将转换为IOS和Android的DPS 点 。 这是一个集合 Google汇总的DPS中的设备指标。

• No expressions or effects are yet supported by Lottie.

  Lottie尚不支持任何表达式或效果 。

• Matte and alpha inverted mattes should be as small as possible, their size will impact the performance of the Lottie, so best to avoid them or keep them to the minimum.

  雾面和Alpha反面雾面应尽可能小 ，它们的大小会影响Lottie的性能，因此最好避免使用它们或将它们保持在最低水平。

• Blending modes such as Multiply, Screen or Add, aren’t yet supported nor are Luma mattes.

  尚不支持 混合模式，例如“ 乘”，“屏幕”或“加” ，“ 亮度”遮罩也不受支持 。

• Layer styles (drop shadow, overlay, stroke…)are not yet supported.

  尚不支持 图层样式 (阴影，叠加，笔触...) 。

• Nulls can be used but in order for them to work, we need to turn the visibility on and change the opacity to 0%.

  可以使用Null，但是为了使它们起作用，我们需要打开可见性并将不透明度更改为0％。

我们开始做吧 (Let’s do it)

So now that we know what I should have before creating the Logo in AE, Ill show you how I should have done it from for it to be right:

因此，既然我们知道在AE中创建徽标之前应该拥有的内容 ，下面向您介绍如何正确完成徽标：

Import layers, open composition, select all layers, right-click and select: Create / create shape from vector layers.

导入图层 ，打开合成，选择所有图层，单击鼠标右键，然后选择： 从矢量图层创建/创建形状。

This will create vector layers that won't give us trouble when exporting for Lottie.

这将创建矢量层，在导出Lottie时不会给我们带来麻烦。

We need to delete the AI files and work only with the vector layers.

我们需要删除AI文件，并且仅使用矢量层。

I wanted to animate in 3D the helix form the Logo, as it is not supported, I had to do it “the traditional way” and so I faked the rotation by animating the size in X. (width).

我想以3D形式对徽标的螺旋线进行动画处理，因为它不受支持，因此我不得不以“传统方式”进行操作，因此我通过将X大小(宽度)设置为动画来伪造旋转 。

After I got it rotating the speed I wanted, I created a null object to move the entire logo and make it “take off” and “ land”. I used the vectors in the position to make the movement smoother.

在以所需的速度旋转后，我创建了一个空对象来移动整个徽标，并使其“起飞”和“着陆”。 我在位置上使用矢量使运动更平滑。

As we read before null objects need to be turned to visible and 0% transparency in order to work.

正如我们之前所读过的那样， 空对象需要变为可见且透明度为0％才能起作用。

Once I had the animation as I wanted it, I opened the Lottie extension

有了所需的动画后，便打开了Lottie扩展程序

A window opens where you can view the animation, upload it to Lottie-files and save it on your pc. In order to do that you already need to have an account in Lottie-files.

将打开一个窗口，您可以在其中查看动画，将其上传到Lottie-files并将其保存在您的pc上 。 为此，您已经需要在Lottie文件中拥有一个帐户。

结论 (Conclusions)

This way of creating animations for the web is really exciting as it preserves the great quality, is easy to implement and allows us to create digital products that stand out.

这种为网络创建动画的方式确实令人兴奋，因为它保持了高质量， 易于实现，并且使我们能够创造出众的 数字产品。

Bus as we are animating for the web and not Video format we need to adapt and understand the new medium for which we are designing and its limitations.

在为网络动画而不是视频格式动画时， 我们需要适应和理解我们正在设计的新媒体 及其局限性。

I'm sure in the future we will be able to add so many more features to our animations but as for now, it is best to keep it simple, in this case, as in many others, Less is more.

我敢肯定，将来我们可以在动画中添加更多的功能 ，但是就目前而言， 最好保持简单 ，在这种情况下，就像在许多其他情况中一样， Less is more。