lottie 動畫

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.

我最近接受了 項目所在的球隊想添加一些動畫圖標(biāo)和徽標(biāo) 。 除了UX和UI設(shè)計之外，我還是運(yùn)動圖形設(shè)計師，因此我接受了用After Effects＆Lottie 來保持矢量質(zhì)量的挑戰(zhàn)，這就是我的方法。

動畫與網(wǎng)絡(luò) (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是網(wǎng)絡(luò)上的動畫之王，每位設(shè)計師都放開了他們的創(chuàng)造力，這是很常見的發(fā)現(xiàn)瘋狂的網(wǎng)站的地方，如果您安裝了Flash Player，就可以瀏覽。 其中一些看起來更像是游戲，沒有像現(xiàn)在這樣的規(guī)則，您可以通過觀察它們來判斷。 如果我們現(xiàn)在分析它們，它們可能不會通過UX的啟發(fā)式規(guī)則 。 隨著Flash的消失，HTML作為標(biāo)準(zhǔn)的使用以及UX的使用， 這些網(wǎng)站消失了 ，現(xiàn)在我們?yōu)g覽的大多數(shù)網(wǎng)站都易于使用，易于閱讀……但是它們看起來也很相似。 為網(wǎng)絡(luò)創(chuàng)建動畫所付出的努力和工作 實(shí)在太多了 ，設(shè)計人員會將其動畫提供給實(shí)施方式非常有限的開發(fā)人員。 從頭開始用代碼創(chuàng)建動畫不僅要花費(fèi)大量的精力和繁瑣 ，最終的結(jié)果會與最初設(shè)計的結(jié)果相去甚遠(yuǎn) 。 直到洛蒂。

Lottie’s name樂蒂的名字

洛蒂 (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中創(chuàng)建的動畫導(dǎo)出的想法，并使用他創(chuàng)建的名為Bodymovin的插件 導(dǎo)出到該動畫的JSON格式描述中。

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

他還發(fā)布了該格式的首個渲染器 ，并為瀏覽器提供了基于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的動畫的潛力 ，并與動畫的領(lǐng)導(dǎo)者一起，創(chuàng)建了可以渲染JSON文件的 IOS和Android庫 ，他們將它們稱為“ Lottie”。

You can read more about the history here.

您可以在此處閱讀有關(guān)歷史的更多信息。

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的開發(fā)人員將此開源作為其網(wǎng)絡(luò)上的聲明 不僅可以免費(fèi)發(fā)布它，還可以創(chuàng)建一個社區(qū)。 他們創(chuàng)建了一個GitHub以與設(shè)計師和工程師進(jìn)行交流，它是如此新，并且發(fā)展得如此之快，因此保持最新是一個好主意。

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的一個獨(dú)立平臺，設(shè)計人員可以在該平臺上上傳，測試，購買和下載動畫 ，開始時您只需要創(chuàng)建一個免費(fèi)帳戶即可。

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，并允許我們預(yù)覽動畫， 將其上傳到LottieFiles平臺 ， 將其保存在我們的計算機(jī)上等。

入門 (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.

當(dāng)我需要制作這些動畫并且沒有太多時間研究它時 ，我正處于一個項目的中間，所以我做了我經(jīng)常做的事情……而不是閱讀說明， 而是嘗試自己動手制作 ……我為徽標(biāo)創(chuàng)建了一個簡單的動畫，該動畫將出現(xiàn)在網(wǎng)站的頂部菜單上。 那是一架螺旋旋轉(zhuǎn)的無人機(jī)，所以我將Illustrator文件分層導(dǎo)入，制作了螺旋3D圖層并對其進(jìn)行了旋轉(zhuǎn)。

Gif animation of the Logo徽標(biāo)的Gif動畫

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.

當(dāng)我嘗試導(dǎo)出它時，窗口給了我很多錯誤。 然后我發(fā)現(xiàn)這些文件格式 并不支持 所有效果 。就目前而言， 不支持3D圖層。 因此，在制作動畫之前，值得一看的是在網(wǎng)絡(luò)上支持哪些內(nèi)容以及不支持哪些內(nèi)容。 有時它可以在網(wǎng)絡(luò)上運(yùn)行，但不適用于IO或Android。

Supported in Lottie在Lottie中受支持

該做什么和不該做什么 (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.

為網(wǎng)絡(luò)創(chuàng)建動畫不同于為傳統(tǒng)視頻創(chuàng)建動畫，我們需要考慮一些以前從未考慮過的設(shè)置和格式選項 。

Here is a list of suggestions Lottie creators give:

這是Lottie創(chuàng)作者提供的建議列表：

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

  保持簡單： JSON文件應(yīng)盡可能小 ，并且對于移動產(chǎn)品而言應(yīng)盡可能小 。

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

  使用After Effects技能來避免多余的關(guān)鍵幀 ，例如通過育兒而不是在每個圖層上添加關(guān)鍵幀。

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

  避免使用路徑關(guān)鍵幀，因?yàn)樗鼈儠D(zhuǎn)換路徑中的所有頂點(diǎn)而創(chuàng)建非常大的文檔。

• 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.

  最好避免 使用會產(chǎn)生大量關(guān)鍵幀的擺動，自動跟蹤和類似技術(shù) ，創(chuàng)建如此大的文件可能會使JSON文件變得非常大，并可能對性能產(chǎn)生負(fù)面影響 。

• 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圖層轉(zhuǎn)換為形狀圖層 ，否則會產(chǎn)生錯誤。

• 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.

  導(dǎo)出文件時， 以1倍速導(dǎo)出，圖稿上的每個像素都將轉(zhuǎn)換為IOS和Android的DPS 點(diǎn) 。 這是一個集合 Google匯總的DPS中的設(shè)備指標(biāo)。

• No expressions or effects are yet supported by Lottie.

  Lottie尚不支持任何表達(dá)式或效果 。

• 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反面霧面應(yīng)盡可能小 ，它們的大小會影響Lottie的性能，因此最好避免使用它們或?qū)⑺鼈儽３衷谧畹退健?

• 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中創(chuàng)建徽標(biāo)之前應(yīng)該擁有的內(nèi)容 ，下面向您介紹如何正確完成徽標(biāo)：

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

導(dǎo)入圖層 ，打開合成，選擇所有圖層，單擊鼠標(biāo)右鍵，然后選擇： 從矢量圖層創(chuàng)建/創(chuàng)建形狀。

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

這將創(chuàng)建矢量層，在導(dǎo)出Lottie時不會給我們帶來麻煩。

Converting layers轉(zhuǎn)換圖層

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

我們需要刪除AI文件，并且僅使用矢量層。

Vector layers矢量層

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形式對徽標(biāo)的螺旋線進(jìn)行動畫處理，因?yàn)樗皇苤С?#xff0c;因此我不得不以“傳統(tǒng)方式”進(jìn)行操作，因此我通過將X大小(寬度)設(shè)置為動畫來偽造旋轉(zhuǎn) 。

Scale animation in X在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.

在以所需的速度旋轉(zhuǎn)后，我創(chuàng)建了一個空對象來移動整個徽標(biāo)，并使其“起飛”和“著陸”。 我在位置上使用矢量使運(yùn)動更平滑。

Null object position vectors空對象位置向量

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

正如我們之前所讀過的那樣， 空對象需要變?yōu)?strong>可見且透明度為0％才能起作用。

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

有了所需的動畫后，便打開了Lottie擴(kuò)展程序

Opening Lottie Extension開張彩票擴(kuò)展

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上 。 為此，您已經(jīng)需要在Lottie文件中擁有一個帳戶。

Lottie Extension樂蒂擴(kuò)展

結(jié)論 (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.

這種為網(wǎng)絡(luò)創(chuàng)建動畫的方式確實(shí)令人興奮，因?yàn)樗３至?strong>高質(zhì)量， 易于實(shí)現(xiàn)，并且使我們能夠創(chuàng)造出眾的 數(shù)字產(chǎn)品。

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.

在為網(wǎng)絡(luò)動畫而不是視頻格式動畫時， 我們需要適應(yīng)和理解我們正在設(shè)計的新媒體 及其局限性。

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。

翻譯自: https://uxplanet.org/animations-for-the-web-with-after-effects-lottie-without-losing-quality-9f597b1fcfec

lottie 動畫

總結(jié)

以上是生活随笔為你收集整理的lottie 动画_使用After Effects和Lottie制作网络动画而不会损失质量的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。