Хранилище tweened(): длительность и плавность
Интерполируйте значения за фиксированное время со встроенной или пользовательской функцией плавности
«Хранилище tweened(): длительность и плавность» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
На основе длительности
Хранилище tweened анимирует значение в течение фиксированной длительности с использованием функции сглаживания.
Создание хранилища
Передайте начальное значение и параметры.
import { tweened } from "svelte/motion";
const p = tweened(0, { duration: 500, easing: cubicOut });Анимация к целевому значению
Вызовите set с новым значением. Хранилище будет анимировать его в течение заданной длительности.
p.set(100);Метод обновления
Анимируйте значение на основе его текущего состояния.
p.update(n => n + 1);Подписка
Используйте $p в разметке.
<progress value={$p} max="100"></progress>Пользовательское сглаживание
Передайте любую функцию сглаживания из svelte/easing или собственную функцию.
Целевые объекты
Как и spring, tweened может анимировать значения объектов.
Переопределение для отдельного вызова
set принимает второй аргумент с параметрами, позволяющий переопределить длительность или сглаживание для одного перехода.
p.set(0, { duration: 1000 });Когда использовать
Предпочитайте tweened spring, когда Вам нужно предсказуемое движение, основанное на времени.
Варианты использования
Индикаторы выполнения, измерительные шкалы, последовательные анимации.
Производительность
Как и spring, tweened использует rAF внутри для плавного движения.
Быстрая проверка
В чём главное различие между tweened и spring?
Итоги
tweened анимирует значения в течение фиксированной длительности с использованием сглаживания. Используйте его для предсказуемого движения, основанного на времени.
Часто задаваемые вопросы
Урок «Хранилище tweened(): длительность и плавность» бесплатный?
Да — полный текст урока «Хранилище tweened(): длительность и плавность» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Хранилище tweened(): длительность и плавность»?
Интерполируйте значения за фиксированное время со встроенной или пользовательской функцией плавности Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Хранилище tweened(): длительность и плавность»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Хранилище spring(): анимация на основе физики
- Хранилище tweened(): длительность и плавность
- Функции интерполяции
- Анимация путей SVG с помощью движения