Добавете живот към вашите приложения Svelte чрез интегриране на преходи и завладяващи анимации.

Когато е направена добре, анимацията може да подобри потребителското изживяване и може да бъде чудесен начин за изпращане на обратна връзка до потребителя. Svelte ви улеснява да включите анимации и преходи във вашето приложение с много малка нужда от JavaScript библиотеки на трети страни.

Създаване на изискан проект

За да започнете да работите със Svelte, трябва да се уверите, че времето за изпълнение Node.js и Мениджър на пакети на възли (NPM) са правилно инсталирани на вашия компютър. Отворете вашия терминал и изпълнете следната команда:

npm create vite

Това ще скеле a нов проект Vite.js. Дайте име на вашия проект, изберете Изящен като рамка и задайте варианта на JavaScript. След това превключете към директорията на проекта и изпълнете следната команда, за да инсталирате необходимите зависимости:

npm install

Премахнете шаблонния код, като изтриете активи и либ папки и изчистване на съдържанието на App.svelte и App.css файлове.

instagram viewer

Как да използвате Tweening в Svelte

Tweening е техника в анимацията и компютърната графика, която генерира междинни кадри между ключовите кадри, за да създаде гладко и реалистично движение или преходи. Svelte предлага a tweened помощна програма, която ви позволява да анимирате елементи с помощта на числови стойности, което улеснява създаването на плавни преходи и анимации във вашите уеб приложения.

Помощната програма tweened е част от стройно/движение модул. За да използвате tweened във вашия компонент, трябва да го импортирате по следния начин:

import { tweened } from'svelte/motion'

Под капака помощната програма tweened е просто магазин на Svelte с възможност за запис. Магазинът на Svelte е основно JavaScript обект, който можете да използвате за управление на състоянието. Магазинът tweened има два метода, а именно: комплект и актуализация. На основно ниво синтаксисът за tweened store изглежда по следния начин:

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

Кодовият блок по-горе дефинира променлива г и го свързва към tweened store. В магазина има два параметъра. Първият параметър представлява стойността по подразбиране г обвързване трябва да има. Следващият параметър е обект с два ключа продължителност и облекчаване. The продължителност определя колко време трябва да продължи анимацията в милисекунди, докато облекчаване дефинира функцията за облекчаване.

Функциите за облекчаване в Svelte определят поведението на tween. Тези функции са част от елегантен/облекчаване module, което означава, че трябва да импортирате конкретна функция от модула, преди да можете да го прехвърлите в tween store. Svelte има визуализатор за облекчаване, който можете да използвате, за да изследвате поведението на различни функции за облекчаване.

За да илюстрирате напълно как можете да използвате помощната програма tweened, ето пример за използване на магазина tweened за увеличаване на размера на елемент в Svelte.