Добре виконана анімація може покращити взаємодію з користувачем і може бути чудовим способом надіслати відгук користувачеві. Svelte спрощує вбудовування анімації та переходів у вашу програму без використання сторонніх бібліотек JavaScript.
Налаштування проекту Velte
Щоб розпочати роботу зі Svelte, переконайтеся, що середовище виконання Node.js і менеджер пакетів вузлів (NPM) належним чином інстальовано на вашому комп’ютері. Відкрийте термінал і виконайте таку команду:
npm create vite
Це створить новий проект Vite.js. Назвіть свій проект, виберіть Svelte як фреймворк і встановіть варіант JavaScript. Потім перейдіть до каталогу проекту та виконайте таку команду, щоб установити необхідні залежності:
npm install
Видаліть шаблонний код, видаливши папки assets і lib, а також очистивши вміст файлів App.svelte та App.css.
Як використовувати Tweening у Svelte
Анімація — це техніка в анімації та комп’ютерній графіці, яка генерує проміжні кадри між ключовими кадрами для створення плавного та реалістичного руху або переходів. Svelte пропонує утиліту tweened, яка дозволяє анімувати елементи за допомогою числових значень, що полегшує створення плавних переходів і анімації у ваших веб-додатках.
Утиліта tweened є частиною модуля svelte/motion. Щоб використовувати tweened у вашому компоненті, ви повинні імпортувати його так:
import { tweened } from 'svelte/motion'
Під капотом утиліта tweened — це лише записуваний магазин Svelte. Магазин Svelte — це в основному об’єкт JavaScript, який можна використовувати для управління станом. Сховище tweened має два методи, а саме: встановити та оновити. На базовому рівні синтаксис tweened store виглядає приблизно так:
const y = tweened(defaultValue, {
duration: [time-in-milliseconds],
easing: [easing-function],
})
Наведений вище блок коду визначає змінну y і зв’язує її зі сховищем твінів. У магазині є два параметри. Перший параметр представляє значення за замовчуванням, яке повинно мати прив’язування y. Наступний параметр – це об’єкт з двома ключами, тривалістю і послабленням. Тривалість визначає, скільки має тривати анімація в мілісекундах, тоді як easing визначає функцію easing.
Функції полегшення в Svelte визначають поведінку анімації. Ці функції є частиною модуля svelte/easing, що означає, що вам потрібно імпортувати певну функцію з модуля, перш ніж ви зможете передати її в сховище tween. У Svelte є візуалізатор спрощення, за допомогою якого можна досліджувати поведінку різних функцій спрощення.
Щоб повністю проілюструвати, як можна використовувати утиліту tweened, ось приклад використання сховища tweened для збільшення розміру елемента в 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>
Наведений вище блок коду імпортує дві функції: tweened і bounceOut з модулів svelte/motion і svelte/easing відповідно. Далі є постійна змінна, яка прив’язана до сховища анімації. Цей магазин має значення за замовчуванням 0. Це значення за замовчуванням (значення збереження) можна отримати за допомогою символу $. Наступним параметром у функції tweened є об’єкт із ключем easing, який вказує на функцію easing bounceOut.
У розділі розмітки елемент кнопки має директиву on:click, яка викликає метод оновлення для прив’язки розміру. Цей метод збільшує значення $size store на 3 кожного разу, коли ви натискаєте кнопку. Елемент div має вбудований стиль, який залежить від значення магазину $size. Коли ви запускаєте цей код у браузері, ви повинні побачити ось що:
Переходи в Свелте
Для переходу елементів у об’єктну модель документа (DOM) і з неї в Svelte є директива переходу та модуль під назвою svelte/transition, який експортує корисні функції, які можна використовувати з директивою переходу. Наприклад, щоб розмити елемент у DOM і поза ним, спершу імпортуйте функцію розмиття з svelte/transition:
<script>
import { blur } from 'svelte/transition';
</script>
Потім додайте функцію монтування та демонтування елемента з DOM. У тезі сценарію створіть видиму змінну та встановіть для неї значення false.
<script>
import { blur } from 'svelte/transition';
let visible = false;
</script>
Потім скористайтеся блоком if для умовного відтворення div. Переконайтеся, що ви додали директиву переходу до div і налаштували його на розмивання
{#if visible}
<div>Here I am...</div>
{/if}
Потім додайте кнопку, щоб показати або приховати div.
<button on:click={()=>visible=!visible}>
{visible ? "Hide" : "Show"}
</button>
Коли ви запускаєте код у браузері, ви повинні побачити ось що:
Модуль витонченого/переходу експортує сім функцій, а саме: згасання, розмиття, політ, ковзання, масштабування, малювання та перехресне затухання. Переходи в Svelte можуть приймати параметри. Наприклад, функція розмиття з наведеного вище прикладу може приймати такі параметри: затримка, тривалість, послаблення (функція послаблення), непрозорість і кількість (розмір розмиття).
Окрім параметрів переходів, Svelte також пропонує вхідні та вихідні переходи, які дають вам точніший контроль над переходом елемента. Розглянемо останній приклад: що, якби ви хотіли, щоб вхідний перехід елемента був розмитим, а вихідний – ковзним? Ось як ви це робите:
<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>
Зверніть увагу, що в блоці коду вище немає директиви переходу в елементі div. Натомість директиву переходу було замінено на директиви in та out, які вказують на розмиття та ковзання відповідно.
Анімація витончених елементів
Найзручнішим способом анімації елементів у Svelte є використання функції перевертання у svelte/animate. flip означає «First, Last, Invert, Play». Він приймає три параметри, а саме: затримку, тривалість і ослаблення. Подивіться на наступний код:
<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>
Блок коду ілюструє, як ви можете використовувати директиву animate у Svelte. У тегу сценарію перший рядок імпортує функцію flip. Існує два масиви: originalList і shoppingList. У div «container» блок keyed-each відповідає за рендеринг кожного елемента в масиві shoppingList.
Дочірній div «контейнера» div має директиву animate, яка вказує на функцію перевертання. Натискання першої кнопки відсортує список за алфавітом, а натискання другої кнопки скине список. Коли ви запускаєте код у браузері, ви повинні побачити ось що:
Чому анімація важлива в будь-якій веб-програмі?
Значення анімації виходить за межі простої візуальної привабливості; вони втілюють суть покращення взаємодії з користувачем та ефективного спілкування. Бездоганно поєднуючи естетику з функціональністю, анімація вдихає життя у веб-програми, роблячи їх не лише привабливими, але й інтуїтивно зрозумілими.