Разумевање прелаза и анимација у Свелтеу

Када се уради добро, анимација може побољшати корисничко искуство и може бити одличан начин за слање повратних информација кориснику. Свелте вам олакшава да уградите анимације и прелазе у вашу апликацију са врло малом потребом за ЈаваСцрипт библиотекама трећих страна.

Постављање Свелте пројекта

Да бисте почели са Свелте-ом, требало би да се у то уверите време извођења Ноде.јс и Ноде Пацкаге Манагер (НПМ) су правилно инсталирани на вашем рачунару. Отворите свој терминал и покрените следећу команду:

npm create vite

Ово ће поставити скелу а нови пројекат Вите.јс. Именујте свој пројекат, изаберите Свелте као оквир и поставити варијанту на ЈаваСцрипт. Затим пређите на директоријум пројекта и покрените следећу команду да бисте инсталирали неопходне зависности:

npm install

Уклоните шаблонски код брисањем средства и либ фолдере и брисање садржаја Апп.свелте и Апп.цсс фајлови.

Како користити Твеенинг у Свелте-у

Твеенинг је техника у анимацији и компјутерској графици која генерише средње кадрове између кључних кадрова да би се створило глатко и реалистично кретање или прелазе. Свелте нуди а

твеенед услужни програм који вам омогућава да анимирате елементе користећи нумеричке вредности, што олакшава креирање флуидних прелаза и анимација у вашим веб апликацијама.

Твеенед услужни програм је део виткост/покрет модул. Да бисте користили твеенед у својој компоненти, морате да је увезете овако:

import { tweened } from'svelte/motion'

Испод хаубе, твеенед услужни програм је само Свелте продавница на коју се може писати. Свелте продавница је у основи ЈаваСцрипт објекат који можете да користите за управљање стањем. Твеенед продавница има две методе и то: комплет и ажурирање. На основном нивоу, синтакса за твеенед продавницу изгледа отприлике овако:

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

Блок кода изнад дефинише променљиву и и везује га за твеенед продавницу. У продавници постоје два параметра. Први параметар представља подразумевану вредност тхе и везивање треба да има. Следећи параметар је објекат са два кључа трајање и попуштање. Тхе трајање дефинише колико дуго твеен треба да траје у милисекундама док попуштање дефинише функцију ублажавања.

Функције ублажавања у Свелте-у дефинишу понашање твеен-а. Ове функције су део витак/олакшан модул, што значи да морате да увезете одређену функцију из модула пре него што можете да је проследите у твеенед продавницу. Свелте има визуализатор ублажавања који можете користити да истражите понашање различитих функција ублажавања.

Да бисте у потпуности илустровали како можете да користите услужни програм твеенед, ево примера коришћења твеенед продавнице за повећање величине елемента у Свелте-у.