রিঅ্যাক্ট নেটিভে অ্যানিমেশনের কাজ ব্যাখ্যা কর?

রিঅ্যাক্ট নেটিভ একটি অ্যানিমেশন কম্পোনেন্ট অফার করে যা উপলভ্য কম্পোনেন্টে আরও ইন্টারঅ্যাক্টিভিটি যোগ করতে সাহায্য করে। অ্যানিমেশন কম্পোনেন্টটি ভিউ, টেক্সট, ইমেজ, স্ক্রোলভিউ, ফ্ল্যাটলিস্ট এবং সেকশনলিস্ট অ্যানিমেট করতে ব্যবহার করা যেতে পারে।

রিঅ্যাক্ট নেটিভ দুই ধরনের অ্যানিমেশন প্রদান করে −

অ্যানিমেটেড API
লেআউট অ্যানিমেশন

অ্যানিমেটেড API

অ্যানিমেটেড এপিআই ইনপুট/আউটপুটের উপর ভিত্তি করে সময় ভিত্তিক অ্যানিমেশন সরবরাহ করতে সহায়তা করে। এই উদাহরণে, আমরা অ্যানিমেটেড টাইমিং এপিআই ব্যবহার করে বক্সের প্রস্থ এবং উচ্চতা পরিবর্তন করব।

অ্যানিমেশনের সাথে কাজ করার জন্য, নীচে দেখানো হিসাবে উপাদান আমদানি করুন −

import { Animated } from 'react-native'

অ্যানিমেশনের সাথে কাজ করার জন্য, আমাদের প্রথমে নীচে দেখানো হিসাবে এটি কনফিগার করতে হবে -

Animated.timing() ফাংশন ইজিং ফাংশন ব্যবহার করে এবং প্রদত্ত মান সময়মতো অ্যানিমেট করা হয়। ব্যবহৃত ডিফল্ট ইজিং ফাংশনটি হল easeInOut , আপনি একটি আলাদা ব্যবহার করতে পারেন বা আপনার নিজের সংজ্ঞায়িত করতে পারেন৷

Animated.timing() ফাংশনের গঠন নিম্নরূপ -

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

উদাহরণে আমরা ভিউ-এর প্রস্থ এবং উচ্চতা অ্যানিমেট করব, তাই আমি প্রথমে এটিকে শুরু করে দিয়েছি -

অ্যানিমেটেড প্রস্থ এবং অ্যানিমেটেড উচ্চতা কম্পোনেন্ট উইলমাউন্টের ভিতরে শুরু করা হয়েছে −

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

পরে অ্যানিমেটেড.টাইমিং ফাংশন যোগ করা হয়েছে -

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

অ্যানিমেশন

TouchableOpacity উপাদানটি প্রেসে ব্যবহার করা হয় যার functionthis.animatedBox বলা হয় যেটিতে Animated.timing ফাংশন রয়েছে যা অ্যানিমেশন সম্পাদন করবে। TouchableOpacity কম্পোনেন্ট টিপলে ভিউয়ের প্রস্থ এবং উচ্চতা পরিবর্তিত হবে।

উদাহরণ

'react-native'class অ্যানিমেশন থেকে 'react'import { View, StyleSheet, Animated, TouchableOpacity } থেকে

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 (
      <TouchableOpacity style = {styles.container} onPress =
         {this.animatedBox}>
      <Animated.View style = {[styles.box, animatedStyle]}/>
         </TouchableOpacity>
      )
   }
}
export default Animations
const styles = StyleSheet.create({
   container: {
      padding:100,
      justifyContent: 'center',
      alignItems: 'center'
   },
   box: {
      backgroundColor: 'gray',
      width: 50,
      height: 100
   }
})