Хранилище spring(): анимация на основе физики
Анимируйте значения с настраиваемыми жёсткостью и затуханием для естественного эффекта
«Хранилище spring(): анимация на основе физики» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Физика пружины
Хранилище spring анимирует значения с учётом жёсткости и затухания, подобно настоящей пружине.
Импорт
Из svelte/motion.
import { spring } from "svelte/motion";Создание пружины
Передайте начальное значение и параметры.
const pos = spring({ x: 0, y: 0 }, { stiffness: 0.2, damping: 0.4 });Обновление цели
Задайте новую цель — значение начнёт анимироваться к ней.
pos.set({ x: 100, y: 50 });Подписка с помощью $
Используйте значение реактивно в разметке.
<div style="transform: translate({$pos.x}px, {$pos.y}px);"></div>Следование за мышью
Обновляйте цель пружины с помощью координат мыши для естественного следования за указателем.
Принудительная установка
Передайте { hard: true }, чтобы сразу перейти к значению.
pos.set({x: 0, y: 0}, { hard: true });Жёсткость
Чем выше жёсткость, тем быстрее значение приближается к цели.
Затухание
Чем выше затухание, тем меньше колебаний. Значение 1 означает отсутствие отскока.
Векторы и объекты
Пружины интерполируют числовые значения внутри массивов и вложенных объектов.
Производительность
Пружины используют rAF внутри. Они остаются плавными даже при большом количестве одновременных экземпляров.
Быстрая проверка
Что регулирует жёсткость пружины?
Итоги
Хранилища spring выполняют анимацию с учётом физических законов. Настраивайте stiffness и damping, чтобы получить нужное ощущение движения.
Часто задаваемые вопросы
Урок «Хранилище spring(): анимация на основе физики» бесплатный?
Да — полный текст урока «Хранилище spring(): анимация на основе физики» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Хранилище spring(): анимация на основе физики»?
Анимируйте значения с настраиваемыми жёсткостью и затуханием для естественного эффекта Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Хранилище spring(): анимация на основе физики»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Хранилище spring(): анимация на основе физики
- Хранилище tweened(): длительность и плавность
- Функции интерполяции
- Анимация путей SVG с помощью движения