Animated

Animated

• animation에 대한 라이브러리
• 주요한 workflow는 Animated.Value를 만드는 것에 있음. 그것을 다른 animated요소들과 엮고, Animated.timing()으로 애니메이팅을 시키는 것에 있음

Usage

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

const App = () => {
  // fadeAnim will be used as the value for opacity. Initial Value: 0
  const fadeAnim = useRef(new Animated.Value(0)).current;

  const fadeIn = () => {
    // Will change fadeAnim value to 1 in 5 seconds
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 5000,
      useNativeDriver: true,
    }).start();
  };

  const fadeOut = () => {
    // Will change fadeAnim value to 0 in 3 seconds
    Animated.timing(fadeAnim, {
      toValue: 0,
      duration: 3000,
      useNativeDriver: true,
    }).start();
  };

  return (
    <SafeAreaView style={styles.container}>
      <Animated.View
        style={[
          styles.fadingContainer,
          {
            // Bind opacity to animated value
            opacity: fadeAnim,
          },
        ]}>
        <Text style={styles.fadingText}>Fading View!</Text>
      </Animated.View>
      <View style={styles.buttonRow}>
        <Button title="Fade In View" onPress={fadeIn} />
        <Button title="Fade Out View" onPress={fadeOut} />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  fadingContainer: {
    padding: 20,
    backgroundColor: 'powderblue',
  },
  fadingText: {
    fontSize: 28,
  },
  buttonRow: {
    flexBasis: 100,
    justifyContent: 'space-evenly',
    marginVertical: 16,
  },
});

export default App;

개요

• Animated와 쓸 수 있는 2가지 값은 2종류가 있다.

1. Animated.Value() : 단일 값
2. Animated.ValueXY() : 벡터

• 애니메이션 조정하기
  Animated는 3가지의 애니메이션 타입을 정의한다.

1. Animated.decay() : 초기 속도로 시작해서 점차 느려지다가 멈춘다.
2. Animated.spring()
3. Animated.timing() : easing function를 사용해서 animated value를 조절한다.

• Animatable Components

1. 에니메이션 적용가능한 컴포넌트들만 animated 할 수 있다.
2. createAnimatedComponent()는 컴포넌트를 Animatable하게 만드는데 쓰일 수 있다.

• 애니메이션 value 합치기

1. 더하기 빼기 곱하기 나누기 모듈화를 통해서 2개의 애니메이션 value를 가지고 1개의 새로운 애니메이션 value를 만들어낼 수 있다.

사용

1. Animated Value 생성

const AnimationRef = useRef(new Animated.Value(0)).current;

2. interpolate, Animated.View

• interpolate : value가 가지고 있는 값을 기준으로 새로운 값을 생성

const widthAnimation = AnimationRef.interpolate({
	inputRange : [0,10],
  	outputRange : ['0%', '100%']
});

// Animated 연결
<Animated.View style={{width : widthAnimation}}/>

3. Animated.timing을 이용해서 Animated Value의 값을 변경할 수 있음

Animated.timing(AnimationRef,{
	toValue : 0,	// 애니메이션의 목표, AnimationRef가 이 값으로 변화한다. ( 필수)
  	useNativeDriver : false, // 네이티브 드라이버 사용여부
  	duration : 1000,	// 애니메이션의 지속시간 (milli second)
  	delay : 0,	// 애니메이션 시작을 지연시킬 시간 (milli second)
  	isInteraction : true,	// 기본값(true), 애니메이션이 다른 애니메이션과 상호작용하는지 여부
  	easing : Easing.inOut(Easing.ease),		// 애니메이션 가속도 함수
}).start(()=>{
	// 애니메이션이 완료되었을 때 실행할 작업
});

실제 예시

import {View, Animated} from 'react-native';
import React, {useEffect, useRef} from 'react';

...
const refAnimation = useRef(new Animated.Value(-380)).current;

useEffect(()=>{
	Animated.timing(refAnimation, {
    	toValue : 0,
      	delay : 0,
      	duration : 7000,
      	useNativeDriver : true,
    }).start(()=>{
    	// 애니메이션이 끝났을 때의 동작 정의
    });
},
[refAnimation, navigation]);

const animatedStyle = {
	height : '100%',
  	backgroundColor : 'skyblue',
  	transform : [{translateX : refAnimation}],
}

(출처 : https://velog.io/@tata-v_vlelog/RN-Animated%EB%A1%9C-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0)

(출처 : RN 공식문서)