Diversity w polskim IT
Przemysław Obrzut
Comarch
Przemysław ObrzutFrontend Developer @ Comarch

Jak robić i debugować animacje w Angularze + edytor krzywej Beziera

Sprawdź, jak robić i debugować animacje za pomocą Angulara, Lottie, znaczników CSS oraz krzywej Beziera.
4.04.20226 min
Jak robić i debugować animacje w Angularze + edytor krzywej Beziera

W obecnych czasach programiści Frontend posiadają cały wachlarz możliwości animowania treści. 

W tym poradniku omówię kilka popularnych technik animowania treści w Angular, używając zarówno animacji specyficznych dla Angular, jak i metod bardziej tradycyjnych stosowanych w aplikacjach webowych.

Podam również kilka wskazówek dotyczących debugowania animacji, które stosujemy w naszej firmie.

Animacje w Angular 

Przy tworzeniu animacji w Angular wykorzystuje się zależności  @angular/animations@angular/platform-browser, które są standardowo dostępne w projektach wygenerowanych za pomocą ng new.  Jeśli nie, dodaj je np. uruchamiając w konsoli: npm install --save @angular/animations.

System animacji Angular opiera się na funkcjonalności CSS, co oznacza, że ​​możesz animować dowolną właściwość, którą przeglądarka uważa za animowaną. Obejmuje to pozycje, rozmiary, przekształcenia, kolory, obramowania i nie tylko. Pełna lista możliwych właściwości dotyczących animacji jest na stronie W3C.

Następnie chcąc rozpocząć przygodę z @angular/animations, dodajemy import do odpowiedniego modułu. Przykładowy kod:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  declarations: [ ],
  bootstrap: [ ]
})
export class AppModule { }


Zachęcam do zapoznania się z oficjalną dokumentacją @angular/animations.

Pierwsza animacja - przejścia między zmianami stanu

Zapoznaj się z przykładowym pseudokodem. Poniżej znajdziesz wyjaśnienie najważniejszych metod.

import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  ..............
    animations: [
  trigger('enabledState', [
    state(
      'default',
      style({
        opacity: 1,
      })
    ),
    state(
      'disabled',
      style({
        opacity: 0,
      })
    ),
    transition('* => *', animate('500ms ease-in)),
  ])
]
})


W swoim widoku wszystko, co musisz zrobić, to dodać zdefiniowaną wcześniej nazwę animacji, poprzedzoną znakiem @ i powiązać ją ze zmienną stateOfElement , która będzie decydować o zmianie stanu.

<div [@enabledState]="stateOfElement">...</div>


Wyjaśnienie metod użytych w przykładzie:

  • Trigger— akceptuje nazwę wyzwalacza animacji oraz tablicę stanów i metod przejścia do konfiguracji animacji,
  • State— akceptuje nazwę stanu i style, które powinny być warunkowo stosowane w określonym stanie,
  • Style— Style CSS do zastosowania,
  • Transition— określa konfigurację przejścia między różnymi stanami i jego kierunek,
  • Animate— określa czas trwania i wszelkie dodatkowe właściwości animacji CSS.

Animacje wejścia i wyjścia

Angular zapewnia również przydatne aliasy, takie jak :enteri :leave do animowania elementów wchodzących i wychodzących z DOM.  Jest to szczególnie przydatne przy dodawaniu animacji do elementów, które są pokazywane warunkowo za pomocą *ngIf. Poniższy kod prezentuje, jak utworzyć animację pojawiania się i zanikania.

import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  .........
    animations: [
      trigger('openClose', [
        transition(':enter', [
          style({ opacity: 0, transform: 'translateY(50px)' }),
          animate('1000ms', style({ opacity: 1, transform: 'translateY(0)' })),
        ]),
        transition(':leave', [
          animate('1000ms', style({ opacity: 0, transform: 'translateY(50px)' })),
        ]),
      ]),
]
})


Ponieważ używa wyłącznie aliasów :enteri :leave,  aby użyć go w swoim szablonie, wystarczy dodać nazwę wyzwalacza poprzedzoną przedrostkiem: 

<div *ngIf="show" @openClose>...</div>


Zachęcam do zapoznania się z przykładami na żywo dostępnymi w dokumentacji Angular.

Import kompletnych animacji za pomocą Lottie

Ciekawą biblioteką jest Lottie. Jest to mobilna biblioteka dla Internetu i mobilek, która umożliwia uruchomienie  animacji  wyeksportowane jako JSON z programu graficznego np. Adobe After Effects. Zapoznaj się ze stroną projektu i  wersja dedykowaną webowi lottie-web znajduje się w repozytorium github. Jest to o tyle użyteczne, że projekt graficzny, który powstanie Adobe After Effects może  zostać od razu zaimportowany bez żadnej modyfikacji. 

Autorzy projektu argumentują przewagę formatu Lottie nad formatem gif tym, że gify są ponad dwukrotnie większe niż bodymovin (biblioteka konwertująca) JSON i są renderowane w stałym rozmiarze, którego nie można skalować w górę, aby pasowały do ​​ekranów o dużej i wysokiej gęstości.  

W naszej firmie stosujemy Lottie, do osadzania animacji złożonych, czasochłonnych do zaprogramowania, występujących w roli ozdobnej grafiki na stronie. 

Unikamy tej biblioteki do butonów, toast, tooltip itp. Warto zaznaczyć, że animacje oparte na css zawsze będą lżejsze i mniej złożone niż grafiki Lottie.


Przydatne materiały o Lottie:

  • Demo wyeksportowanej grafiki lotty,
  • Samouczek wideowyjaśniający, jak wyeksportować podstawową animację i załadować ją na stronę html,
  • W systemie Windows możesz pobrać aplikację Lottie Viewer , aby wyświetlić podgląd animacji Lottie.

Animacje oparte na dodaniu znaczników css

Ponieważ Angular działa w przeglądarkach i wykorzystuje HTML i CSS, możemy skorzystać z animacji CSS w naszej aplikacji Angular, która działa dokładnie tak samo, jak w prostej stronie opartej tylko o HTML/CSS. Możesz dodać klasę do elementu w oparciu o określony warunek, który następnie wywoła animację za pomocą CSS.

. highlight {
    animation: highlight 1s;
}

@keyframes highlight {
    0% {
	    transform: scale(1);
    }
    100% {
    	transform: scale(0.5);
    }
}

<div [class.highlight]="isSelected"></div>


Zaletą tego podejścia jest to, że możesz wykorzystać dowolną bibliotekę animacji CSS, która działa w oparciu o dodawanie i usuwanie klas, takich jak animate.css lub magic.css. Polecam artykuł >> tutaj.

Debugowanie

Obecne przeglądarki są wyposażone w potężne narzędzia do debugowania animacji, które są przydatne podczas tworzenia animacji. Te narzędzia pozwalają spowolnić, odtwarzać i sprawdzać kod źródłowy animacji.

Chrome ma 2 główne funkcje, które moim zdaniem są bardzo pomocne przy debugowaniu kodu animacji. 


Inspektor animacji

To narzędzie domyślnie jest ukryte w DevTools. W Chrome opcję inspektora animacji można znaleźć i włączyć w podmenu DevTools -> More tools -> Animations

Jeśli masz otwartą kartę animacji w swoich narzędziach deweloperskich, powinieneś widzieć bloki grup animacji dodawane na górze, gdy Twoja animacja zostanie uruchomiona w twojej aplikacji.


Narzędzie oferuje kilka kluczowych funkcji:

  • Controls— pozwala odtwarzać, wstrzymywać i modyfikować prędkość animacji.
  • Grupy animacji— pokazuje różne grupy animacji, które zostały wykonane. Inspektor animacji grupuje je, na podstawie czasu rozpoczęcia (z wyłączeniem opóźnień) przewidując, które animacje są ze sobą powiązane. Z perspektywy kodu animacje wyzwalane w tym samym bloku skryptu są zgrupowane razem.
  • Scrubber— możesz przeciągnąć czerwony pionowy pasek w lewo i w prawo, aby wyświetlić stan animacji w tym czasie na osi czasu.
  • Timeline— pokazuje podział elementów w DOM, które są animowane w grupie animacji oraz oś czasu dla animacji każdego elementu.


Czas trwania animacji

Wszystkie komponenty na osi czasu dla każdego elementu można modyfikować, przeciągając je w poziomie, edytować czas trwania, przesuwając początkowe i końcowe pełne koła, dodawać opóźnienia, przesuwając podświetloną sekcję i modyfikować czasy klatek kluczowych. Następnie możemy wyświetlić zaktualizowane zmiany animacji, klikając przycisk powtórki, aby ponownie uruchomić grupę animacji.

Edytor krzywej Beziera

Jeśli używasz klatek kluczowych CSS (@keyframes) w swojej animacji devtools Chrome ma również narzędzie do dynamicznej edycji krzywych animacji za pomocą sześciennej wizualizacji Beziera.

Jest to niezwykle pomocne, ponieważ nie musisz już przechodzić między edytorem a przeglądarką, aby dostosować krzywe Beziera, aby uzyskać odpowiedni czas, możesz to wszystko zrobić w przeglądarce.

Fioletowe kółka dołączone do fioletowych linii na edytorze krzywej Beziera można przeciągać w pionie i poziomie, aby edytować krzywą linii. Możesz zobaczyć szybką wizualizację tego, jak wygląda funkcja pomiaru czasu, od fioletowego kółka w górę wyskakującego okienka, pokazując, jak animacja będzie przyspieszać/zwalniać w czasie.

Podsumowanie

Dojechałeś do ostatniej ‘stacji’ w poradniku. Obecnie istnieje wiele sposobów animowania treści w witrynach webowych. Przedstawione przykłady stanowią tylko część wszystkich możliwości. 

Często powstawaniu animacji towarzyszy szereg dyskusji pomiędzy UX-ami i deweloperami, a ostateczna wersja obejmuje wiele poprawek i udoskonaleń oraz testów w różnych przeglądarkach. Bada się też spójności i wydajności witryny po dodaniu bardziej złożonych animacji. Jednak ten trud się opłaca, bo czasem jedna ciekawa animacja może przykuć uwagę wielu osób. 

Wymienione techniki animacji często są testowane w projektach stażowych, które to wykonują studenci w ramach swoich obowiązków. Jeżeli zainteresował Cię ten temat i szukasz dla siebie ciekawej formy spędzenia najbliższych wakacji, aplikuj na nasz wakacyjny staż IT. Dołączając do nas, będziesz miał okazję zdobyć pierwsze doświadczenie zawodowe, pracując nad realnymi projektami dla największych światowych marek.

<p>Loading...</p>