Oživte své aplikace Svelte integrací přechodů a podmanivých animací.

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.

Nastavení projektu Svelte

Abyste mohli začít pracovat se Svelte, měli byste se o to ujistit runtime Node.js a Správce balíčků uzlů (NPM) jsou správně nainstalovány na vašem počítači. Otevřete terminál a spusťte následující příkaz:

npm create vite

Toto bude lešení a nový projekt Vite.js. Pojmenujte svůj projekt, vyberte Štíhlý jako rámec 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 vymazáním aktiva a lib složek a vymazání obsahu App.svelte a App.css soubory.

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í a

instagram viewer
doplněné 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í štíhlost/pohyb modul. 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, a to: soubor a Aktualizace. 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 připojí jej k doplnění obchodu. V obchodě jsou dva parametry. První parametr představuje výchozí hodnotu y vazba by měla mít. Dalším parametrem je objekt se dvěma klíči doba trvání a uvolnění. The doba trvání definuje, jak dlouho by mělo doplnění trvat v milisekundách uvolnění definuje funkci náběhu/doběhu.

Funkce náběhu v Svelte definují chování doplnění. Tyto funkce jsou součástí štíhlý/zmírnění modul, což znamená, že musíte importovat konkrétní funkci z modulu, než ji budete moci 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.