Zrozumienie przejść i animacji w Svelte
Dobrze wykonana animacja może poprawić wrażenia użytkownika i może być świetnym sposobem na wysłanie informacji zwrotnej do użytkownika. Svelte ułatwia włączanie animacji i przejść do aplikacji przy bardzo niewielkim zapotrzebowaniu na biblioteki JavaScript innych firm.
Konfiguracja projektu Svelte
Aby rozpocząć korzystanie z Svelte, należy upewnić się, że zarówno środowisko uruchomieniowe Node.js, jak i Node Package Manager (NPM), który ułatwia instalację pakietów dla aplikacji JavaScript, są odpowiednio zainstalowane na urządzeniu komputerowym. Aby zainicjować proces konfiguracji, należy otworzyć okno terminala i wykonać następujące polecenie:
npm create vite
Po pierwsze, nazwij swój projekt, a następnie wybierz Svelte jako preferowany framework. Następnie skonfiguruj go do korzystania z JavaScript, wybierając odpowiednią opcję w procesie instalacji. Następnie przejdź do folderu głównego projektu i wykonaj wymagane polecenia instalacji zależności w terminalu lub wierszu poleceń.
npm install
Zadanie wymaga wyeliminowania zbędnego kodu z projektu poprzez usunięcie katalogów “assets” i “lib”, oczyszczając zawartość plików “App.svelte” i “App.css”.
Jak używać tweeningu w Svelte
Tweening odnosi się do metody stosowanej zarówno w animacji, jak i grafice komputerowej, która polega na generowaniu klatek pośrednich między dwiema klatkami kluczowymi w celu uzyskania płynnego i naturalnie wyglądającego ruchu lub transformacji. Framework Svelte zapewnia skuteczny sposób wykorzystania tej techniki poprzez wykorzystanie wartości liczbowych dla animowanych elementów, ułatwiając w ten sposób tworzenie płynnych i responsywnych przejść w aplikacjach internetowych.
Narzędzie Tweened należy do modułu Svelte/Motion i może być zintegrowane z komponentami za pomocą instrukcji importu, która jest zgodna z określoną składnią.
import { tweened } from 'svelte/motion'
Narzędzie tweened w Svelte działa jako konfigurowalny zapisywalny magazyn, który pozwala użytkownikom efektywnie zarządzać stanem aplikacji. Narzędzie to składa się z dwóch podstawowych metod, a mianowicie “set” i “update”, które umożliwiają programistom efektywne manipulowanie danymi. Zasadniczo, tweened store przyjmuje formę obiektu JavaScript, zapewniając dostępne środki, za pomocą których można nadzorować i kontrolować ewolucję dynamicznej zawartości w aplikacji.
const y = tweened(defaultValue, {
duration: [time-in-milliseconds],
easing: [easing-function],
})
wartość początkowa powiązanego elementu reprezentowanego przez pierwszy parametr, który służy jako ustawienie domyślne dla powiązania y ; oraz obiekt zawierający dwie właściwości, a mianowicie duration i easing .Pierwsza z nich określa przedział czasu w milisekundach, w którym utrzyma się tween, podczas gdy druga wyznacza funkcję łagodzenia, która zostanie zastosowana podczas procesu animacji.
Funkcje łagodzące w domenie Svelte ustanawiają zachowanie przejścia i są objęte modułem svelte/easing. W związku z tym należy zaimportować określoną funkcję z tej domeny, aby włączyć ją do repozytorium tweened. Framework Svelte prezentuje wizualizator easing, który umożliwia użytkownikom badanie wzorców zachowań wykazywanych przez różne funkcje easing.
Aby skutecznie zademonstrować możliwości narzędzia tween w środowisku Svelte, rozważmy następujący przykład, w którym wykorzystujemy magazyn tween do stopniowego zwiększania wymiarów komponentu ekranowego.
<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))}>Increase size</button>
<style>
.container{
display: flex;
align-items: flex-end;
margin-top: 400px;
}
div{
height:0;
width:100px;
background-color: red;
}
</style>
Kod importuje dwie funkcje, tweened i bounceOut , które znajdują się w odpowiednich modułach Svelte svelte/motion i svelte/easing . Następnie definiowana jest stała zmienna i wiązana z tweened store, której wartość domyślna jest reprezentowana przez this.$options.animate=true; . Dostęp do tej wartości domyślnej można uzyskać za pomocą symbolu $ . Wreszcie, funkcja tweened akceptuje dodatkowy argument, obiekt zawierający właściwość easing , która odwołuje się do funkcji bounceOut easing dostarczanej przez moduł svelte/easing .
Segment znaczników zawiera element przycisku z atrybutem onclick, który wywołuje metodę aktualizacji powiązania rozmiaru. Po kliknięciu przycisku metoda update zwiększa zmienną store size ze znakiem dolara o trzy. Dodatkowo, element div posiada styl inline zarządzany przez wartość size store znaku dolara. Po uruchomieniu w przeglądarce internetowej użytkownik będzie obserwował następującą prezentację wizualną:
Przejścia w Svelte
W celu ułatwienia procesu włączania i usuwania elementów w ramach obiektowego modelu dokumentu (DOM) w Svelte, wykorzystuje on dyrektywę znaną jako dyrektywa “transition” wraz z dedykowanym modułem o nazwie “svelte/transition”. Moduł ten oferuje szereg praktycznych funkcji, które mogą być wykorzystywane wraz z dyrektywą “transition” do różnych celów. Na przykład, można zastosować funkcję “blur” zaimportowaną z modułu “svelte/transition”, aby utworzyć efekt zanikania lub zanikania elementu, gdy wchodzi on lub wychodzi z DOM.
<script>
import { blur } from 'svelte/transition';
</script>
Aby zaimplementować możliwość montowania i odmontowywania elementów z Document Object Model (DOM), należy najpierw wprowadzić flagę logiczną jako właściwość skryptu, która jest początkowo ustawiona na false . Będzie ona służyć jako wskaźnik widoczności elementu na stronie. Korzystając z tej funkcji, programiści mogą efektywnie zarządzać interakcją swojego kodu z DOM, przełączając widoczność określonych elementów w czasie wykonywania.
<script>
import { blur } from 'svelte/transition';
let visible = false;
</script>
Z pewnością, oto przykład jak to osiągnąć w Vue.js przy użyciu dyrektywy v-if:html export default {data() {return {isBlur: false // ustaw wartość początkową tylko do celów demonstracyjnych};},computed: {/** definiuje niestandardowe klasy CSS na podstawie właściwości isBlur */get blurClass() {return isBlur ? ‘blur’ : ‘’;}};
{#if visible}
<div>Here I am...</div>
{/if}
Włącz dostarczony fragment kodu do pliku HTML i dołącz go jako część treści swojej strony internetowej. Kod wyświetli akapit z przyciskiem, który przełącza widoczność elementu div zawierającego dodatkowe informacje o produkcie.
<button on:click={()=>visible=!visible}>
{visible ? "Hide" : "Show"}
</button>
Po wykonaniu kodu w środowisku przeglądarki internetowej oczekuje się następującej prezentacji wizualnej:
fade, blur, fly, slide, scale, draw i crossfade. Przejścia te są wysoce konfigurowalne i można je konfigurować za pomocą różnych parametrów, takich jak opóźnienie, czas trwania, złagodzenie, krycie i ilość, z których każdy służy do odpowiedniego wzmocnienia lub modyfikacji ich efektów.
Jasne! A co powiesz na to? Oprócz kontrolowania przejść opartych na właściwościach takich jak enter lub exit , Svelte zapewnia bardziej szczegółowe podejście poprzez w i out przejściach. Rozważmy na przykład nasz poprzedni przykład, w którym chcemy, aby element miał efekt rozmycia przy wejściu i efekt przesuwania przy wyjściu. Możemy to osiągnąć, używając odpowiednich przejść w następujący sposób:
<script>
import { blur, slide } from 'svelte/transition';
let visible = false;
</script>
{#if visible}
<div in:blur out:slide>Here I am...</div>
{/if}
<button on:click={()=>visible=!visible}>
{visible ? "Hide" : "Show"}
</button>
W powyższym fragmencie kodu warto zauważyć, że w elemencie div nie ma dyrektywy przejścia. Zamiast tego określono dwa przejścia przy użyciu techniki klatek kluczowych, a mianowicie “blur” i “slide”, które są wskazywane przez właściwości “from” i “to” odpowiednich reguł @keyframe.
Animating Svelte Elements
First, Last, Invert, Play.Obejmuje on trzy kluczowe argumenty - opóźnienie, czas trwania i złagodzenie - które mają fundamentalne znaczenie dla tworzenia urzekających efektów wizualnych podczas procesów animacji. Aby zilustrować jego funkcjonalność, przeanalizujmy poniższy przykładowy kod.
<script>
import { flip } from "svelte/animate";
let originalList = ["Tomatoes", "Bread", "Fish", "Milk", "Cat food"];
let shoppingList = [...originalList];
</script>
<div class="container">
{#each shoppingList as item (item)}
{@const number = shoppingList.indexOf(item)}
<div animate:flip>
{number \\+ 1}. {item}
</div>
{/each}
</div>
<button on:click={() => shoppingList = shoppingList.sort()}>Arrange</button>
<button on:click={() => shoppingList = [...originalList]}>Reset</button>
Przedstawiony fragment kodu demonstruje implementację dyrektywy animate w aplikacji Svelte. W tagu