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.