Az átmenetek és animációk megértése a Svelte nyelven

Ha jól csinálod, az animáció javíthatja a felhasználói élményt, és nagyszerű módja lehet a felhasználónak való visszajelzés küldésének. A Svelte megkönnyíti az animációk és átmenetek beillesztését az alkalmazásba anélkül, hogy harmadik fél JavaScript-könyvtáraira lenne szükség.

Svelte projekt felállítása

A Svelte használatához meg kell győződnie erről a Node.js futási környezet és Node Package Manager (NPM) megfelelően vannak telepítve a számítógépére. Nyissa meg a terminált, és futtassa a következő parancsot:

npm create vite

Ezzel állványzat lesz a új Vite.js projekt. Nevezze el a projektet, válassza ki Karcsú keretként, és állítsa be a változatot JavaScript. Ezután váltson át a projektkönyvtárra, és futtassa a következő parancsot a szükséges függőségek telepítéséhez:

npm install

Távolítsa el az alapkódot a eszközöket és lib mappákat, és törli a tartalmát App.svelte és App.css fájlokat.

A Tweening használata a Svelte-ben

A Tweening egy olyan technika az animációban és a számítógépes grafikában, amely közbenső képkockákat hoz létre a kulcskockák között, hogy egyenletes és valósághű mozgást vagy átmeneteket hozzon létre. Svelte kínál a tweened segédprogram, amely lehetővé teszi az elemek numerikus értékekkel történő animálását, így egyszerűvé téve gördülékeny átmenetek és animációk létrehozását a webalkalmazásokban.

A tweened segédprogram része a karcsú/mozgás modult. A tweened komponensben való használatához a következőképpen kell importálnia:

import { tweened } from'svelte/motion'

A motorháztető alatt a tweened segédprogram csak egy írható Svelte bolt. A Svelte tároló alapvetően egy JavaScript objektum, amelyet állapotkezelésre használhat. A tweened üzletnek két módja van: készlet és frissítés. Alapszinten a tweened üzlet szintaxisa valahogy így néz ki:

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

A fenti kódblokk egy változót határoz meg y és beköti egy tweened boltba. Az üzletben két paraméter található. Az első paraméter az alapértelmezett értéket jelenti y kötelezőnek kellett volna lennie. A következő paraméter egy két kulccsal rendelkező objektum időtartama és enyhülés. A időtartama meghatározza, hogy a tween mennyi ideig tartson ezredmásodpercben enyhülés meghatározza az könnyítés funkciót.

A Svelte könnyítő funkciói meghatározzák a tween viselkedését. Ezek a funkciók a karcsú/könnyed modul, ami azt jelenti, hogy importálnia kell egy adott függvényt a modulból, mielőtt átadná azt a tweened tárolóba. A Svelte rendelkezik egy könnyítési megjelenítővel, amellyel felfedezheti a különböző könnyítési funkciók viselkedését.

A tweened segédprogram használatának teljes szemléltetésére íme egy példa a tweened store használatával egy elem méretének növelésére a Svelte-ben.