當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

lottie 动画_使用After Effects和Lottie制作网络动画而不会损失质量

發布時間：2023/12/10 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 lottie 动画_使用After Effects和Lottie制作网络动画而不会损失质量小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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.

我最近接受了項目所在的球隊想添加一些動畫圖標和徽標 。除了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’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中創建的動畫導出的想法，并使用他創建的名為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圖層并對其進行了旋轉。

Gif animation of the Logo徽標的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.

當我嘗試導出它時，窗口給了我很多錯誤。 然后我發現這些文件格式 并不支持 所有效果 。就目前而言， 不支持3D圖層。 因此，在制作動畫之前，值得一看的是在網絡上支持哪些內容以及不支持哪些內容。有時它可以在網絡上運行，但不適用于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.

為網絡創建動畫不同于為傳統視頻創建動畫，我們需要考慮一些以前從未考慮過的設置和格式選項 。

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時不會給我們帶來麻煩。

Converting layers轉換圖層

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形式對徽標的螺旋線進行動畫處理，因為它不受支持，因此我不得不以“傳統方式”進行操作，因此我通過將X大小(寬度)設置為動畫來偽造旋轉 。

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.

在以所需的速度旋轉后，我創建了一個空對象來移動整個徽標，并使其“起飛”和“著陸”。我在位置上使用矢量使運動更平滑。

Null object position vectors空對象位置向量

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擴展程序

Opening Lottie Extension開張彩票擴展

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文件中擁有一個帳戶。

Lottie Extension樂蒂擴展

結論 (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。

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