Zrozumienie przejść i animacji w Svelte

Umiejętnie zaimplementowana animacja potrafi znacząco podnieść komfort użytkowania aplikacji, stanowiąc jednocześnie skuteczny sposób na przekazywanie feedbacku użytkownikowi. Svelte, dzięki swoim wbudowanym funkcjom, umożliwia łatwe dodawanie animacji i przejść, minimalizując konieczność sięgania po zewnętrzne biblioteki JavaScript.

Inicjalizacja projektu Svelte

Zanim zaczniesz przygodę z Svelte, upewnij się, że masz zainstalowane środowisko Node.js oraz menedżera pakietów Node (NPM). W terminalu uruchom komendę:

 npm create vite

Spowoduje to utworzenie nowego projektu opartego na Vite.js. Nadaj nazwę swojemu projektowi, wybierz Svelte jako framework i wariant JavaScript. Następnie przejdź do katalogu projektu i wykonaj polecenie instalujące niezbędne zależności:

 npm install

W celu rozpoczęcia pracy na czystym projekcie, usuń domyślne elementy, czyli foldery Assets i lib, a także wyczyść zawartość plików App.svelte i App.css.

Wykorzystanie animacji płynnych (tweening) w Svelte

Animacja płynna (tweening) to technika, która w animacji i grafice komputerowej generuje pośrednie klatki pomiędzy kluczowymi, zapewniając płynne i naturalne ruchy lub przejścia. Svelte udostępnia mechanizm animacji, który umożliwia animowanie elementów za pomocą wartości numerycznych, co ułatwia tworzenie subtelnych animacji i przejść w aplikacjach webowych.

Funkcja `tweened` jest częścią modułu `svelte/motion`. Aby wykorzystać animację w swoim komponencie, należy ją zaimportować:

 import { tweened } from 'svelte/motion'

W istocie, mechanizm animacji to zapisywalny magazyn (store) Svelte. Magazyn Svelte to obiekt JavaScript służący do zarządzania stanem. Magazyn animacji oferuje dwie metody: `set` (ustaw) i `update` (aktualizuj). Podstawowa składnia magazynu animacji prezentuje się następująco:

 const y = tweened(defaultValue, {
    duration: [czas-w-milisekundach],
    easing: [funkcja-wygładzania],
})

Powyższy fragment definiuje zmienną `y`, powiązaną z magazynem animacji. Magazyn przyjmuje dwa parametry. Pierwszy z nich określa wartość początkową, jaką ma przyjąć `y`. Drugi parametr to obiekt zawierający dwa klucze: `duration` (czas trwania) i `easing` (wygładzanie). `Duration` określa czas trwania animacji w milisekundach, a `easing` – funkcję wygładzania.

Funkcje wygładzania w Svelte kontrolują zachowanie animacji. Są one dostępne w module `svelte/easing`, dlatego przed ich użyciem należy zaimportować wybraną funkcję. Svelte oferuje wizualizator funkcji wygładzania, który pozwala na eksperymentowanie z różnymi rodzajami animacji.

Aby zilustrować użycie mechanizmu animacji, poniżej znajduje się przykład, który wykorzystuje magazyn animacji do zwiększenia rozmiaru elementu w Svelte.

 <script>
  import { tweened } from "svelte/motion";
  import { bounceOut } from "svelte/easing";
  const size = tweened(0, {
    easing:bounceOut
  })
</script>
<div class="container">
  <div style={`height: ${$size * 30}px;`}>
  </div>
</div>
<button on:click={()=>(size.update(()=>$size+3))}>Zwiększ rozmiar</button>
<style>
  .container{
    display: flex;
    align-items: flex-end;
    margin-top: 400px;
  }
  div{
    height:0;
    width:100px;
    background-color: red;
  }
</style>
 

Powyższy kod importuje dwie funkcje: `tweened` z `svelte/motion` oraz `bounceOut` z `svelte/easing`. Następnie deklarowana jest stała, powiązana z magazynem animacji, który ma wartość początkową 0. Dostęp do wartości magazynu (aktualnej wartości) uzyskujemy za pomocą symbolu `$`. Kolejnym parametrem jest obiekt z kluczem `easing`, który odwołuje się do funkcji wygładzania `bounceOut`.

W części szablonu HTML, przycisk zawiera dyrektywę `on:click`, która wywołuje metodę `update` powiązania `size`. Metoda ta zwiększa wartość magazynu `$size` o 3 za każdym kliknięciem. Element `div` ma style wbudowane, które zależą od wartości magazynu `$size`. Po uruchomieniu kodu, w przeglądarce będzie widoczny efekt animacji.

Przejścia w Svelte

Do płynnego wprowadzania i usuwania elementów z Document Object Model (DOM), Svelte udostępnia dyrektywę przejścia oraz moduł `svelte/transition`, który eksportuje przydatne funkcje. Na przykład, aby rozmyć element podczas jego wstawiania i usuwania z DOM, należy zaimportować funkcję `blur` z `svelte/transition`:

 <script>
import { blur } from 'svelte/transition';
</script>

Następnie należy dodać mechanizm montowania i odmontowywania elementu z DOM. Wewnątrz tagu `