Понимание переходов и анимации в Svelte

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

Настройка проекта Svelte

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

npm create vite

Это станет основой новый проект Vite.js. Назовите свой проект, выберите стройный в качестве основы и установите вариант на JavaScript. Затем перейдите в каталог проекта и выполните следующую команду, чтобы установить необходимые зависимости:

npm install

Удалите шаблонный код, удалив ресурсы и библиотека папок и очистка содержимого App.svelte и App.css файлы.

Как использовать анимацию в Svelte

Анимация — это метод анимации и компьютерной графики, который генерирует промежуточные кадры между ключевыми кадрами для создания плавного и реалистичного движения или переходов. Компания Svelte предлагает анимированный утилита, которая позволяет анимировать элементы, используя числовые значения, упрощая создание плавных переходов и анимации в ваших веб-приложениях.

Утилита анимации является частью стройность/движение модуль. Чтобы использовать анимацию в своем компоненте, вам необходимо импортировать ее следующим образом:

import { tweened } from'svelte/motion'

По сути, анимационная утилита представляет собой просто записываемый магазин Svelte. Магазин Svelte — это, по сути, объект JavaScript, который можно использовать для управления состоянием. Анимированное хранилище имеет два метода, а именно: набор и обновлять. На базовом уровне синтаксис анимированного хранилища выглядит примерно так:

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

Приведенный выше блок кода определяет переменную й и привязывает его к промежуточному хранилищу. В магазине есть два параметра. Первый параметр представляет значение по умолчанию, й привязка должна быть. Следующий параметр — объект с двумя ключами продолжительность и смягчение. продолжительность определяет, как долго должна длиться анимация в миллисекундах, пока смягчение определяет функцию смягчения.

Функции замедления в Svelte определяют поведение анимации движения. Эти функции являются частью стройность/облегчение модуль, что означает, что вам необходимо импортировать определенную функцию из модуля, прежде чем вы сможете передать ее в хранилище анимации. В Svelte есть визуализатор замедления, который можно использовать для изучения поведения различных функций замедления.

Чтобы полностью проиллюстрировать, как можно использовать утилиту анимации, ниже приведен пример использования хранилища анимации для увеличения размера элемента в Svelte.