Ożyw swoje aplikacje Svelte, integrując przejścia i urzekające animacje.

Dobrze wykonana animacja może poprawić komfort użytkownika i może być świetnym sposobem na przesłanie mu opinii. Svelte ułatwia włączanie animacji i przejść do aplikacji przy niewielkiej potrzebie korzystania z bibliotek JavaScript innych firm.

Konfigurowanie smukłego projektu

Aby rozpocząć współpracę ze Svelte, powinieneś się o to upewnić środowisko wykonawcze Node.js I Menedżer pakietów węzłów (NPM) są prawidłowo zainstalowane na komputerze. Otwórz terminal i uruchom następujące polecenie:

npm create vite

To będzie rusztowanie nowy projekt Vite.js. Nazwij swój projekt, wybierz Smukły jako framework i ustaw wariant na JavaScript. Następnie przejdź do katalogu projektu i uruchom następującą komendę, aby zainstalować niezbędne zależności:

npm install

Usuń kod standardowy, usuwając plik aktywa I biblioteka folderów i czyszczenie zawartości plików Aplikacja smukła I Aplikacja.css akta.

Jak korzystać z animacji w Svelte

Tweening to technika stosowana w animacji i grafice komputerowej, która generuje klatki pośrednie pomiędzy klatkami kluczowymi w celu uzyskania płynnego i realistycznego ruchu lub przejść. Svelte oferuje

instagram viewer
animowane narzędzie umożliwiające animację elementów przy użyciu wartości numerycznych, co ułatwia tworzenie płynnych przejść i animacji w aplikacjach internetowych.

Narzędzie tweed jest częścią pakietu smukły/ruchowy moduł. Aby użyć animacji w swoim komponencie, musisz zaimportować ją w następujący sposób:

import { tweened } from'svelte/motion'

Pod maską narzędzie animacji to po prostu zapisywalny sklep Svelte. Sklep Svelte to w zasadzie obiekt JavaScript, którego można używać do zarządzania stanem. Sklep z animacjami ma dwie metody, a mianowicie: ustawić I aktualizacja. Na poziomie podstawowym składnia sklepu z animacjami wygląda mniej więcej tak:

const y = tweened(defaultValue, {
 duration: [time-in-milliseconds],
 easing: [easing-function],
})

Powyższy blok kodu definiuje zmienną y i wiąże go ze sklepem animacji. W sklepie dostępne są dwa parametry. Pierwszy parametr reprezentuje wartość domyślną y wiązanie powinno mieć. Kolejnym parametrem jest obiekt z dwoma kluczami czas trwania I złagodzenie. The czas trwania określa, jak długo animacja powinna trwać w milisekundach złagodzenie definiuje funkcję łagodzenia.

Funkcje wygładzania w Svelte definiują zachowanie animacji. Funkcje te są częścią smukły/łagodny module, co oznacza, że ​​musisz zaimportować określoną funkcję z modułu, zanim będziesz mógł przekazać ją do magazynu animacji. Svelte ma wizualizator łagodzenia, którego możesz użyć do zbadania zachowania różnych funkcji łagodzenia.

Aby w pełni zilustrować, w jaki sposób można korzystać z narzędzia animacji, poniżej znajduje się przykład użycia magazynu animacji w celu zwiększenia rozmiaru elementu w Svelte.