Что такое переходы и анимация в Svelte?

Переходы и анимация могут улучшить взаимодействие с пользователем при просмотре веб-страниц. Svelte поможет вам легко объединить эти два элемента. Ниже приведены подробные инструкции.

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

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

/svelte-transition-animation/

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

установка npm

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

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

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

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

импортировать { анимацию } из ‘svelte/motion’

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

const y = tweened(defaultValue, { продолжительность: (время в миллисекундах), easing: (easing-function), })

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

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

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

(size.update(()=>$size+3))}>Увеличить размер

Приведенный выше блок кода импортирует две функции: Tweened и BounceOut из модулей svelte/motion и svelte/easing соответственно. Далее есть постоянная переменная, связанная с tweened хранилища. Значение по умолчанию для этого хранилища равно 0. Доступ к значению по умолчанию можно получить с помощью символа $. Следующий параметр в функции анимации — это объект с ключом замедления, указывающим на функцию ускорения BounceOut.

В разметке компонент кнопки имеет директиву on:click, которая вызывает метод обновления для ссылки размера. Этот метод увеличивает значение $size хранилища на 3 каждый раз, когда вы нажимаете кнопку. Элемент div имеет встроенный стиль, который зависит от значения $size хранилища. Когда вы запустите этот код в браузере, вы увидите следующий результат:

Переходы в Svelte

Для перехода элементов в объектную модель документа (DOM) и из нее в Svelte есть команда перехода и модуль с именем svelte/transition, который экспортирует полезные функции, которые вы можете использовать с командой перехода. Например, чтобы размыть элемент в DOM и за его пределами, сначала импортируйте функцию размытия из svelte/transition:

Затем добавьте функциональность для закрепления и открепления элемента от DOM. В теге скрипта создайте видимую переменную и установите для нее значение false.

Затем используйте if-block, чтобы отобразить условный div. Обязательно добавьте директиву перехода в элемент div и установите для нее размытие.

{#если видно} Вот и я. {/если}

Затем добавьте кнопку, чтобы показать или скрыть div.

видимый=!видимый}> {видимый ? «Скрыть» : «Показать»}

Когда вы запустите этот код в своем браузере, вы увидите:

Модуль svelte/transition экспортирует 7 именованных функций: затухание, размытие, полет, скольжение, масштабирование, рисование и кроссфейд. Переходы в Svelte могут принимать параметры. Например, функция размытия из исходного примера может принимать следующие параметры: задержку, продолжительность, плавность, непрозрачность и количество.

В дополнение к параметрам перехода, Svelte также предоставляет входные и выходные переходы, что дает вам больший контроль над переходами компонентов. Что произойдет, если вы захотите, чтобы входной переход элемента был размытым, а выходной — скользящим? Вот как это сделать:

{#если видно} Вот и я. {/if}visible=!visible}> {visible ? «Скрыть» : «Показать»}

Обратите внимание, что в приведенном выше блоке кода для элемента div нет оператора перехода. Вместо этого команда перехода была заменена на in и out, которые указывают на размытие и скольжение соответственно.

Анимационные эффекты для элементов Svelte

Самый удобный способ анимировать компоненты в Svelte — использовать функцию переворота из svelte/animate. Flip — это аббревиатура от «First, Last, Invert, Play». Он принимает 3 параметра: задержку, продолжительность и замедление. Посмотрите на следующий код:

{#each ShoppingList as item (item)} {@const Number = ShoppingList.indexOf(item)} {number + 1}. {item} {/each} ShoppingList = ShoppingList.sort()}>Упорядочить ShoppingList = (.originalList)}>Сбросить

Этот блок кода показывает, как можно использовать команду анимации в Svelte. В теге скрипта первая строка импортирует функцию переворота. Здесь есть два массива: originalList и ShoppingList. В div ‘container’ блок keyed-each отвечает за отображение каждого элемента в массиве ShoppingList.

Дочерний элемент div элемента «container» имеет директиву animate, которая указывает на функцию переворота. Нажатие первой кнопки сортирует список в алфавитном порядке, а нажатие второй кнопки сбрасывает список. Запустив этот код в браузере, вы получите именно это. видеть:

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

В приведенной выше статье вы познакомились с темой «Что такое переходы и анимация в Svelte?». СоветыНадейтесь, что эта статья вам поможет! Если эта статья кажется вам интересной и полезной, не забудьте поделиться ею. Спасибо!