ReactNative - 쉽고 간단하게 애니메이션 뷰 구현

애니메이션 뷰는 정말 다양한 상황에

유용하게 쓰인다.

 

구현 방법 또한

상당히 간단해서 누구든 쉽게 구현할수있다.

 

import React, { ReactChild, useEffect, useState } from 'react';
import { Animated } from 'react-native';

export function FadeDownView({ duration, children }: { duration?: number; children: ReactChild }) {
  const value = new Animated.Value(0);

  useEffect(() => {
    Animated.timing(value, {
      toValue: 1,
      duration: duration || 500,
      useNativeDriver: true
    }).start();
  }, [])

  return (
    <Animated.View
      style={{
        opacity: value,
        transform: [{
          translateY: value.interpolate({
            inputRange: [0, 1],
            outputRange: [-24 , 0]
          })
        }]
      }}
    >
      { children }
    </Animated.View>
  )
}

export function FadeLeftView({ duration, children }: { duration?: number; children: ReactChild }) {
  const value = new Animated.Value(0);

  useEffect(() => {
    Animated.timing(value, {
      toValue: 1,
      duration: duration || 500,
      useNativeDriver: true
    }).start();
  }, [])

  return (
    <Animated.View
      style={{
        opacity: value,
        transform: [{
          translateX: value.interpolate({
            inputRange: [0, 1],
            outputRange: [-50 , 0]
          })
        }]
      }}
    >
      { children }
    </Animated.View>
  )
}

export function FadeRightView({ duration, children }: { duration?: number; children: ReactChild }) {
  const value = new Animated.Value(0);

  useEffect(() => {
    Animated.timing(value, {
      toValue: 1,
      duration: duration || 500,
      useNativeDriver: true
    }).start();
  }, [])

  return (
    <Animated.View
      style={{
        opacity: value,
        transform: [{
          translateX: value.interpolate({
            inputRange: [0, 1],
            outputRange: [50 , 0]
          })
        }]
      }}
    >
      { children }
    </Animated.View>
  )
}

export function FadeUpView({ duration, children }: { duration?: number; children: ReactChild }) {
  const value = new Animated.Value(0);

  useEffect(() => {
     Animated.timing(value, {
      toValue: 1,
      duration: duration || 500,
      useNativeDriver: true
    }).start();
  }, [])

  return (
    <Animated.View
      style={{
        opacity: value,
        transform: [{
          translateY: value.interpolate({
            inputRange: [0, 1],
            outputRange: [24 , 0]
          })
        }]
      }}
    >
      { children }
    </Animated.View>
  )
}

 

이런식으로 상,화,좌,우 Fade In 효과를 만들 수 있다.

사용한다면 아래와 같이 쓸수 있을것이다.

 

function SampleView() {
  const [fire, setFire] = useState(false);
  
  return (
    <View>
    <TouchableOpacity onPress={() => { setFire(true); }}>
      <Text>Fire!!!</Text>
    </TouchableOpacity>
    
    {
      !!fire &&
      <FadeDownView duration={300}>
        <Text>위에서 아래로</Text>
      </FadeDownView>
    }
    </View>
  )
}