React Native-এ অ্যানিমেশন (Animations) কাজ করার পদ্ধতি

React Native-এ অ্যানিমেশন যুক্ত করলে UI আরও ইন্টারেক্টিভ এবং স্মूद হয়। دوটি প্রধান অ্যানিমেশন সিস্টেম রয়েছে:

• Animated API - টাইম-ভিত্তিক, ডিক্লেয়ারেটিভ অ্যানিমেশন।
• LayoutAnimation - লেআউট চেঞ্জের время গ্লোবাল অ্যানিমেশন।

১. Animated API

Animated.timing(), Animated.spring(), Animated.parallel(), Animated.sequence() ইত্যাদি দিয়ে কমপ্লেক্স অ্যানিমেশন বানানো যায়।

ইম্পোর্ট

import { Animated } from 'react-native';

উদাহরণ: Width এবং Height অ্যানিমেট করা

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,
      useNativeDriver: false // নেটিভ ড্রাইভার বন্ধ (লেআউট প্রপের জন্য)
    }).start();

    Animated.timing(this.animatedHeight, {
      toValue: 500,
      duration: 500,
      useNativeDriver: false
    }).start();
  };

  render() {
    const animatedStyle = {
      width: this.animatedWidth,
      height: this.animatedHeight
    };

    return (
      
        
      
    );
  }
}

const styles = StyleSheet.create({
  container: { padding: 100, justifyContent: 'center', alignItems: 'center' },
  box: { backgroundColor: 'gray', width: 50, height: 100 }
});

export default Animations;

নোট: useNativeDriver: true ব্যবহার করলে পারফরম্যান্স ভালো হয়, কিন্তু শুধু নন-লেআউট প্রপertetি (transform, opacity) সাপোর্ট করে। width/height-এর জন্য false দিতে হয়।

২. LayoutAnimation API

স্টেট চেঞ্জের সাথে সাথে লেআউট চেঞ্জ অটোমেটিকলি অ্যানিমেট করে। খুব সহজ এবং পাওয়ারফুল।

ইম্পোর্ট

import { LayoutAnimation, UIManager } from 'react-native';

Android-এ সক্রিয় করা (একবারই)

UIManager.setLayoutAnimationEnabledExperimental &&
  UIManager.setLayoutAnimationEnabledExperimental(true);

উদাহরণ: স্প্রিং অ্যানিমেশন সহ সার্কেল বড় করা

import React from 'react';
import { NativeModules, LayoutAnimation, 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(); // বা LayoutAnimation.configureNext()
    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' }
});

তুলনা

সুপারিশ

• সিম্পল টগল, এক্সপ্যান্ড/কোল্যাপ্সের জন্য LayoutAnimation।
• কাস্টম পাথ, জেসচার-ভিত্তিক, কমপ্লেক্স সিকোয়েন্সের জন্য Animated API বা Reanimated 2/3 (লাইব্রেরি) ব্যবহার করুন।