React Native에서 애니메이션의 작동을 설명하시겠습니까?

<시간/>

React Native는 사용 가능한 구성 요소에 더 많은 상호 작용을 추가하는 데 도움이 되는 애니메이션 구성 요소를 제공합니다. 애니메이션 구성 요소는 View, Text, Image, ScrollView, FlatList 및 SectionList에 애니메이션을 적용하는 데 사용할 수 있습니다.

React Native는 두 가지 유형의 애니메이션을 제공합니다 -

애니메이션 API
레이아웃 애니메이션

애니메이션 API

애니메이션 API는 입/출력을 기반으로 시간 기반 애니메이션을 제공하는 데 도움이 됩니다. 이 예에서는 애니메이션 타이밍 API를 사용하여 상자의 너비와 높이를 동적으로 변경합니다.

애니메이션으로 작업하려면 아래와 같이 구성 요소를 가져옵니다. -

import { Animated } from 'react-native'

애니메이션으로 작업하려면 먼저 아래와 같이 구성해야 합니다. -

Animated.timing() 함수는 여유 함수를 사용하고 주어진 값은 시간에 애니메이션화됩니다. 사용되는 기본 여유 함수는 easyInOut이며, 다른 것을 사용하거나 직접 정의할 수 있습니다.

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 구성 요소는 애니메이션을 수행할 Animated.timing 기능이 있는 this.animatedBox 함수가 호출되는 Press에서 사용됩니다. 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 (
      <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
   }
})