---
title: "Lottie: co to jest? Słownik pojęć"
description: "Lottie to format animacji wektorowych zapisanych w pliku JSON, najczęściej eksportowanych z After Effects."
url: https://fluostudio.pl/baza-wiedzy/slownik/lottie/
---

[Animacja i wideo](https://fluostudio.pl/baza-wiedzy/slownik/?dzial=animacja)

# Lottie

Inaczej animacja Lottie, Bodymovin, dotLottie

Lottie to format animacji wektorowych zapisanych w pliku JSON, najczęściej eksportowanych z After Effects. Na stronach i w aplikacjach zwykle waży mniej niż film i jest ostry w każdym rozmiarze.

## W skrócie

-   Eksport z After Effects: wtyczka Bodymovin albo LottieFiles
-   Plik .json albo spakowany .lottie
-   Odtwarzacze na strony, iOS i Androida

## Usługi

-   [Motion design](https://fluostudio.pl/uslugi/projektowanie-graficzne/motion-design/)
-   [UI / UX design](https://fluostudio.pl/uslugi/product-design/ui-ux-design/)

Programista dostaje animowaną ikonę jako GIF. Na ostrym ekranie telefonu jest rozmyta, plik jest ciężki, a na ciemnym tle krawędzie się strzępią, bo GIF nie zna półprzezroczystości. Zmiana koloru oznacza nowy eksport.

Lottie działa inaczej. Plik nie zawiera gotowych klatek obrazu, tylko opis kształtów i kolorów oraz [klatki kluczowe](https://fluostudio.pl/baza-wiedzy/slownik/klatka-kluczowa/) z krzywymi ruchu. Odtwarzacz rysuje animację na bieżąco, więc jest ostra w każdym rozmiarze. Biblioteki do odtwarzania udostępnił Airbnb, a plik eksportuje się z After Effects specjalną wtyczką. Na stronie animację można zapętlić, uruchomić po przewinięciu do sekcji, zatrzymać na wybranej klatce albo odtworzyć po dotknięciu przycisku.

Najlepiej sprawdza się przy płaskiej grafice: [ikonach](https://fluostudio.pl/baza-wiedzy/slownik/ikonografia/), ilustracjach, [mikrointerakcjach](https://fluostudio.pl/baza-wiedzy/slownik/mikrointerakcja/), ekranach powitalnych w aplikacjach i [animacji logo](https://fluostudio.pl/baza-wiedzy/slownik/animacja-logo/) na stronie. Rendery 3D, zdjęcia i dłuższe filmy zostają przy wideo.

## Ograniczenia

Lottie obsługuje tylko część tego, co potrafi After Effects. Kształty, maski, kolory i ruch przechodzą dobrze. Wiele efektów, w tym rozmycia, poświaty, cząsteczki i efekty z zewnętrznych wtyczek, nie przechodzi albo działa tylko w części odtwarzaczy. Zdjęcia da się osadzić, ale plik szybko puchnie. Bardzo złożona animacja z wieloma maskami potrafi też obciążyć słabszy telefon bardziej niż zwykły film.

O formacie decyduje się więc przed animowaniem. Animator od początku używa tylko tego, co da się wyeksportować, i sprawdza plik w odtwarzaczu, w którym animacja będzie grała. Podgląd w After Effects pokaże też efekty, których odtwarzacz nie zna. Ruch zrobiony bez tej wiedzy często trzeba potem przerabiać.

## Zobacz też

-   [Animacja i wideo Motion design Motion design to projektowanie ruchu w grafice. Animowane logo, ikony, napisy, wykresy i przejścia pokazują charakter marki i tłumaczą rzeczy szybciej niż statyczny obraz.](https://fluostudio.pl/baza-wiedzy/slownik/motion-design/)
-   [Strony www Mikrointerakcja Mikrointerakcja to drobna reakcja interfejsu na jedno działanie użytkownika, np. zmiana przycisku po naciśnięciu albo animacja licznika w koszyku. Pokazuje, że system przyjął polecenie i co dzieje się dalej.](https://fluostudio.pl/baza-wiedzy/slownik/mikrointerakcja/)
-   [Animacja i wideo Animacja logo Animacja logo to krótki, zwykle kilkusekundowy ruch, w którym znak marki pojawia się, składa albo zmienia. Otwiera i zamyka filmy, spoty, prezentacje i posty.](https://fluostudio.pl/baza-wiedzy/slownik/animacja-logo/)
-   [Identyfikacja wizualna Ikonografia Ikonografia to zestaw ikon marki narysowanych według wspólnych zasad: tej samej grubości linii, narożników, siatki i stylu. Dzięki temu ikony na stronie, w katalogu i w aplikacji wyglądają jak jedna rodzina.](https://fluostudio.pl/baza-wiedzy/slownik/ikonografia/)
-   [Strony www Front-end Front-end to część strony lub aplikacji, którą użytkownik widzi i obsługuje, czyli układ, przyciski, formularze i animacje. Powstaje w HTML, CSS i JavaScripcie i działa w przeglądarce.](https://fluostudio.pl/baza-wiedzy/slownik/front-end/)
-   [Animacja i wideo Easing Easing to sposób, w jaki animowany element przyspiesza i zwalnia. Dzięki niemu ruch nie jest mechanicznie równy, tylko rusza i hamuje jak prawdziwy przedmiot.](https://fluostudio.pl/baza-wiedzy/slownik/easing/)

Hasło pojawia się też w: [Klatka kluczowa](https://fluostudio.pl/baza-wiedzy/slownik/klatka-kluczowa/), [Motion guidelines](https://fluostudio.pl/baza-wiedzy/slownik/motion-guidelines/)

## Potrzebujesz ruchu, który pasuje do marki? Pokażemy, jak to robimy.

Na pierwszej rozmowie sprawdzimy, czy i jak możemy pomóc, bez zobowiązań.

[Porozmawiajmy](https://fluostudio.pl/kontakt/) [Umów 30 minut konsultacji](https://calendly.com/anita-fluo/darmowa-konsultacja-30-minut)