Value
new Value(initial: number)Un nombre modifiable avec setValue, setOffset, flattenOffset, extractOffset, stopAnimation et resetAnimation.
Référence de l’API
Chaque export de @kkwaenggwari/animated, avec sa signature et le guide qui l’explique.
Valeurs et graphes
ValueXY
new ValueXY({ x?, y? })Des valeurs x et y appariées avec les mêmes opérations, plus getLayout et getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Créer un nombre ou un enregistrement numérique nommé en dehors de React. La création ne déclenche rien.
Guide: Valeurs et styleAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)La base en lecture seule de toute valeur et de tout graphe : getValue, interpolate et les listeners.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })Une correspondance vivante entre plages d’entrée et de sortie, avec easing et une extrapolation extend, clamp ou identity.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);Un calcul pur en lecture seule sur une ou plusieurs entrées. Les sorties qui l’utilisent s’exécutent en JavaScript.
Guide: Valeurs et styleinterpolateFn
interpolateFn({ value, inputRange, outputRange });Évaluer une interpolation une fois pour un nombre simple.
Guide: Valeurs et styleadd
add(...inputs);La somme de nombres et de valeurs.
Guide: Valeurs et stylesubtract
subtract(a, b);La différence de deux entrées.
Guide: Valeurs et stylemultiply
multiply(...inputs);Le produit de nombres et de valeurs.
Guide: Valeurs et styledivide
divide(a, b);Le quotient de deux entrées.
Guide: Valeurs et stylemodulo
modulo(a, b);Une valeur qui boucle, par exemple pour une rotation sans fin.
Guide: Valeurs et stylediffClamp
diffClamp(input, min, max);Suit les changements de l’entrée tout en restant dans une plage ; utile pour les en-têtes qui se masquent au défilement.
Guide: Valeurs et styleHooks React
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Gérer un nombre ou un enregistrement numérique pendant la vie du composant. Dans style, c’est une variable CSS.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Gérer une valeur et chaque contrôleur, entrée et sortie déclarés dans sa factory. Démarre, redémarre quand les dépendances changent et nettoie.
Guide: Valeurs et styleuseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Gérer une valeur bidimensionnelle complète.
Guide: Valeurs et styleuseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringDonner à un nœud dérivé qui n’est pas une expression calc() sa propre variable CSS, avec la durée de vie du composant.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Appeler une fonction à chaque changement d’un nœud ou d’un ValueXY ; retiré au démontage.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })Renvoyer { mounted, animatedValue } pour des entrées et sorties basées sur un hook.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Définir un scope de variables CSS par défaut pour les valeurs de hook en dessous.
Guide: Valeurs et styleflushAnimatedUpdates
flushAnimatedUpdates();Appliquer la sortie en attente de façon synchrone, pour des tests déterministes.
Guide: Valeurs et styleDrivers, composition et timelines
timing
timing(value, { toValue, duration?, delay?, easing? })Déplacer une valeur le long d’une courbe d’easing pendant une durée fixe.
Guide: Timing, ressorts et compositionspring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Déplacer une valeur avec une physique de ressort, en gardant la vitesse d’un mouvement interrompu.
Guide: Timing, ressorts et compositiondecay
decay(value, { velocity, deceleration? })Démarrer avec une vitesse et ralentir.
Guide: Timing, ressorts et compositiondelay
delay(ms);Un contrôleur qui ne fait qu’attendre.
Guide: Timing, ressorts et compositionsequence
sequence([a, b, c]);Exécuter des contrôleurs l’un après l’autre.
Guide: Timing, ressorts et compositionparallel
parallel([a, b], { stopTogether? }?)Exécuter des contrôleurs ensemble.
Guide: Timing, ressorts et compositionstagger
stagger(ms, [a, b, c]);Démarrer des contrôleurs l’un après l’autre à intervalle fixe.
Guide: Timing, ressorts et compositionloop
loop(animation, { iterations?, resetBeforeIteration? }?)Répéter un contrôleur un certain nombre de fois ou indéfiniment.
Guide: Timing, ressorts et compositionkeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Faire passer une valeur par plusieurs nombres, avec instants et répétitions facultatifs.
Guide: Timing, ressorts et compositionEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)Des courbes identiques à React Native : linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier et les aides in/out.
Guide: Timing, ressorts et compositioncreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)Une horloge positionnable avec des pistes nommées, en dehors de React.
Guide: Timing, ressorts et compositionuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)Une timeline qui appartient au composant, dont les pistes fonctionnent directement dans un style ordinaire.
Guide: Timing, ressorts et compositionComposants et mise en page
Animated
<Animated.div seed pose tempo respond depart move />;L’espace de noms des hôtes HTML et SVG comme Animated.div, plus les fonctions de base sous leurs noms React Native.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Faire accepter les props des hôtes Animated à un composant qui transmet sa ref.
Guide: Composants AnimatedAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Partager un nom de pose, un tempo et des valeurs d’animation par défaut avec les éléments Animated à l’intérieur.
Guide: Composants AnimatedAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Garder montés les enfants avec key jusqu’à la fin de leur sortie.
Guide: Composants AnimatedAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Animer les changements de mise en page des éléments move et relier les éléments de même identité.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }La même coordination de mise en page par capture et validation, pour d’autres moteurs de rendu.
Guide: Composants AnimateduseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Réordonner au pointeur et au clavier une liste contrôlée, sur un axe.
Guide: Composants AnimatedEntrées et connexions
input
input(targetRef, adapter, onEvent?)Attacher un adaptateur d’entrée à un élément comme contrôleur géré.
Guide: Entrées et gestesfollow
follow(target, source, { stiffness?, damping?, mass? }?)Faire suivre une valeur par une autre avec un ressort.
Guide: Entrées et gestesconnect
connect(node, (value) => write(value));Envoyer chaque changement d’un nœud à une fonction.
Guide: Entrées et gestesevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Associer des données d’événement imbriquées à des valeurs, comme dans React Native.
Guide: Entrées et gestesdragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Glisser au pointeur et au clavier, avec limites, bords élastiques, élan et settle.
Guide: Entrées et gestespinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Échelle et rotation d’un geste à deux pointeurs.
Guide: Entrées et gestesmoveInput
moveInput({ x?, y?, relative?, reset? })Coordonnées du pointeur, éventuellement relatives au centre de l’élément.
Guide: Entrées et gestesscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Position et progression du défilement d’un élément, de la page, ou d’un élément qui traverse le viewport.
Guide: Entrées et gesteswheelInput
wheelInput({ x?, y? })Déplacements de la molette.
Guide: Entrées et gestesviewportInput
viewportInput({ root?, margin?, amount?, once? })Indique si l’élément est dans le viewport.
Guide: Entrées et gestesmediaInput
mediaInput('(min-width: 768px)');Indique si une media query correspond.
Guide: Entrées et gesteslongPressInput
longPressInput({ delay?, threshold? })Un pointeur maintenu après un délai et dans un seuil de mouvement.
Guide: Entrées et gestesswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Direction, distance et vitesse d’un balayage.
Guide: Entrées et gestesSortie et diagnostic
bind
bind(element, style) → { update, inspect, dispose }Lier des styles Animated à un élément en dehors de React ; renvoie update, inspect et dispose.
inspect
inspect(element) → [{ property, driver, reason }]Le chemin de lecture et la raison du repli pour chaque propriété animée d’un élément.
Guide: Performance et lectureoutput
output(targetRef, { style?, attributes?, properties?, text? })Gérer une sortie de style, d’attribut, de texte ou de propriété dans useAnimated.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Attacher immédiatement un mapping de sortie ; renvoie flush et dispose.