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);Следва промените на входа, но остава в диапазон; полезно за заглавни ленти, които се скриват при превъртане.
Ръководство: Стойности и стилHooks на React
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Притежава число или числов запис през целия живот на компонента. В style това е CSS променлива.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Притежава стойност и всеки контролер, вход и изход, деклариран в нейната factory. Стартира, рестартира при промяна на зависимости и почиства.
Ръководство: Стойности и стил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 } за влизане и излизане чрез hook.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Задава scope на CSS променливите по подразбиране за стойностите на hooks под него.
Ръководство: Стойности и стил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 }Същата координация на оформлението чрез заснемане и commit за други рендерери.
Ръководство: Компоненти на 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)');Дали media query съвпада.
Ръководство: Вход и жестове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.