Comment créer des applications natives React attrayantes avec des animations initiées par l'utilisateur

Les animations doivent se sentir vivantes. Vous pouvez créer une expérience utilisateur attrayante pour les animations React Native en les faisant répondre à l'interaction d'un utilisateur. Ces interactions peuvent provenir directement de l'utilisateur ou être déclenchées indirectement par certains changements.

Comprendre les événements tactiles et les gestes dans React Native

Les éléments React Native sont capables de répondre au toucher et aux gestes d'un utilisateur. Le répondeur de geste natif React peut détecter ces événements tactiles et ces gestes.

Le Gesture Responder équipe de nombreux composants de la bibliothèque React Native avec cette fonctionnalité, comme le Bouton et TouchableOpacité composants qui réagissent aux pressions ou aux tapotements.

Le Gesture Responder, cependant, n'équipe que des composants simples avec des gestes simples. Pour gérer et détecter des événements tactiles plus complexes, React Native utilise l'API PanResponder. Il vous permet de créer des reconnaissances de gestes personnalisées qui répondent à des interactions tactiles plus complexes, telles que le pincement, la rotation ou le glissement.

L'API PanResponder peut définir comment votre application répondra à ces gestes lors de leur réception en configurant des rappels pour l'un des événements tactiles spécifiques.

Déclencher des animations avec des événements tactiles

Les événements tactiles sont la forme d'interaction la plus courante qu'un utilisateur peut avoir avec une application mobile. Vous pouvez choisir de déclencher certaines animations en réponse à des événements tactiles spécifiques de l'utilisateur.

Avec API animée de React Native pour animer différents composants, vous pouvez détecter et utiliser des événements tactiles pour déclencher des animations en fonction des interactions de l'utilisateur.

Par exemple, vous pouvez utiliser l'API Animated pour animer l'opacité d'un TouchableOpacité lorsqu'il est pressé pour créer un effet de fondu entrant :

importer Réagir, { useState, useRef } depuis'réagir';
importer { Affichage, Opacité tactile, Animation } depuis'réagir natif';
constante BoutonAnimé = () => {
// Utilisez useRef pour accéder à Animated. Exemple de valeur
constante opacityValue = useRef(nouveau Animé. Valeur(1)).actuel;
constante handlePress = () => {
 Animated.timing (opacityValue, {
 évaluer: 0.5,
 durée: 500,
 utiliserNativeDriver: vrai,
 }).commencer();
 }
retour (

opacité: opacityValue }}>

 {/* Votre composant bouton */}
 </TouchableOpacity>
 </Animated.View>
 </View>
 );
}
exporterdéfaut BoutonAnimé ;

Dans cet exemple, le opacityValue est un exemple de Animé. Valeur qui représente l'opacité du bouton. Lorsque vous appuyez sur le bouton, le poignéePresse la fonction s'exécute, ce qui déclenche une animation à l'aide Timing.animé() pour animer l'opacité du bouton.

Déclencher des animations avec des changements d'état

Une autre approche que vous pouvez adopter consiste à déclencher des animations en fonction de certains changements d'état dans votre application. Vous pouvez utiliser l'API Animated pour déclencher des animations en réponse à de nombreux changements d'état, tels qu'un changement de position, de taille ou de contenu d'un composant.

Par exemple, vous pouvez utiliser le useState et utiliserEffet crochets pour déclencher une animation comme celle-ci :

importer Réagir, { useState, useEffect } depuis'réagir';
importer { Affichage, Animé, Bouton, Texte } depuis'réagir natif';
constante MonComposant = () => {
constante [fadeAnim, setFadeAnim] = useState(nouveau Animé. Valeur(0));
constante [texte, setText] = useState('Bonjour le monde');
 useEffet(() => {
// Utilisez le hook useEffect pour déclencher l'animation lorsque l'état 'text'
// changements
 startAnimation();
 }, [texte]);
constante startAnimation = () => {
 Timing.animé(
 fonduAnim,
 {
 évaluer: 1,
 durée: 1000,
 utiliserNativeDriver: vrai,
 }
 ).commencer();
 };
retour (

opacité: fadeAnim }}>
{texte}/Text>
 </Animated.View>
"Modifier le texte" onPress={() => setText('Nouveau texte')} />
 </View>
 );
};
exporterdéfaut MonComposant ;

Dans cet exemple, le utiliserEffet hook déclenchera l'animation chaque fois que la valeur d'état de texte changements. Le utiliserEffet hook prend une fonction de rappel comme premier argument, qu'il exécutera chaque fois que les dépendances spécifiées dans le deuxième argument (dans ce cas, [texte]) changement. À l'intérieur de utiliserEffet accrocher, startAnimation() s'exécute et déclenche l'animation de fondu.

Des animations dynamiques animeront votre application

L'intégration d'animations dynamiques dans votre application React Native améliore considérablement l'expérience utilisateur et rendra votre application plus interactive. Grâce à la puissance des événements tactiles, des gestes et du système de réponse gestuelle, vous pouvez créer des animations fluides et réactives.

De plus, en tirant parti de l'API Animated et en gérant les états d'animation avec des hooks tels que useState et useEffect, vous pouvez facilement déclencher des animations en fonction des changements d'état de votre application.