Pochopenie prechodov a animácií v Svelte

Keď je animácia dobre vykonaná, môže zlepšiť používateľskú skúsenosť a môže byť skvelým spôsobom, ako používateľovi odoslať spätnú väzbu. Svelte vám uľahčuje začlenenie animácií a prechodov do vašej aplikácie s veľmi malou potrebou knižníc JavaScript tretích strán.

Nastavenie štíhleho projektu

Aby ste mohli začať pracovať so Svelte, mali by ste sa o to uistiť runtime Node.js a Správca balíkov uzlov (NPM) sú správne nainštalované vo vašom počítači. Otvorte terminál a spustite nasledujúci príkaz:

npm create vite

Toto bude lešenie a nový projekt Vite.js. Pomenujte svoj projekt, vyberte Štíhle ako rámec a nastavte variant na JavaScript. Potom sa prepnite do adresára projektu a spustite nasledujúci príkaz na inštaláciu potrebných závislostí:

npm install

Odstráňte štandardný kód vymazaním aktíva a lib priečinkov a vymazanie obsahu App.svelte a App.css súbory.

Ako používať Tweening v Svelte

Tweening je technika v animácii a počítačovej grafike, ktorá generuje medziľahlé snímky medzi kľúčovými snímkami na vytvorenie hladkého a realistického pohybu alebo prechodov. Svelte ponúka a

doplnené nástroj, ktorý vám umožňuje animovať prvky pomocou číselných hodnôt, čím zjednodušuje vytváranie plynulých prechodov a animácií vo vašich webových aplikáciách.

Doplnený nástroj je súčasťou švih/pohyb modul. Ak chcete použiť doplnenie vo svojom komponente, musíte ho importovať takto:

import { tweened } from'svelte/motion'

Pod kapotou je doplnený nástroj len zapisovateľný obchod Svelte. Obchod Svelte je v podstate objekt JavaScript, ktorý môžete použiť na správu stavu. Doplnený obchod má dva spôsoby, a to: nastaviť a aktualizovať. Na základnej úrovni vyzerá syntax pre doplnený obchod asi takto:

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

Vyššie uvedený blok kódu definuje premennú r a viaže ho k doplnenému obchodu. V obchode sú dva parametre. Prvý parameter predstavuje predvolenú hodnotu r viazanie by malo mať. Ďalším parametrom je objekt s dvoma kľúčmi trvanie a zmiernenie. The trvanie definuje, ako dlho má doplnenie trvať v milisekundách zmiernenie definuje funkciu uvoľňovania.

Funkcie uvoľnenia v Svelte definujú správanie doplnenia. Tieto funkcie sú súčasťou svelte/uľahčenie modul, čo znamená, že musíte importovať konkrétnu funkciu z modulu, aby ste ju mohli odovzdať do doplneného obchodu. Svelte má vizualizér spomalenia, ktorý môžete použiť na preskúmanie správania rôznych funkcií spomalenia.

Na úplnú ilustráciu toho, ako môžete použiť doplnený nástroj, uvádzame príklad použitia doplneného obchodu na zväčšenie veľkosti prvku v Svelte.