Pochopení přechodů a animací ve Svelte
Když se animace provede dobře, může zlepšit uživatelský dojem a může být skvělým způsobem, jak uživateli poslat zpětnou vazbu. Svelte vám usnadňuje začlenění animací a přechodů do vaší aplikace s velmi malou potřebou knihoven JavaScriptu třetích stran.
Table of Contents
Nastavení projektu Svelte
Abyste mohli začít používat Svelte, měli byste se ujistit, že runtime Node.js a Node Package Manager (NPM) jsou na vašem počítači správně nainstalovány. Otevřete terminál a spusťte následující příkaz:
npm create vite
Tím vznikne nový projekt Vite.js. Pojmenujte svůj projekt, vyberte Svelte jako framework a nastavte variantu na JavaScript. Poté se přepněte do adresáře projektu a spusťte následující příkaz pro instalaci potřebných závislostí:
npm install
Odstraňte standardní kód odstraněním složek aktiv a lib a vymazáním obsahu souborů App.svelte a App.css.
Jak používat Tweening v Svelte
Tweening je technika v animaci a počítačové grafice, která generuje přechodné snímky mezi klíčovými snímky za účelem vytvoření hladkého a realistického pohybu nebo přechodů. Svelte nabízí vylepšený nástroj, který vám umožňuje animovat prvky pomocí číselných hodnot, což usnadňuje vytváření plynulých přechodů a animací ve vašich webových aplikacích.
Doplněný nástroj je součástí modulu svelte/motion. Chcete-li použít tweened ve své komponentě, musíte ji importovat takto:
import { tweened } from 'svelte/motion'
Pod kapotou je vylepšený nástroj pouze zapisovatelný obchod Svelte. Obchod Svelte je v podstatě objekt JavaScriptu, který můžete použít ke správě stavu. Doplněný obchod má dvě metody, konkrétně: nastavení a aktualizaci. Na základní úrovni vypadá syntaxe pro doplněný obchod asi takto:
const y = tweened(defaultValue, {
duration: [time-in-milliseconds],
easing: [easing-function],
})
Výše uvedený blok kódu definuje proměnnou y a váže ji k doplňovanému úložišti. V obchodě jsou dva parametry. První parametr představuje výchozí hodnotu, kterou by vazba y měla mít. Dalším parametrem je objekt se dvěma klávesami trvání a náběh. Doba trvání definuje, jak dlouho má doplnění trvat v milisekundách, zatímco náběh/doběh definuje funkci náběhu/doběhu.
Funkce náběhu v Svelte definují chování doplnění. Tyto funkce jsou součástí modulu svelte/easing, což znamená, že musíte importovat konkrétní funkci z modulu, než ji můžete předat do tweened store. Svelte má vizualizér náběhu/doběhu, který můžete použít k prozkoumání chování různých funkcí náběhu/doběhu.
Abychom plně ilustrovali, jak můžete použít tweened nástroj, zde je příklad použití tweened store ke zvětšení velikosti prvku v 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))}>Increase size</button><style>
.container{
display: flex;
align-items: flex-end;
margin-top: 400px;
}
div{
height:0;
width:100px;
background-color: red;
}
</style>
Výše uvedený blok kódu importuje dvě funkce: tweened a bounceOut z modulů Svelte/motion a Svelte/easing. Dále je zde konstantní proměnná, která je svázána s doplněným úložištěm. Tento obchod má výchozí hodnotu 0. K této výchozí hodnotě (hodnotě úložiště) lze přistupovat pomocí symbolu $. Dalším parametrem v doplňované funkci je objekt s klávesou náběhu/doběhu, která ukazuje na funkci náběhu/doběhu bounceOut.
V sekci značek má prvek tlačítka on:click direktivu, která volá metodu aktualizace na vazbě velikosti. Tato metoda zvyšuje hodnotu úložiště $size o 3 pokaždé, když kliknete na tlačítko. Element div má vložený styl, který závisí na hodnotě úložiště $size. Když spustíte tento kód v prohlížeči, měli byste vidět toto:
Přechody ve Svelte
K přechodu prvků do az modelu DOM (Document Object Model) má Svelte direktivu přechodu a modul nazvaný svelte/transition, který exportuje užitečné funkce, které můžete použít s direktivou přechodu. Chcete-li například rozmazat prvek v a z DOM, nejprve importujte funkci rozostření z úhlopříčky/přechodu:
<script>
import { blur } from 'svelte/transition';
</script>
Poté přidejte funkci pro připojení a odpojení prvku z DOM. Ve značce skriptu vytvořte viditelnou proměnnou a nastavte ji na hodnotu false.
<script>
import { blur } from 'svelte/transition';
let visible = false;
</script>
Pak použijte blok if k podmíněnému vykreslení div. Ujistěte se, že jste přidali direktivu přechodu na div a nastavili ji na rozmazání
{#if visible}
<div>Here I am...</div>
{/if}
Poté přidejte tlačítko pro zobrazení nebo skrytí div.
<button on:click={()=>visible=!visible}>
{visible ? "Hide" : "Show"}
</button>
Když spustíte kód v prohlížeči, měli byste vidět toto:
Modul svelte/transition exportuje sedm funkcí, jmenovitě: fade, blur, fly, slide, scale, draw a crossfade. Přechody ve Svelte mohou přijímat parametry. Například funkce rozostření z předchozího příkladu může přijmout následující parametry: zpoždění, trvání, náběh (funkce náběhu), neprůhlednost a množství (velikost rozostření).
Kromě parametrů na přechodech nabízí Svelte také přechody dovnitř a ven, které vám poskytují jemnější kontrolu nad přechodem prvku. Zvažte poslední příklad Co kdybyste chtěli, aby byl vstupní přechod prvku rozmazaný a jeho výstupní přechod byl posuvný? Postup je následující:
<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>
V bloku kódu výše si všimněte, že u prvku div není žádná přechodová směrnice. Místo toho byla direktiva přechodu nahrazena direktivami in a out, které ukazují na rozostření a posunutí.
Animace štíhlých prvků
Nejpohodlnějším způsobem animace prvků ve Svelte je použití funkce flip z svelte/animate. flip znamená „First, Last, Invert, Play“. Přijímá tři parametry, jmenovitě: zpoždění, trvání a náběh. Podívejte se na následující kód:
<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>
Blok kódu ukazuje, jak můžete použít direktivu animate v Svelte. V tagu script importuje první řádek funkci flip. Existují dvě pole, originalList a shoppingList. V divu „container“ je klíčovaný blok zodpovědný za vykreslení každého prvku v poli shoppingList.
Podřízený div divu „container“ má animovanou direktivu, která ukazuje na funkci flip. Stisknutím prvního tlačítka seřadíte seznam podle abecedy, stisknutím druhého tlačítka se seznam resetuje. Když spustíte kód v prohlížeči, měli byste vidět toto:
Proč je animace důležitá v jakékoli webové aplikaci?
Význam animací přesahuje pouhou vizuální přitažlivost; v sobě skrývají podstatu zlepšení uživatelské zkušenosti a efektivní komunikace. Bezproblémovým spojením estetiky s funkčností vdechuje animace webovým aplikacím život, díky čemuž jsou nejen poutavé, ale také intuitivní.
