Animacja poklatkowa. Strona portfolio cz. 7 – JavaScript.

Gusta są różne ale efekt animacji poklatkowej może się podobać. Jak go zaimplementować w naszym projekcie? Dzisiaj pokażę Wam jak wykonać animację poklatkową na stronie www.

Seria Portfolio.

Ten wpis jest kolejnym z serii przygotowanej na potrzeby konkursu Daj się poznać 2017. Dzisiaj po raz pierwszy (no w końcu…) zahaczam o temat JavaScriptu a raczej jQuery w tym konkretnym przypadku.

Seria DSP 2017 ma na celu pokazać krok po kroku jak zbudować swoją pierwszą stronę internetową na przykładzie mojego projektu:

http://bartlomiejcis.eu/

Wszystkie artykuły z serii DSP 2017 są dostępne poniżej:

LINK 

Co na początek.

Stworzenie animacji poklatkowej to w 95% praca w programie graficznym nad przygotowaniem odpowiedniego pliku. Jakieś 4% to style CSS i pozostały 1% to JSy 🙂 Widać więc jak wygląda nakład pracy jeśli chcemy otrzymać ten efekt. JavaScript używa się w zasadzie do zresetowania animacji więc na upartego nie jest to funkcjonalność konieczna. Efekt wygląda tak:

Jedziemy z tematem krok po kroku.

Jak to działa.

Plik graficzny to zestaw oddzielnych klatek połączonych ze sobą gdzie każda kolejna klatka jest pod poprzednią. Powstaje taki “wąż” który jest następnie przesuwany z góry na dół za pomocą animacji CSS. W przeglądarce tworzony jest kontener np. 400px x 200px w którym widoczna jest tylko jedna klatka na raz. Klatki się przesuwają a my widzimy animację.

Aby to sobie lepiej wyobrazić spójrzcie jak ja przygotowałem plik do mojej animacji:

PLIK 

Tworzenie pliku graficznego.

  1. Na początku stwórz sobie napis/grafikę która ma się animować i ustal jaki ma być jej rozmiar maksymalny np. 400px x 200px. Całość grafiki musi dokładnie wypełniać założony rozmiar pola. W moim przypadku jest to 300px x 88px.
  2. Oszacuj ile będziesz potrzebował klatek w swojej animacji powiedzmy, że 100. Twój napis składa się z 5 liter. Aby animacja była równomierna każda litera powinna składać się z 20 klatek. W moim przypadku jest to 79 klatek.
  3. Podziel każdą literę na odpowiednią liczbę części według schematu:
  4. Stwórz każdą klatkę osobno poprzez dodawanie kolejnych części poszczególnych liter. Każda klatka ma mieć dokładnie  400px x 200px jeśli przyjąłeś tą wartość na początku.
  5. Teraz bardzo ważne, umieść wszystkie klatki jedna pod drugą zachowując chronologię i DOKŁADNIE 1 pixel odstępu (może być to inna wartość) między WSZYSTKIMI klatkami. Nawet niewielkie odstępstwa to tej reguły sprawią, że animacja będzie się rozjeżdżać i nici z efektu. Tutaj precyzja jest kluczowa.

Stylowanie CSS.

Tutaj pomogę sobie trochę moim kodem aby lepiej wszystko zobrazować.

.logo-animate {
width: 300px;
height: 89px;
background-image: url(../images/signature2-min.png);
background-repeat: no-repeat;
margin: auto;
opacity: 0.9;
animation: logo 4s steps(79, end);
}

Powyżej ostylowałem pustego diva o klasie .logo-animate. Moja grafika ma wymiary 300px x 88px + 1px wysokości na przerwę między klatkami, stąd 300 x 89px. Następnie wrzucam obrazek tła w .png a więc wszystkie klatki razem wzięte a na końcu definiuję animację. Tutaj mówię, że będzie ona trwała 4 sekundy i będzie miała 79 klatek.

Teraz czas na zdefiniowanie zachowania animacji:

@keyframes logo {
0% {
 background-position: center -89px;
}
100% {
background-position: center -7120px;
}
}

Tutaj mówię “niech plik .png przesuwa się od drugiej klatki do ostatniej”. Dlaczego tak? Bo 1 i ostatnia klatka są takie same czyli w pełni uzupełniony napis/grafika. Pozwala mi to uniknąć efektu przeskoku przy przeładowaniu animacji.

Dość proste prawda?

Reset animacji.

Animacja będzie się teraz uruchamiać przy każdym przeładowaniu strony. Chcemy aby resetowała się na kliknięcie w odpowiedni przycisk.

Trzeba dodać przycisk. Może być cokolwiek, ja zrobiłem takie kółeczko które obraca się na hoverze i dałem mu id=“reload”.

Następny krok to zdefiniowanie skryptu który jest bardzo prosty:

$('#reload').on('click', () => {
let animation = $('.logo-animate');
$('.logo-animate').removeClass('logo-animate');
setTimeout(() => {
animation.addClass('logo-animate');
}, 0);
});

Co tu się dzieje?

  1. Wybieram nasz przycisk resetowania metodą jQuery a następnie definiuje zdarzenie na kliknięcie w niego i zaczynam funkcję.
  2. Tworzę zmienną animation która przechowuje nasz plik z grafiką.
  3. Na kliknięcie usuwam z grafiki klasę logo-animate przez co wszystkie style przestają obowiązywać dla tego diva
  4. Ustawiam setTimeout aby wykonać inną funkcję automatycznie po akcji. W tym wypadku ustawiam czas 0, czyli akcja zostanie wykonana natychmiastowo.
  5. Dodaję usuniętą wcześniej klasę logo-animate do diva z grafiką przez co wszystkie style zaczynają na nowo obowiązywać i animacja uruchamia się na nowo.

Podsumowanie.

Poza przygotowaniem pliku graficznego wykonanie analogicznej animacji poklatkowej jest dość proste. Uważam, że jest to ciekawy efekt jednak koniec końców jest pracochłonny. Są inne równie fajne lub nawet lepsze sposoby na osiągnięcie bajeranckich rozwiązań w naszym projekcie jednak mam nadzieję, że po moim tutorialu nikt nie będzie miał problemów z implementacją tej animacji 🙂