อธิบายการทำงานของแอนิเมชั่นใน React Native?

React Native นำเสนอองค์ประกอบแอนิเมชั่นที่ช่วยเพิ่มความสามารถในการโต้ตอบให้กับส่วนประกอบต่างๆ ที่มีอยู่ ส่วนประกอบแอนิเมชั่นสามารถใช้เพื่อทำให้มุมมอง, ข้อความ, รูปภาพ, ScrollView, FlatList และ SectionList เคลื่อนไหวได้

React Native มีแอนิเมชั่นสองประเภท -

API แบบเคลื่อนไหว
LayoutAnimation

API แบบเคลื่อนไหว

API แบบเคลื่อนไหวช่วยให้สร้างแอนิเมชั่นตามเวลาโดยอิงตามอินพุต/เอาต์พุต ในตัวอย่างนี้ เราจะเปลี่ยนความกว้างและความสูงของกล่องแบบไดนามิกโดยใช้ API จังหวะเวลาแบบเคลื่อนไหว

ในการทำงานกับแอนิเมชั่น ให้นำเข้าส่วนประกอบดังที่แสดงด้านล่าง −

import { Animated } from 'react-native'

ในการทำงานกับแอนิเมชั่น เราต้องกำหนดค่าก่อนดังที่แสดงด้านล่าง -

ฟังก์ชัน Animated.timing() ใช้ประโยชน์จากฟังก์ชันการค่อยๆ เปลี่ยนและค่าที่ระบุเป็นภาพเคลื่อนไหวตามเวลา ฟังก์ชันการค่อยๆ เปลี่ยนเริ่มต้นที่ใช้คือ easeInOut คุณสามารถใช้ฟังก์ชันอื่นหรือกำหนดของคุณเองได้

โครงสร้างของฟังก์ชัน Animated.timing() มีดังนี้ -

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

ในตัวอย่าง เราจะสร้างภาพเคลื่อนไหว width และ height ของ View ดังนั้นฉันจึงได้เริ่มต้นก่อนดังนี้ -

เริ่มต้นภาพเคลื่อนไหวความกว้างและความสูงภาพเคลื่อนไหวภายใน 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 ซึ่งเรียก functionthis.animatedBox ที่มีฟังก์ชัน Animated.timing ที่จะทำภาพเคลื่อนไหว ความกว้างและความสูงของมุมมองจะเปลี่ยนเมื่อกดคอมโพเนนต์ 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
   }
})