React Native में SVGs का एनिमेशन: एक व्यापक गाइड

React Native में स्केलेबल वेक्टर ग्राफिक्स (SVGs) को एनिमेट करना आकर्षक और उच्च-प्रदर्शन वाले यूजर इंटरफेस बनाने का एक शक्तिशाली तरीका प्रदान करता है। रेस्टर इमेज के विपरीत, SVGs किसी भी स्केल पर अपनी तीखापन बनाए रखते हैं, जिससे वे ऐसे एनिमेशन के लिए आदर्श होते हैं जो धुंधले या पिक्सेलेटेड नहीं होंगे। यह गाइड दिखाता है कि React Native के `Animated` API का उपयोग करके अपने SVGs को आसानी से कैसे एनिमेट किया जाए।

विषयसूची

• React Native के Animated API के साथ SVGs को एनिमेट करना
• विभिन्न SVG विशेषताओं को एनिमेट करना
• उन्नत एनिमेशन तकनीकें
• निष्कर्ष

React Native के Animated API के साथ SVGs को एनिमेट करना

React Native का `Animated` API एनिमेशन बनाने के लिए एक लचीला और कुशल समाधान प्रदान करता है। यह “एनिमेटेबल” मानों में हेरफेर करके काम करता है जो आपके SVG घटकों के गुणों को नियंत्रित करते हैं। आइए अपनी प्रोजेक्ट सेटअप से शुरू करते हैं।

सबसे पहले, आवश्यक पैकेज स्थापित करें:

expo install react-native-svg

या yarn का उपयोग करके:

yarn add react-native-svg

अब, आइए एक घूमते हुए वर्ग का एक साधारण एनिमेशन बनाते हैं:

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;

यह कोड एक लाल वर्ग बनाता है जो लगातार घूमता रहता है। `useNativeDriver: true` ध्वज प्रदर्शन के लिए महत्वपूर्ण है, एनिमेशन को मूल थ्रेड में भेजता है।

विभिन्न SVG विशेषताओं को एनिमेट करना

आप घुमाव से परे विभिन्न SVG विशेषताओं को एनिमेट कर सकते हैं। उदाहरण के लिए, आइए वर्ग के भरने के रंग को एनिमेट करें:

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 (
    
      
        
      
    
  );
};

// ... styles remain the same

यह कोड वर्ग के भरने के रंग को लाल और नीले रंग के बीच आसानी से बदल देता है।

उन्नत एनिमेशन तकनीकें

`Animated` API के भीतर `Animated.spring`, `Animated.decay`, और अन्य एनिमेशन प्रकारों का उपयोग करके अधिक जटिल एनिमेशन का पता लगाएं। जटिल प्रभावों के लिए कई एनिमेशन को मिलाएं। एनिमेशन की चिकनाई और समय को ठीक करने के लिए ईज़िंग फ़ंक्शंस के साथ प्रयोग करें।

निष्कर्ष

`Animated` API के साथ React Native में SVGs को एनिमेट करना आपके ऐप की दृश्य अपील को बढ़ाने का एक सरल लेकिन शक्तिशाली तरीका है। अनुकूलित प्रदर्शन के लिए `useNativeDriver: true` का उपयोग करना याद रखें। विभिन्न एनिमेशन प्रकारों और SVG विशेषताओं के साथ प्रयोग करके, आप विभिन्न प्रकार के दृश्यों को आकर्षक और उच्च-प्रदर्शन वाले एनिमेशन बना सकते हैं।