Animation de SVGs dans React Native : Guide complet

L’animation de graphiques vectoriels évolutifs (SVG) dans React Native offre un moyen puissant de créer des interfaces utilisateur attrayantes et performantes. Contrairement aux images matricielles, les SVG conservent leur netteté à toutes les échelles, ce qui les rend idéaux pour les animations qui ne deviendront pas floues ou pixélisées. Ce guide montre comment exploiter l’API `Animated` de React Native pour animer facilement vos SVG.

Table des matières

• Animation de SVG avec l’API Animated de React Native
• Animation de différents attributs SVG
• Techniques d’animation avancées
• Conclusion

Animation de SVG avec l’API Animated de React Native

L’API `Animated` de React Native offre une solution flexible et efficace pour créer des animations. Elle fonctionne en manipulant des valeurs « animables » qui contrôlent les propriétés de vos composants SVG. Commençons par configurer votre projet.

Tout d’abord, installez le package nécessaire :

expo install react-native-svg

ou en utilisant yarn :

yarn add react-native-svg

Maintenant, créons une animation simple d’un carré en rotation :

import React, { useRef, useEffect } from 'react';
import { Animated, StyleSheet } from 'react-native';
import Svg, { Rect } from 'react-native-svg';

const AnimatedSquare = () => {
  const spinValue = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.loop(
      Animated.timing(spinValue, {
        toValue: 1,
        duration: 2000,
        useNativeDriver: true,
      })
    ).start();
  }, [spinValue]);

  const spin = spinValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg'],
  });

  return (
    
      
        
      
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default AnimatedSquare;

Ce code crée un carré rouge qui tourne continuellement. L’indicateur `useNativeDriver: true` est crucial pour les performances, déchargeant l’animation sur le thread natif.

Animation de différents attributs SVG

Vous pouvez animer divers attributs SVG au-delà de la rotation. Par exemple, animons la couleur de remplissage du carré :

import React, { useRef, useEffect } from 'react';
import { Animated, StyleSheet } from 'react-native';
import Svg, { Rect } from 'react-native-svg';

const AnimatedSquare = () => {
  const colorValue = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.loop(
      Animated.timing(colorValue, {
        toValue: 1,
        duration: 2000,
        useNativeDriver: true,
      })
    ).start();
  }, [colorValue]);

  const fillColor = colorValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['red', 'blue'],
  });

  return (
    
      
        
      
    
  );
};

// ... les styles restent les mêmes

Ce code effectue une transition en douceur de la couleur de remplissage du carré entre le rouge et le bleu.

Techniques d’animation avancées

Explorez des animations plus complexes à l’aide de `Animated.spring`, `Animated.decay` et d’autres types d’animation au sein de l’API `Animated`. Combinez plusieurs animations pour des effets complexes. Expérimentez avec les fonctions d’easing pour affiner la fluidité et le timing de l’animation.

Conclusion

L’animation de SVG dans React Native avec l’API `Animated` est une méthode simple mais puissante pour améliorer l’attrait visuel de votre application. N’oubliez pas d’utiliser `useNativeDriver: true` pour des performances optimisées. En expérimentant différents types d’animation et attributs SVG, vous pouvez créer un large éventail d’animations visuellement attrayantes et performantes.