Wykorzystanie natywnych animacji Adobe After Effects na stronie WWW

Kamil Powroźnik

2019-06-25T22:20+02:00 | 6 min

Ostatnio zostałem postawiony przed ciekawym problemem, którego nie doświadczyłem wcześniej w swojej karierze programistycznej, otóż zostałem zapytany czy jesteśmy w stanie umieścić natywną animację z programu Adobe After Effects jako tło na stronie internetowej.

Z pewnością znając ilość bibliotek i narzędzi dostępnych w internecie mógłbym pokusić się o odpowiedź - tak, jest to możliwe. Wolę jednak nie rzucać słów na wiatr i szybciutko zabrałem się za research.

Nie tracąc dużo czasu w google, moim oczom ukazała się ona – bohaterka dzisiejszego postu - biblioteka Lottie.

Szybciutko zagłębiając się w dokumentacje, dowiedziałem się, że aby wyeksportować swoją animację potrzebuje dodatkowego pluginu do programu After Effects o nazwie Bodymovin. Wyeksportowanie własnej animacji staje się banalnie łatwe, dlatego nie będę skupiał się na wtyczce, która w głównej mierze przeznaczona jest dla grafików - my zajmiemy się Lottie 🥰

Lottie możemy użyć wszędzie, począwszy od stron internetowych po aplikacje pisane w React Native, aż do natywnych aplikacji mobilnych.

Instalacja

Do swojego projektu możemy dołączyć ją za pomocą CDN, używając np tego linku bodymovin - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites! lub oczywiście za pomocą npm używając komendy:

npm install lottie-web

Skąd wziąć animacje?

Jeśli nie chcesz sam tworzyć/eksportować animacji z programu After Effects, śmiało możesz poszukać ich na przykład tutaj https://lottiefiles.com/aep

(Przyznam się, że tą stronę znalazłem dopiero podczas tworzenia tego posta, jednak już mi się podoba)

Let’s get ready to rumble!

Specjalnie na potrzeby tego postu stworzyłem repozytorium KPowroznik/ae-animations · GitHub, tak abyś mógł zapoznać się z całym kodem 😎

Demo jest dostępne tutaj: AE Animations

Do rzeczy, zajmijmy się tym co tygryski lubią najbardziej 😊

Sama obsługa Lottie jest banalna, na początku importujemy bibliotekę

import lottie from 'lottie-web';

Następnie wywołujemy metodę loadAnimation, przekazując jej odpowiedni obiekt konfiguracyjny:

lottie.loadAnimation({
  container: $backgroundWrapper,
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: animations.waves
});

Ok, co się stało w obiekcie konfiguracyjnym? Krok po kroku, do właściwości container przekazany został element, który wcześniej wyciągnąłem z DOM, w renderer przekazany został sposób renderowania animacji (do dyspozycji mamy tu html, svg oraz canvas).

Dalej znajdziemy właściwości dotyczące odtwarzania animacji takie jak pętla, czy automatyczne odtwarzanie.

Ostatnim ważnym elementem jest podanie do właściwości path ścieżki do pliku .json z naszą animacją. W powyższym przykładzie odwołuje się do stworzonego wcześniej obiektu ze ścieżkami do plików z serwisu lottiefiles.com.

const animations = {
  boom: `https://assets10.lottiefiles.com/datafiles/U1I3rWEyksM9cCH/data.json`,
  waves: `https://assets2.lottiefiles.com/datafiles/N8DaINa2dmLOJja/data.json`
};

Opis wszystkich dostępnych właściwości konfiguracyjnych znajdziesz tutaj: loadAnimation options · airbnb/lottie-web Wiki · GitHub

Sterowanie animacją

Jedną z najważniejszych funkcjonalności biblioteki jest to, że możemy sterować naszą animacją.

const boomAnimation = lottie.loadAnimation({
  container: $animationWrapper,
  renderer: ‚svg’,
  loop: true,
  autoplay: false,
  path: animations.boom
});

Instancja animacji udostępnia nam kilka metod, między innymi play oraz stop.

Zobacz na przykład:

$button.addEventListener(‚click’, () => {
  $modal.classList.add(‚modal—is-open’);
  boomAnimation.play();
});

Animacja ruszy dopiero przy otworzeniu modala.

Pełną referencje dostępnych metod znajdziesz w zakładce Usage pod tym linkiem: https://github.com/airbnb/lottie-web

Eventy

Idąc wgłąb dokumentacji, docieramy również do informacji, że zostają nam udostępnione eventy, między innymi:

  • onComplete
  • onLoopComplete
  • onEnterFrame
  • onSegmentStart

Odwojujemy się do nich w ten sposób:

boomAnimation.onLoopComplete = () => {
  counter++;
  $modalTextField.textContent = `Animation interations: ${counter}`;
};

Możemy również użyć metody addEventListener, dzięki temu mamy większe pole do popisu, ponieważ do dyspozycji mamy dużo więcej eventów:

  • complete
  • loopComplete
  • enterFrame
  • segmentStart
  • config_ready (kiedy konfiguracja jest gotowa)
  • data_ready (kiedy wszystkie części animacji są załadowane)
  • data_failed (kiedy część animacji nie może zostać załadowana)
  • loaded_images
  • DOMLoaded (kiedy elementy zostały dodane do DOM)
  • destroy

Dotarliśmy do końca

To wszystko, po więcej zaawansowanych tematów zapraszam do dokumentacji biblioteki: https://github.com/airbnb/lottie-web/wiki

Zapraszam również do obejrzenia dema: AE Animations

Kod dostępny tutaj: GitHub - KPowroznik/ae-animations


Hej, ta strona wykorzysuje pliki cookies, localStorage, sessionStorage oraz dane osobowe do celów analitycznych.