Environ 5 minutes · React 16.8+ · React DOM

Démarrer

De l’installation aux gestes et aux animations d’entrée et de sortie en six étapes. Chaque étape est un petit composant fonctionnel.

1
Installer
Animated n’a aucune dépendance à l’exécution. React 16.8+ est une dépendance peer.
Le point d’entrée du paquet est marqué 'use client'. Dans l’App Router de Next.js, un layout serveur peut rendre AnimatedProvider ; utilisez les hooks et Animated.<tag> dans des Client Components.
$
```
npm install @kkwaenggwari/animated
```
L’import @kkwaenggwari/animated est résolu dans votre éditeur.
Animer votre première valeur
useAnimatedValue(1) gère un nombre vivant pendant toute la vie du composant. Placez-le directement dans style : il devient une variable CSS, et React ne se rend pas pendant qu’il change.
timing(value, { toValue, duration }).start() l’anime. Appuyer de nouveau à mi-chemin repart de l’opacité actuelle.
Préparation de l’exemple…
La boîte s’estompe puis réapparaît, et un second appui à mi-chemin repart en sens inverse depuis sa position.
Dériver plusieurs sorties d’une valeur
interpolate associe la valeur à des longueurs, des angles ou des nombres. Sans easing, il devient un calc() exact de la même variable : cinq couloirs coûtent autant qu’un seul.
Différentes plages d’entrée sur la même valeur créent une cascade sans cinq animations séparées.
Préparation de l’exemple…
Un appui anime cinq couloirs en cascade ; modifier spread ne change que les plages.
Décrire une destination
Animated.button rend un button ordinaire. seed est la première image, pose l’endroit où il doit être maintenant, et tempo la façon d’y arriver.
Quand pose change en cours de trajet, l’élément tourne depuis sa position à l’écran, en gardant sa vitesse avec un ressort.
Préparation de l’exemple…
Cliquer rapidement sur les cartes ne fait jamais sauter aucune d’elles.
Brancher une entrée
input(ref, moveInput(...)) écrit les coordonnées du pointeur dans des valeurs. follow(target, source) fait suivre une valeur par une autre avec un ressort.
Tout ce qui est déclaré dans une factory useAnimated appartient au composant : listeners et ressorts s’arrêtent au démontage ou quand une dépendance change.
Préparation de l’exemple…
La carte s’incline vers le pointeur et se remet en place quand il s’en va.
Animer la sortie
Retirer un enfant React le supprime normalement d’un coup. Animated.Keep conserve les enfants avec key jusqu’à la fin de leur pose depart.
wait ne rend les nouveaux enfants qu’une fois toutes les sorties terminées.
Préparation de l’exemple…
Les messages fermés sortent avec le mouvement choisi avant de disparaître.

Vous avez tout le modèle

Valeurs, destinations, entrées et sorties partagent les mêmes contrôleurs, les mêmes règles d’interruption et le même nettoyage. Les guides détaillent chacun d’eux.

Installer

Animer votre première valeur

Dériver plusieurs sorties d’une valeur

Décrire une destination

Brancher une entrée

Animer la sortie

Vous avez tout le modèle