Czas czytania: ok. 7 min
Data: 02.06.2022
Animacja Lottie Czym jest i czy warto ją stosować?
Animacja odgrywa coraz istotniejszą rolę. Potrafi wykreować lepszy przekaz i zwrócić na siebie większą uwagę niż obiekt statyczny. Między innymi właśnie dlatego sięgamy po nią znacznie częściej. Możemy zaobserwować ją na różnych social mediach, billboardach reklamowych, a także na stronach internetowych. Nie bez powodu pojawiła się też w ostatnich trendach web designu. Aby uzyskać lepszą jakość animacji, stosujemy różne rozwiązania. Do jednych z nich należy właśnie Lottie.
Czym jest? Jak wykonać taką animację i gdzie można ją wykorzystać? Sprawdźmy to!
Animacja Lottie - co to
Animacją Lottie określa się format pliku dla animacji wektorowej. Sama nazwa wzięła się od imienia niemieckiej reżyserki i projektantki animacji sylwetkowej - Charlotte Reiniger (1899 – 1981).
Animacja Lottie jest oparta na JSON’ie (JavaScript Object Notation), który jest lekkim, tekstowym formatem wymiany danych komputerowych. Jest to alternatywa znanych dla większości plików GIF i APNG (Animated Portable Network Graphics, czyli rozszerzenie PNG).
Jest to plik wektorowy, ale może zawierać w sobie również pewne elementy grafiki rastrowej.
Jak zrobić animację Lottie?
Aby rozpocząć tworzenie animacji Lottie na stronie, musisz najpierw sfinalizować swój projekt i przygotować go do animacji. Na tym etapie pamiętaj:
- Lepiej używać tekstur wektorowych.
- Im mniej punktów i części tekstury, tym lepiej.
- Unikaj masek w animacji.
Jeśli chcesz uzyskać plik Lottie, kolejnym krokiem będzie animowanie niektórych ilustracji i przekonwertowanie ich do formatu JSON. Postaraj się tutaj powstrzymać od tworzenia efektów i animuj głównie właściwości warstw, czyli: położenie, obrót, skalę i krycie. Możesz też zadbać o animację ścieżki, którą Lottie umożliwia.
Plusy, którymi chwali się animacja Lottie
-
Możliwość stosowania na wielu platformach - Android, iOS, web bez potrzeby dodatkowych poprawek.
-
Bezproblemowa skalowalność (bez pojawiania się pikseli)
-
Niewielkie rozmiary (lekkość) plików w porównaniu do GIF-ów, PNG-ów i JPEG-ów.
-
Prosta edycja plików - zmiany koloru tła lub warstw, szybkości ruchu, a także innych elementów.
-
Wysoka jakość animacji - połączenie elementów wektorowych i rastrowych.
-
Łatwy dostęp do darmowych zasobów - darmowe animacje Lottie można pobrać wchodząc na LottieFiles i Iconscout.
-
Nieskomplikowany eksport plików - samodzielnie wykonane animacje w Adobe After Effects można eksportować wykorzystując wtyczki LottieFiles lub Bodymovin
Oczywiście animacje Lottie będą miały wiele zalet, ale jak w przypadku wszystkiego nie obejdzie się też bez wad.
Zaliczamy do nich:
-
Jest dostosowane do After Effect - nie można korzystać z innych tego typu programów
-
wiele dodatkowych wtyczek do After Effect jest płatnych
-
-
Pracujemy tylko w obrębie jednego obrazu - nie możemy tworzyć efektownych przejść między wieloma
Ponad 600 000 ludzi tworzy strony za darmo, bez kodowania i przy wsparciu AI. Zobacz, jakie to proste
Różnica między Lottie a formatem GIF
Po rozwinięciu skrótu GIF otrzymamy Graphics Interchange Format (w dosłownym tłumaczeniu format wymiany grafiki). GIF jest formatem obrazu bitmapowego, czyli takiego obrazu cyfrowego, który wykorzystuje rastry. Został wprowadzony do użytku w 1987, czyli jeszcze zanim w sieci pojawiła się pierwsza strona internetowa, a za jego opracowanie odpowiedzialny był zespół kierowany przez informatyka Steve'a Wilhite'a
Czy możemy powiedzieć: Zapomnij o GIF-ach na rzecz bezpłatnych animacji Lottie? Decyzję musisz podjąć sam, ale najpierw przeanalizuj poniższe argumenty.
Rozmiar
Rozmiar Lottie w porównaniu do GIF’a potrafi być kilkukrotnie mniejszy. Jest to jedno z większych plusów tego formatu graficznego, szczególnie jeśli pomyślimy o ładowaniu na stronie. Przez to, że jest lżejszy, zmniejszamy ryzyko obciążenia naszej witryny www i tym samym spowolnienia jej procesu ładowania się.
Jakość
W przypadku jakości możemy mówić o różnych jej aspektach - np. kolorystycznych, tych ze względu na przejrzystość obrazu etc.
Jak już sobie powiedzieliśmy, GIF jest plikiem rastrowym, a więc będzie opierał się na klatkach oraz pikselach, a z kolei Lottie na wektorach (tak jak SVG), które pozwalają na ich skalowalność oraz stworzenie nieskończonej ilości klatek na sekundę. W praktyce więc animacja stworzona przy użyciu pierwszego formatu (GIF) przy jej powiększaniu może zacząć “ujawniać” piksele, a sam ruch nie będzie też aż tak płynny.
Sposób (proces) pracy
Sam proces pracy w tworzeniu i późniejszym operowaniu tymi formatami będzie różny. Najpopularniejszym sposobem tworzenia plików Lottie jest wcześniej wspomniane eksportowanie animacji stworzonej w programie Adobe After Effects do pliku Lottie. Osoby nie mające wcześniejszej styczności z tego typu formatem mogą albo podjąć się nauki działania na programie (np. korzystając z materiałów edukacyjnych) lub skorzystać z gotowych plików, które wystarczy tylko dostosować do swoich upodobań.
Aspektem, w którym pliki GIF można nazwać gorszymi, jest sam przepływ pracy. W przeciwieństwie do pliku Lottie, tworzenie pliku GIF jest skomplikowane i ograniczone do tego stopnia, że nie ma możliwości zmiany kolorów tła lub obiektów, czy też osiągnięcia takiej personalizacji, jaka jest możliwa w przypadku Lottie.
Edytowalność - dostosowywanie do własnych potrzeb
W przypadku animacji Lottie mamy możliwość personalizacji projektu. Zmian możemy dokonać zarówno w trakcie tworzenia, jak i już po jego ukończeniu - np. zmiana koloru tła, szybkości animacji etc.
Przezroczystość
W przypadku Lottie nie powinniśmy mieć żadnych problemów związanych z kanałem alfa (dodatkowy kanał, definiujący przezroczystość wyświetlanych informacji graficznych), natomiast w przypadku GIFa po nałożeniu elementu na kolor krawędzie mogą być “poszarpane” (ziarniste).
Gdzie możemy wykorzystać animacje Lottie
Oczywiście tak samo jak w przypadku innych animacji czy to w formie krótkiego filmu zapisanego np. jako MP4, czy GIFa, te w postaci Lottie możemy używać gdziekolwiek chcemy - nawet wysyłać je w konwersacji prowadzonej na social mediach. Jeśli tworzymy content na naszych mediach społecznościowych i zależy nam na wizerunku profesjonalisty w swoim fachu, aby zadbać o wysoki poziom animacji, warto również wybrać te w formacie Lottie.
Strona internetowa
Strona internetowa należy do tych platform, dla których animacja Lottie będzie bardzo korzystna. Jak już zasugerowaliśmy sobie w różnicach między GIF’em, a tym formatem Lottie jest plikiem bardzo lekkim, a więc nawet jeśli nasza animacja jest bardziej złożona - zbudowana z większej ilości elementów, zawiera więcej etapów ruchu, jest dłuższa etc., to mimo wszystko ostateczny rozmiar nie będzie na tyle duży, żeby miał on obciążyć ładowanie całej strony.
Sama szybkość ładowania i ogólnego działania witryny internetowej jest niezwykle istotna - zarówno z perspektywy użytkownika, który liczy na sprawne otrzymanie tego czego szuka oraz wyszukiwarek, które biorą pod uwagę tę cechę przy pozycjonowaniu strony.
Na naszej stronie głównej również znajdziemy animacje Lottie oparte na JSON’ie. Ten format zdecydowanie pomógł nam zredukować obciążenie na stronie i spowolnienie jej ładowania.
Darmowe animacje Lottie
Największą platformą z darmowymi animacjami Lottie jest platforma LottieFiles (oczywiście znajdziemy tam też te w wersji premium, za które należy zapłacić). Aby z niej skorzystać, należy jednak założyć konto (możemy użyć do tego naszego konta Google). W bezpłatnych zasobach znajdziemy tysiące projektów. Dodatkowo jeśli chcemy wprowadzić drobne zmiany, takie jak np. inny kolor elementu, tła, prędkość etc. możemy skorzystać z Editor’a Lottie, a następnie pobrać plik po wprowadzonych poprawkach. Nie musimy wtedy posiadać After Effect’a.
Adobe After Effects i animacja Lottie
Darmowe zasoby Lottie są dość bogate, ale może okazać się, że akurat nie ma w nich tego co potrzebujemy albo po prostu chcemy wykonać animacje według innych, bardziej spersonalizowanych wytycznych, w swoim stylu. Jak już wcześniej sobie powiedzieliśmy, takie projekty możemy wykonać samodzielnie przy użyciu Adobe After Effect za darmo. Do pracy będziemy potrzebowali również wtyczkę Bodymovin (rozszerzenie do Adobe AE) lub LottieFiles*. Pozwalają one na wyeksportowanie wykonanej animacji do pliku JSON.
Ilustracje, którą później zanimujemy możemy wykonać np. w Illustratorze, Sketchu lub bezpośrednio w After Effect’ie. Wszystko zależy od naszych preferencji i samej złożoności projektu. Możemy też skorzystać z zasobów zewnętrznych w postaci np. plików wektorowych, które oferują platformy typu Freepik.
Teraz przyszła pora na nadanie naszej grafice dynamiki, czyli po prostu wykonanie animacji. Gdy wszystko jest już gotowe, przychodzi czas na eksport przy pomocy wcześniej wspomnianego rozszerzenia - Bodymovin lub LottieFiles. Jeśli pominiemy ten krok, w rezultacie otrzymamy zwykłą animację, a nie tę w formię Lottie.
Dzięki temu, że są one kodowane, ich jakość niezmiennie pozostaje w wysokiej jakości. Oczywiście jeśli chcemy skorzystać z tego formatu animacji nie musimy przejmować się własnoręcznym pisaniem kodu. Aby dostosować opcje ich wyświetlania oraz wygenerować do tego kod html, wystarczy że skorzystamy z web player’a od Lottie Files.
Wstawiamy tam swój plik JSON stworzonej przez siebie animacji w After Effect’ie lub pobranej z darmowych zasobów, a następnie określamy szerokość i długość, prędkość, kolor tła etc.
Na dole pojawia nam się wygenerowany kod, który teraz wystarczy już tylko skopiować i wstawić tam, gdzie chcemy, czyli np. na swoją stronę internetową.
*LottieFiles a Bodymovin
Bodymovin jest wtyczką przeznaczoną dla Adobe After Effects. Pozwala ona na eksport animacji w JSON. Z kolei samo Lottie to biblioteka, która renderuje je natywnie na urządzeniach mobilnych oraz w sieci.
Animacje Lottie - podsumowanie
Animacja Lottie, to szczególnie dobre rozwiązanie, jeśli chcemy stworzyć bardziej złożoną animację, która w przypadku skorzystania z innego formatu okazałaby się zbyt ciężka. Jej stosowanie przydaje się również w momencie, gdy zamieszczamy wiele mniejszych materiałów. Właśnie dzięki lekkości pliku i samej jego lepszej jakości, Lottie jest szczególnie polecane do stosowania na stronie internetowej. W związku z tym, że w kreatorze stron www WebWave mamy możliwość dodawania nowych fragmentów kodu oraz edytowania tego już istniejącego na stronie, bez żadnego problemu będziemy w stanie zamieszczać takie animacje, jak te zapisywane w JSON’ie.
Dowiedz się więcej o najlepszych praktykach tworzenia stron:
Autor: Kaja Rowicka
Popularne artykuły.
Kreator stron www WebWave umożliwia tworzenie stron www z pełną swobodą. Strony internetowe możesz tworzyć zaczynając od czystej karty lub wykorzystując szablony www. Strona www bez kodowania? To łatwe - zacznij już teraz.
contact@webwavecms.com
+48 731 395 898
Porozmawiaj z nami na czacie
Od godziny 08:00 do 24:00
Ta strona została stworzona w kreatorze WebWave.
Znajdziesz nas na:
Kreator WebWave.
Oferta.