React Native Animated - 애니메이션 value 를 수정하기 위해 사용하는 것들. 예제 포함

 

이전글 

2023.01.31 - [개발로그/ReactNative] - react native Animated 를 사용할때 알아야할 절대 Rules!

 

ReactNative Animatied

제공받을 수 있는 3가지 애니메이션

 

Animated.decay() # 초기 설정된 속도로 시작해서 점점 느려지고 멈춘다.
Animated.spring() # 물리모델을 지원한다.
Animated.timing() # 대부분의 경우 타이밍을 사용한다.

Animatied.timing()

import React from "react";
import { Animated, StyleSheet, TouchableOpacity } from "react-native";

const Container = styled.View``;

const Box = styled.View``;
const AnimatedBox = Animated.createAnimatedComponent(Box);

export default function App() {
  const Y = Animated.Value(0);
  const moveUp = () => {
    Animated.timing(Y, { ToValue: -200, useNativeDriver: true }).start();
  };

  // Y는 애니메이션이 되는동안에도 0으로 찍힌다. 컴포넌트에서 렌더링되는것이 아니라 컴포넌트상에서 찍는 Y로그는 항상 0이다.
  console.log(Y);
  // useNativeDriver(true)설정으로 인해, Native 영역에서 animate가 진행되기 때문이다.
  // Native에서 변경되는 Y값의 변화를 보려면 아래와 같이 리스너를 등록한다.
  // Y.addListener(()=> console.log(Y))
  return (
    <Container style={styles.container}>
      <TouchableOpacity onPress={moveUp}>
        <AnimatedBox style={{ transform: [{ translateY: Y }] }} />
      </TouchableOpacity>
    </Container>
  );
}

사용할 수 있는 설정값들,

duration: Length of animation (milliseconds). Default 500.
easing: Easing function to define curve. Default is Easing.inOut(Easing.ease).
delay: Start the animation after delay (milliseconds). Default 0.
isInteraction: Whether or not this animation creates an "interaction handle" on the InteractionManager. Default true.
useNativeDriver: Uses the native driver when true. Required.

자주쓰는 설정 값들, 

duration: How long should be, 얼마나 오래 갈거냐, 기본 500(0.5초)

easing: '자연스럽게'혹은 '부드럽게'하다, easing in : 서서히 나타남, easing out : 서서히 사라짐

delay: 얼만큼 지연시키고 실행할건가?  기본 0

useNativeDriver: NativeDriver를 사용해서 애니매이션을 Native 영역에서 실행시킬 것이냐

언제 native driver를 쓰면 animation에 대한 모든 것을 애니메이션이 시작하기 전에 native 영역으로 보낸다. 모든 애니메이션이 native에서 실행되므로, 애니메이션을 하는 과정에서는 bridge를 사용하지 않는다.(react native에서 하는 일이 적어짐)

Animatied.spring()

import React from "react";
import { Animated, StyleSheet, TouchableOpacity } from "react-native";

const Container = styled.View``;

const Box = styled.View``;
const AnimatedBox = Animated.createAnimatedComponent(Box);

export default function App() {
  const Y = Animated.Value(0);
  const moveUp = () => {
    Animated.spring(Y, {
      ToValue: -200,
      bounciness: 15,
      useNativeDriver: true,
    }).start();
  };

  Y.addListener(()=> console.log(Y))
  return (
    <Container style={styles.container}>
      <TouchableOpacity onPress={moveUp}>
        <AnimatedBox style={{ transform: [{ translateY: Y }] }} />
      </TouchableOpacity>
    </Container>
  );
}

friction: Controls "bounciness"/overshoot. Default 7.
tension: Controls speed. Default 40.
speed: Controls speed of the animation. Default 12.
bounciness: Controls bounciness. Default 8.

bounciness + speed / tension + friction(마찰) 조합가능

 

애니메이션 사용하는 방법 요약 

 

Animated.decay(사용할 변수, {설정값}).start()

const moveUp = () => {
    Animated.spring(Y, {
      ToValue: -200,
      bounciness: 15,
      useNativeDriver: true,
    }).start();
  };

다음글

2023.02.01 - [개발로그/ReactNative] - 에러가 있는 코드로부터 배운다. React Native Animated 에서의 Value 수정하기(useRef)