Value
new Value(initial: number)Изменяемое число с setValue, setOffset, flattenOffset, extractOffset, stopAnimation и resetAnimation.
Справочник API
Все экспорты @kkwaenggwari/animated с сигнатурами и руководствами, которые их объясняют.
Значения и графы
ValueXY
new ValueXY({ x?, y? })Парные значения x и y с теми же операциями, плюс getLayout и getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Создаёт число или именованную числовую запись вне React. Создание ничего не запускает.
Руководство: Значения и стилиAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)Базовый класс только для чтения для всех значений и графов: getValue, interpolate и слушатели.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })Живое сопоставление входных диапазонов с выходными, с easing и экстраполяцией extend, clamp или identity.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);Чистое вычисление только для чтения над одним или несколькими входами. Выходы, которые его используют, работают в JavaScript.
Руководство: Значения и стилиinterpolateFn
interpolateFn({ value, inputRange, outputRange });Вычисляет интерполяцию один раз для обычного числа.
Руководство: Значения и стилиadd
add(...inputs);Сумма чисел и значений.
Руководство: Значения и стилиsubtract
subtract(a, b);Разность двух входов.
Руководство: Значения и стилиmultiply
multiply(...inputs);Произведение чисел и значений.
Руководство: Значения и стилиdivide
divide(a, b);Частное двух входов.
Руководство: Значения и стилиmodulo
modulo(a, b);Значение, которое начинается заново по кругу, например для бесконечного вращения.
Руководство: Значения и стилиdiffClamp
diffClamp(input, min, max);Следует за изменениями входа, но остаётся в диапазоне; полезно для шапок, которые прячутся при прокрутке.
Руководство: Значения и стилиХуки React
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Владеет числом или числовой записью на всё время жизни компонента. В style это CSS-переменная.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Владеет значением и каждым контроллером, вводом и выводом, объявленным в его фабрике. Запускается, перезапускается при изменении зависимостей и убирает за собой.
Руководство: Значения и стилиuseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Владеет полным двумерным значением.
Руководство: Значения и стилиuseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringДаёт производному узлу, который не является выражением calc(), собственную CSS-переменную со временем жизни компонента.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Вызывает функцию при каждом изменении узла или ValueXY; удаляется при размонтировании.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })Возвращает { mounted, animatedValue } для появления и ухода на хуках.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Задаёт область CSS-переменных по умолчанию для значений хуков внутри.
Руководство: Значения и стилиflushAnimatedUpdates
flushAnimatedUpdates();Синхронно применяет ожидающий вывод — для детерминированных тестов.
Руководство: Значения и стилиДрайверы, композиция и таймлайны
timing
timing(value, { toValue, duration?, delay?, easing? })Двигает значение по кривой easing за фиксированное время.
Руководство: Timing, пружины и композицияspring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Двигает значение по физике пружины, сохраняя скорость прерванного движения.
Руководство: Timing, пружины и композицияdecay
decay(value, { velocity, deceleration? })Начинает с заданной скорости и замедляется.
Руководство: Timing, пружины и композицияdelay
delay(ms);Контроллер, который только ждёт.
Руководство: Timing, пружины и композицияsequence
sequence([a, b, c]);Выполняет контроллеры по очереди.
Руководство: Timing, пружины и композицияparallel
parallel([a, b], { stopTogether? }?)Выполняет контроллеры одновременно.
Руководство: Timing, пружины и композицияstagger
stagger(ms, [a, b, c]);Запускает контроллеры друг за другом с фиксированным интервалом.
Руководство: Timing, пружины и композицияloop
loop(animation, { iterations?, resetBeforeIteration? }?)Повторяет контроллер заданное число раз или бесконечно.
Руководство: Timing, пружины и композицияkeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Проводит значение через несколько чисел с необязательными временами и повторами.
Руководство: Timing, пружины и композицияEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)Кривые, совпадающие с React Native: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier и помощники in/out.
Руководство: Timing, пружины и композицияcreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)Перематываемые часы с именованными дорожками вне React.
Руководство: Timing, пружины и композицияuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)Таймлайн, принадлежащий компоненту, дорожки которого работают прямо в обычном style.
Руководство: Timing, пружины и композицияКомпоненты и раскладка
Animated
<Animated.div seed pose tempo respond depart move />;Пространство имён хостов HTML и SVG, таких как Animated.div, плюс основные функции под именами React Native.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Позволяет компоненту, пробрасывающему ref, принимать props хостов Animated.
Руководство: Компоненты AnimatedAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Передаёт имя позы, темп и настройки анимации по умолчанию элементам Animated внутри.
Руководство: Компоненты AnimatedAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Держит дочерние элементы с key смонтированными, пока не завершится их уход.
Руководство: Компоненты AnimatedAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Анимирует изменения раскладки элементов move и связывает элементы с одинаковой идентичностью.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }Та же координация раскладки захватом и фиксацией для других рендереров.
Руководство: Компоненты AnimateduseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Перестановка управляемого списка вдоль одной оси указателем и клавиатурой.
Руководство: Компоненты AnimatedВвод и соединения
input
input(targetRef, adapter, onEvent?)Подключает адаптер ввода к элементу как принадлежащий контроллер.
Руководство: Ввод и жестыfollow
follow(target, source, { stiffness?, damping?, mass? }?)Заставляет одно значение пружинисто следовать за другим.
Руководство: Ввод и жестыconnect
connect(node, (value) => write(value));Передаёт каждое изменение узла в функцию.
Руководство: Ввод и жестыevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Сопоставляет вложенные данные событий со значениями, как в React Native.
Руководство: Ввод и жестыdragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Перетаскивание указателем и клавиатурой с границами, упругими краями, инерцией и settle.
Руководство: Ввод и жестыpinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Масштаб и поворот из жеста двумя указателями.
Руководство: Ввод и жестыmoveInput
moveInput({ x?, y?, relative?, reset? })Координаты указателя, при желании относительно центра элемента.
Руководство: Ввод и жестыscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Позиция и прогресс прокрутки элемента, страницы или элемента, проходящего через область просмотра.
Руководство: Ввод и жестыwheelInput
wheelInput({ x?, y? })Смещения колеса мыши.
Руководство: Ввод и жестыviewportInput
viewportInput({ root?, margin?, amount?, once? })Находится ли элемент в области просмотра.
Руководство: Ввод и жестыmediaInput
mediaInput('(min-width: 768px)');Соответствует ли медиазапрос.
Руководство: Ввод и жестыlongPressInput
longPressInput({ delay?, threshold? })Указатель, удерживаемый дольше задержки и в пределах порога движения.
Руководство: Ввод и жестыswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Направление, расстояние и скорость свайпа.
Руководство: Ввод и жестыВывод и диагностика
bind
bind(element, style) → { update, inspect, dispose }Привязывает стили Animated к элементу вне React; возвращает update, inspect и dispose.
inspect
inspect(element) → [{ property, driver, reason }]Путь воспроизведения и причина fallback для каждого анимируемого свойства элемента.
Руководство: Производительность и воспроизведениеoutput
output(targetRef, { style?, attributes?, properties?, text? })Владеет выводом в стиль, атрибут, текст или свойство внутри useAnimated.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Сразу подключает сопоставление вывода; возвращает flush и dispose.