W kontekście Lottie mówi się o tym, że są one następcą popularnych GIF-ów. Jeżeli więc tworzysz treści na strony internetowe lub chcesz samodzielnie podnieść atrakcyjność wpisów na własnej stronie www lub w social mediach, z całą pewnością musisz poznać szereg korzyści, jakie wiążą się ze stosowaniem animacji Lottie.
Co to jest animacja Lottie?
Animacja Lottie bazuje na JavaScript Object Notation, który pozwala wstawiać animacje na różnego rodzaju platformy tak łatwo, jak w przypadku plików ze statyczną grafiką. Lottie to małe wektorowe pliki, które mogą skalować się bez pikselizacji, a co więcej, działają na każdym urządzeniu. Mogą również zawierać określone elementy grafiki rastrowej. Stanowią alternatywne rozwiązanie dla plików GIF oraz APNG.
Co to oznacza w praktyce? Poprzez stronę internetową www.lottiefiles.com zyskujemy dostęp do obszernych katalogów gotowych projektów, które możemy dowolnie edytować, a następnie wykorzystywać do własnych celów. Portal umożliwia również tworzenie własnych animacji. Godnym uwagi jest fakt, że założenie konta jest darmowe.
Jaka historia kryje się za nazwą Lottie? Pochodzi ona od imienia niemieckiej reżyserki i projektantki animacji sylwetkowej, Charlotte Reiniger, która żyła w latach 1899 – 1981. Była ona pionierką animacji sylwetkowej, opartej zazwyczaj o wycinanki.
Animacje Lottie - do czego służą?
Animacje możemy wstawiać w zasadzie wszędzie tam, gdzie mamy na to ochotę. Może to być strona internetowa, sklep online, Facebook, Instagram, a nawet czat w social mediach. Dlatego Lottie najczęściej są wykorzystywane przez osoby prowadzące biznes online lub promujące swoją markę w sieci, a także przez grafików.
Pliki Lottie są bardzo lekkie, co oznacza, że nawet bardziej skomplikowana animacja nie będzie obciążać strony internetowej. Dzięki temu zostanie zachowana szybkość ładowania się podstron, co ma bardzo duże znaczenie dla odbiorcy. Długie oczekiwanie na załadowanie zawartości, wywołuje bowiem niechęć u potencjalnego klienta.
Jakie są zalety Lottie?
- Brak pikseli
- Możliwość stosowania na różnych platformach
- Lekkość plików
- Wysoka jakość animacji
- Łatwa edycja
- Bogaty wybór darmowych zasobów
- Prosty eksport plików
Dlaczego warto stosować Lottie? Przede wszystkim jest to rozwiązanie, które umożliwia poprawne wyświetlanie się animacji na stronie www, bez konieczności wprowadzania modyfikacji. Jest to więc znaczące ułatwienie dla web developerów.
Natomiast szeroka oferta darmowych zasobów, które można dowolnie edytować sprawia, że animacje mogą tworzyć również osoby niedoświadczone, które chcą urozmaicić własne posty w social mediach.
Lottie, a GIF - jakie są różnice?
Lottie to alternatywa dla plików GIF. Jakie są jednak między nimi różnice?
Zacznijmy od wyjaśnienia pojęcia. GIF, czyli Graphics Interchange Format oznacza format wymiany grafiki. Jest to format obrazu bitmapowego. GIF to kilkusekundowy ruchomy obraz będący animacją. Jest on jednak lżejszy niż filmy, co sprawia, że często pojawia się na stronach internetowych. GIF-y można tworzyć w różnego rodzaju programach do obraniania zdjęć oraz aplikacjach dedykowanych tworzeniu animacji typu GIF. GIF-y można wstawiać zarówno na strony internetowe, jak i portale społecznościowe.
Jakie są więc różnice między Lottie, a GIF-ami?
Lottie są lżejsze
Lottie ma znacznie mniejszy rozmiar niż GIF. Jest więc lżejsza, co przekłada się na prędkość ładowania się strony www. Jest to największa przewaga Lottie w stosunku do GIF-ów.
GIF ujawnia piksele
GIF-y to pliki rastrowe, które opierają się na klatkach i pikselach, które mogą pojawić się podczas powiększania animacji. Natomiast Lottie bazuje na wektorach. Dzięki temu nie występują problemy ze skalowalnością, a więc nie pojawiają się piksele.
Inny sposób tworzenia animacji
Pliki Lottie tworzy się w programie Adobe After Effects. Niezdecydowani mogą skorzystać z 7-dniowego darmowego okresu próbnego. Osoby, dla których podstawowe możliwości Lottie Files są wystarczające, mogą korzystać z darmowych zbiorów, jakie zostały udostępnione na www.lottiefiles.com. Również w takim przypadku istnieje możliwość edycji kolorów czy szybkości ruchu wybranej animacji. W przypadku GIF-ów, sam proces ich tworzenia jest bardziej skomplikowany oraz posiada więcej ograniczeń. Lottie umożliwia natomiast dokonywanie zmian również po ukończeniu projektu.
Jak tworzyć animacje Lottie?
Tutaj mamy dwie ścieżki wyboru. Możemy stworzyć animację od podstaw lub też skorzystać z darmowych zasobów. W tym drugim przypadku, zaletą jest fakt, że mamy możliwość edytowania wybranej przez nas animacji. Tak więc możemy dopasować ją do własnych potrzeb.
Jeżeli jednak chcemy stworzyć animację od samego początku, musimy założyć konto w programie Adobe After Effect. Osoby nieprzekonane mogą skorzystać z darmowego okresu próbnego, który obejmuje 7 dni.
Należy pamiętać, że do eksportowania pliku do formatu Lottie, będziemy potrzebować odpowiedniego rozszerzenia. Można także zainstalować wtyczkę Bodymovin, która jest dedykowana Adobe After Effects i któa pozwala na eksport animacji w JSON.
Graficy i animatorzy powinni natomiast mieć na uwadze fakt, że Lottie może nie sprawdzić się, jeżeli projekt ma obejmować bardziej zaawansowane maski lighten, darken czy difference. Co więcej, Lottie może nie odwzorować bardziej skomplikowanych rodzajów ruchu. Dlatego warto jest na samym początku zapoznać się ze specyfikacją na stronie internetowej Lottie Files.
Jak dodać animację Lottie na stronę internetową WordPress?
Nie musisz być specjalistą od WordPressa, aby na swojej stronie internetowej umieszczać animacje. Wystarczy, że zalogujesz się do panelu administratora, a następnie w kolumnie po lewej stronie wybierzesz sekcję Wtyczki i Dodaj nową.
Po prawej stronie w białym polu Szukaj wtyczek wpisz LottieFiles. Po chwili oczekiwania, zobaczysz wtyczkę, którą należy zainstalować.
Po zakończeniu instalacji, kliknij przycisk Włącz. Otrzymasz komunikat dotyczący konta na LottieFiles. Postępując zgodnie z informacjami, wpisz swoje dane do logowania.
Teraz już możesz dodawać animacje na swojej stronie www. Jak to zrobić? Podczas tworzenia nowego lub edytowania już istniejącego wpisu, wybierz przycisk Plusa(+), a następnie wpisz w białe pole wyszukiwarki Lottie. Kliknij w wyszukany moduł. Wybierz zapisany wcześniej plik z animacją.
Gotowe. Twoja animacja zaraz pojawi się na stronie.
