React Native में एनिमेशन के कार्य की व्याख्या

React Native एक Animation कंपोनेंट प्रदान करता है जो उपलब्ध कंपोनेंट्स में अधिक इंटरएक्टिविटी जोड़ने में मदद करता है। Animation कंपोनेंट का उपयोग View, Text, Image, ScrollView, FlatList और SectionList को एनिमेट करने के लिए किया जा सकता है।

React Native दो प्रकार के एनिमेशन प्रदान करता है:

• Animated API
• LayoutAnimation

Animated API

Animated API इनपुट/आउटपुट के आधार पर समय-आधारित एनिमेशन प्रदान करने में मदद करता है। इस उदाहरण में, हम एनिमेटेड टाइमिंग API का उपयोग करके बॉक्स की चौड़ाई और ऊंचाई को डायनामिक रूप से बदलेंगे।

एनिमेशन के साथ काम करने के लिए, नीचे दिखाए अनुसार कंपोनेंट इम्पोर्ट करें:

import { Animated } from 'react-native'

एनिमेशन के साथ काम करने के लिए, हमें पहले इसे कॉन्फ़िगर करना होगा जैसा कि नीचे दिखाया गया है:

Animated.timing() फ़ंक्शन ईज़िंग फ़ंक्शन्स का उपयोग करता है और दिया गया मान समय पर एनिमेट होता है। डिफ़ॉल्ट ईज़िंग फ़ंक्शन easeInOut है, आप एक अलग उपयोग कर सकते हैं या अपना खुद का परिभाषित कर सकते हैं।

Animated.timing() फ़ंक्शन की संरचना इस प्रकार है:

Animated.timing(animateparam, {
    toValue: 100,
    easing: easingfunc,
    duration: timeinseconds
}).start();

उदाहरण में हम View की चौड़ाई और ऊंचाई को एनिमेट करेंगे, इसलिए मैंने इसे पहले इनिशियलाइज़ किया है:

animatedWidth और animatedHeight को componentWillMount के अंदर निम्नानुसार इनिशियलाइज़ किया गया है:

componentWillMount = () => {
    this.animatedWidth = new Animated.Value(50)
    this.animatedHeight = new Animated.Value(100)
}

बाद में Animated.timing फ़ंक्शन जोड़ा गया:

Animated.timing(this.animatedWidth, {
    toValue: 200,
    duration: 1000
}).start()
Animated.timing(this.animatedHeight, {
    toValue: 500,
    duration: 500
}).start()

एनिमेशन

TouchableOpacity कंपोनेंट का उपयोग किया जाता है जिसके onPress पर फ़ंक्शन this.animatedBox कॉल किया जाता है जिसमें Animated.timing फ़ंक्शन होता है जो एनिमेशन करेगा। जब TouchableOpacity कंपोनेंट दबाया जाता है तो View की चौड़ाई और ऊंचाई बदल जाएगी।

उदाहरण

import React, { Component } from 'react'
import { View, StyleSheet, Animated, TouchableOpacity } from 'react-native'
class Animations extends Component {
    componentWillMount = () => {
        this.animatedWidth = new Animated.Value(50)
        this.animatedHeight = new Animated.Value(100)
    }
    animatedBox = () => {
        Animated.timing(this.animatedWidth, {
            toValue: 200,
            duration: 1000
        }).start()
        Animated.timing(this.animatedHeight, {
            toValue: 500,
            duration: 500
        }).start()
    }
    render() {
        const animatedStyle = { width: this.animatedWidth, height: this.animatedHeight }
        return (
            
                
            
        )
    }
}
export default Animations
const styles = StyleSheet.create({
    container: {
        padding:100,
        justifyContent: 'center',
        alignItems: 'center'
    },
    box: {
        backgroundColor: 'gray',
        width: 50,
        height: 100
    }
})

आउटपुट

आईओएस और एंड्रॉइड डिवाइस पर व्यू निम्नलिखित है:

ग्रे आयताकार बॉक्स को छूकर इसे एनिमेट होते देखें:

LayoutAnimation API

LayoutAnimation, Animated API की तुलना में आपको अधिक नियंत्रण देता है और आपको अगले रेंडर/लेआउट चक्र के लिए व्यूज में उपयोग किए जाने वाले क्रिएट और अपडेट एनिमेशन को वैश्विक रूप से कॉन्फ़िगर करने की अनुमति देता है।

Layout Animation API के साथ काम करने के लिए आपको इसे निम्नानुसार इम्पोर्ट करना होगा:

import { LayoutAnimation } from 'react-native';:

उदाहरण: LayoutAnimation का उपयोग

Android में LayoutAnimation के काम करने के लिए आपको निम्नलिखित लाइनें जोड़नी होंगी:

UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
import React from 'react';
import {
    NativeModules,
    LayoutAnimation,
    Text,
    TouchableOpacity,
    StyleSheet,
    View,
} from 'react-native';
const { UIManager } = NativeModules;
UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
export default class App extends React.Component {
    state = {
        w: 50,
        h: 50,
    };
    animatecircle = () => {
        LayoutAnimation.spring();
        this.setState({w: this.state.w + 10, h: this.state.h + 10})
    }
    render() {
        return (
            
                
            
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    circle: {
        width: 200,
        height: 200,
        borderRadius: '50%',
        backgroundColor: 'green',
    },
});

आउटपुट

सर्कल पर टैप करें और इसे एनिमेट होते देखें।