Anime.js wstęp

Zapraszam do zapoznania się z ciekawą biblioteką do tworzenia animacji w javascripcie - anime.js. Biblioteka jest lekka oraz wspiera wszystkie nowoczesne przeglądarki. Najpierw należy pobrać i załączyć bibliotekę do pliku html. Można też użyć ścieżki z cdn-a jak poniżej.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

W celu stworzenia animacji, używamy funkcji anime, która przyjmuje obiekt jako argument. W tym obiekcie opisujemy wszystkie szczegóły animacji.

let animation = anime({
  
});

Jest kilka rodzajów właściwości (properties) używanych do opisu animacji. Są pogrupowane na cztery kategorie: Targets - czyli elementy (cele), które chcemy animować np. div. Może to być selektor CSS (div, .some_class, #someId), węzeł DOM lub lista węzłów albo zwykły obiekt JavaScript. Istnieje również możliwość użycia kombinacji powyższych w tablicy. Properties (właściwości) - obejmuje to wszystkie właściwości i atrybuty, które mogą być animowane podczas obsługi obiektów CSS, JavaScript, DOM i SVG. Property Parameters (Parametry właściwości - obejmują parametry związane z właściwościami, takie jak czas trwania, opóźnienie, wygładzanie itp. Animation Parameters (Parametry animacji) - obejmuje to parametry związane z animacją, takie jak kierunek, zapętlenie itp. Napiszmy teraz kod pierwszego przykładu. W pliku html wstaw prostego diva.

<div style="width: 100px; height: 100px; background: blue;"></div>

Kod animacji wygląda następująco.

let animation = anime({
  targets: 'div',
  // Properties 
  translateX: 200,
  borderRadius: 50,
  // Property Parameters
  duration: 2000,
  easing: 'linear',
  // Animation Parameters
  direction: 'alternate',
  loop: true
});

Omówię teraz krótko co się dzieje w animacji. Łapiemy kwadrat (div). Przesuwamy go o 200 pikseli w lewo, przekształcając go w okrąg. Ustawiliśmy to wszystko tak, aby przebiegało płynnie w ciągu dwóch sekund (liniowo oznacza, że animacja nie zostanie poddana wygładzaniu). Ustawiając właściwość direction na naprzemiennie (alternate), poinstruujemy element div, aby po zakończeniu animacji powrócił do swojej początkowej pozycji i kształtu. Anime.js robi to, odtwarzając animację w odwrotnej kolejności. loop oznacza zapętlenie naszej animacji. Bibliotekę najlepiej poznaje się na przykładach więc zróbmy kolejny. Będziemy znów animować naszego diva, tylko tym razem troszkę inaczej. Funkcja CSS translateX ustawi wartość 260, aby przesunąć o 260 wzdłuż osi x). Użyjemy również funkcji CSS rotate, aby obrócić o 720 stopni. Kolor tła diva zmienimy za pomocą backgroundColor. Reszta właściwości jest taka sama jak w przykładzie wyżej.

let animation = anime({ 
	targets: 'div', 
	translateX: 260,  
	rotate: 720,  
	backgroundColor: '#f75', 
	direction: 'alternate', 
	duration: 2000, 
	loop: true
});

Dowolna właściwość obiektu (Object) zawierająca wartość liczbową może być animowana. Tutaj właśnie zmieniliśmy wartość właściwości obiektu i zaktualizowaliśmy dom, easing: linear jest używany do animacji liniowej. Możesz zmienić wartość round, aby zobaczyć, do czego jest używana.

var div = document.querySelector("div"); 
  
var object = { 
	prop1: 10, 
	prop2: "0%", 
}; 

let animation = anime({ 
	targets: object, 
	prop1: 70, 
	prop2: "96%", 
	easing: "linear", 
	round: 1, 
	update: function () { 
		div.innerHTML = JSON.stringify(object); 
	}, 
});

Do tej pory zajmowaliśmy się animacjami jednoetapowymi, które przenoszą obiekt z punktu A do punktu B. A co z przenoszeniem go z punktu A do B, C do D? W następnym przykładzie dowiemy się, jak używać klatek kluczowych. Służą one do tworzenia wieloetapowych animacji. Przesuniemy prosty kwadrat w różnych kierunkach.

let animation = anime({
  targets: 'div',   
  translateY: [
    {value: 50, duration: 500},
    {value: 0, duration: 500, delay: 1500},  
    {value: -53, duration: 500, delay: 500},
    {value: 0, duration: 500, delay: 2500},
    {value: 50, duration: 500, delay: 500},
    {value: 0, duration: 500, delay: 1500}  
  ],
  translateX: [
    {value: 53, duration: 500, delay: 1000},
    {value: 0, duration: 500, delay: 2500},
    {value: -53, duration: 500, delay: 500},
    {value: 0, duration: 500, delay: 2500} 
  ],
  easing: 'linear',   
  begin: function() { 
    //some when animation begin
  },
  complete: function() {
    //when animation complete
  }
});

Dla każdej właściwości, którą chcemy animować, używamy tablicy obiektów, w których każdy obiekt opisuje określoną klatkę kluczową. W naszym przypadku chcemy przesunąć kwadrat w pionie i poziomie. Dlatego używamy właściwości translateY i translateX oraz zapewniamy tablicę keyframes dla każdej z nich. Sztuczka tworzenia odpowiedniego ruchu polega na prawidłowym obliczeniu czasu trwania i parametrów opóźnienia (delay) - co nie jest łatwym zadaniem. Klatki są wykonywane od góry do dołu i rozpoczynają się jednocześnie dla każdej właściwości, która ma określoną tablicę klatek kluczowych.