React Native의 Animated 사용하기

React Native에서 애니메이션 효과를 구현하기 위해서는 Animated를 사용한다.

사각형의 View가 이동하는 애니메이션을 만들었다.

import React from 'react';
import {
  Animated,
  SafeAreaView,
  View,
  Text,
  StyleSheet,
  Button,
} from 'react-native';

function AnimatedTest() {
  const viewSize = new Animated.ValueXY(0, 0);
  const handleAnimated = () => {
    Animated.spring(viewSize, {
      toValue: {x: 150, y: 350},
      useNativeDriver: false,
    }).start();
  };
  return (
    <SafeAreaView>
      <Animated.View style={viewSize.getLayout()}>
        <View style={styles.redView}>
          <Text>View</Text>
        </View>
      </Animated.View>
      <Button title="start" onPress={handleAnimated} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  redView: {width: 100, height: 100, backgroundColor: 'red'},
});

export default AnimatedTest;

사각형이 이동하는 애니메이션이 일어난 뒤에 글자의 크기가 커지는 애니메이션이 실행된다.

import React, {useRef} from 'react';
import {
  Animated,
  SafeAreaView,
  View,
  Text,
  StyleSheet,
  Button,
} from 'react-native';

function AnimatedTest() {
  const viewSize = new Animated.ValueXY(0, 0);
  const textSize = useRef(new Animated.Value(30)).current;
  const handleAnimated = () => {
    Animated.sequence([
      Animated.timing(viewSize, {
        toValue: {x: 150, y: 350},
        duration: 1000,
        delay: 1000,
        useNativeDriver: false,
      }),
      Animated.timing(textSize, {
        toValue: 40,
        useNativeDriver: false,
      }),
    ]).start();
  };
  return (
    <SafeAreaView>
      <Animated.View style={viewSize.getLayout()}>
        <View style={styles.redView}>
          <Text>View</Text>
        </View>
      </Animated.View>
      <Animated.Text style={[styles.blueText, {fontSize: textSize}]}>
        <Text>Text</Text>
      </Animated.Text>
      <Button title="start" onPress={handleAnimated} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  redView: {width: 100, height: 100, backgroundColor: 'red'},
  blueText: {color: 'blue'},
});

export default AnimatedTest;

사각형이 커지는 애니메이션과 동시에 글자의 크기가 커지는 애니메이션이 실행된다.

import React, {useRef} from 'react';
import {
  Animated,
  SafeAreaView,
  View,
  Text,
  StyleSheet,
  Button,
} from 'react-native';

function AnimatedTest() {
  const viewSize = new Animated.ValueXY(0, 0);
  const textSize = useRef(new Animated.Value(30)).current;
  const handleAnimated = () => {
    Animated.parallel([
      Animated.timing(viewSize, {
        toValue: {x: 150, y: 350},
        duration: 1000,
        delay: 100,
        useNativeDriver: false,
      }),
      Animated.timing(textSize, {
        toValue: 40,
        useNativeDriver: false,
      }),
    ]).start();
  };
  return (
    <SafeAreaView>
      <Animated.View style={viewSize.getLayout()}>
        <View style={styles.redView}>
          <Text>View</Text>
        </View>
      </Animated.View>
      <Animated.Text style={[styles.blueText, {fontSize: textSize}]}>
        <Text>Text</Text>
      </Animated.Text>
      <Button title="start" onPress={handleAnimated} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  redView: {width: 100, height: 100, backgroundColor: 'red'},
  blueText: {color: 'blue'},
});

export default AnimatedTest;

여러개의 애니메이션 효과가 순차적으로 발생하게 하기 위해서는 sequence, 동시에 발생하게 하기 위해서는 parallel을 사용한다.

Animated.sequence(
  Animated.timing(fadeAnim, {
    toValue: 1,
    duration: 1000,
    useNativeDriver: false,
  },
  Animated.timing(fadeAnim, {
    toValue: 0,
    duration: 1000,
    useNativeDriver: false,
  },
  Animated.timing(fadeAnim, {
    toValue: 1,
    duration: 1000,
    useNativeDriver: false,
  }
).start();

위에서는 순차적으로 보여졌다, 사라졌다 다시 보여지게 된다.

 

또 다른 예제로 timing을 사용하여 버튼을 누르고 잠시 뒤, 위에서 글자가 나오는 컴포넌트이다.

opacity등의 일부 style 속성은 native 드라이버를 사용할 수 있으나 margin, padding, top, left, right, bottom등의 style 속성은 native 드라이버 속성을 사용하면 에러가 발생한다.

import React, {useRef} from 'react';
import {Animated, StyleSheet, Text, View, Button} from 'react-native';

function SampleAnimated() {
  const target = useRef(new Animated.Value(-50)).current;
  const showDown = () => {
    Animated.timing(target, {
      toValue: -10,
      duration: 1000,
      useNativeDriver: false,
    }).start();
  };

  return (
    <View style={styles.sampleContainer}>
      <Animated.View style={{top: target}}>
        <Text style={styles.sampleText}>Sample Animated</Text>
      </Animated.View>
      <Button title="showing" onPress={showDown} />
    </View>
  );
}

const styles = StyleSheet.create({
  sampleContainer: {
    marginTop: 30,
  },
  sampleText: {
    fontWeight: 'bold',
    color: '#000',
    textAlign: 'center',
  },
});

export default SampleAnimated;

https://reactnative.dev/docs/animated

Animated · React Native