Около 5 минут · React 16.8+ · React DOM
Начало
От установки до жестов и анимации появления и ухода за шесть шагов. Каждый шаг — небольшой работающий компонент.
Установка
У Animated нет зависимостей во время выполнения. React 16.8+ — peer-зависимость.
Точка входа пакета помечена 'use client'. В App Router Next.js серверный layout может рендерить
AnimatedProvider; хуки иAnimated.<tag>используйте внутри Client Components.npm install @kkwaenggwari/animatedИмпорт
@kkwaenggwari/animatedразрешается в вашем редакторе.Сдвиньте первое значение
useAnimatedValue(1)владеет живым числом на всё время жизни компонента. Передайте его прямо вstyle: оно станет CSS-переменной, поэтому React не перерисовывает, пока оно меняется.timing(value, { toValue, duration }).start()двигает его. Повторное нажатие на полпути начинается с текущей прозрачности.Подготовка примера…
Блок исчезает и появляется снова, а повторное нажатие на полпути разворачивает его с текущего места.
Много выходов из одного значения
interpolateпревращает значение в длины, углы или числа. Без easing это точныйcalc()той же переменной, поэтому пять дорожек стоят столько же, сколько одна.Разные входные диапазоны одного значения создают каскад без пяти отдельных анимаций.
Подготовка примера…
Одно нажатие двигает пять дорожек каскадом; изменение разброса меняет только диапазоны.
Опишите цель
Animated.buttonрендерит обычную кнопку.seed— первый кадр,pose— где элемент должен быть сейчас, аtempo— как он туда доберётся.Когда
poseменяется на полпути, элемент поворачивает с того места, где он на экране, сохраняя скорость пружины.Подготовка примера…
Быстрые нажатия на карточки никогда не заставят ни одну прыгнуть.
Подключите ввод
input(ref, moveInput(...))записывает координаты указателя в значения.follow(target, source)заставляет одно значение пружинисто следовать за другим.Всё, что объявлено в фабрике
useAnimated, принадлежит компоненту: слушатели и пружины останавливаются при размонтировании или изменении зависимости.Подготовка примера…
Карточка наклоняется к указателю и возвращается на место, когда указатель уходит.
Анимируйте уход
Удаление дочернего элемента React обычно убирает его сразу.
Animated.Keepудерживает дочерние элементы с key, пока не завершится их позаdepart.waitрендерит новые дочерние элементы только после завершения всех уходов.Подготовка примера…
Закрытые сообщения уходят с выбранным движением, прежде чем исчезнуть.
Вы знаете всю модель
Значения, цели, ввод и уходы используют одни и те же контроллеры, правила прерывания и очистку. Руководства подробно разбирают каждое.