React Native - Animation

React Native

 

 

✅ 직접 구현해보는 Animation

---

import { useEffect, useState } from "react";
import styled from "styled-components/native";

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
`;

const Box = styled.TouchableOpacity`
  background-color: tomato;
  width: 200px;
  height: 200px;
`;

export default function App() {
  const [y, setY] = useState(0);
  const [intervalId, setIntervalId] = useState(null);
  const moveUp = () => {
    const id = setInterval(() => setY((prev) => prev + 1), 10);
    setIntervalId(id);
  };
  useEffect(() => {
    if (y === 200) {
      clearInterval(intervalId);
    }
  }, [y, intervalId]);
  console.log("rendering");
  return (
    <Container>
      <Box onPress={moveUp} style={{ transform: [{ translateY: y }] }} />
    </Container>
  );
}

 

긴 코드와 애니메이션이 이루어질 때마다 렌더링을 하는 퍼포먼스 문제가 있다.

이를 해결하기 위해 React Native의 Animated를 사용한다.

 

 

✅ Animated

---

https://reactnative.dev/docs/animated

Animated · React Native

 

1. animation을 위한 value가 필요하다면 state나 다른 변수를 사용하지 않고 new Animated.Value()를 사용해야 한다.

const Y = new Animated.Value(0);

 

2. 절대 value를 직접 변경하지 않는다. (밑 3가지를 사용하여 변경한다.)

Animated.decay() starts with an initial velocity and gradually slows to a stop.
Animated.spring() provides a basic spring physics model.
Animated.timing() animates a value over time using easing functions.

 

3. 오직 Animatable Components에만 animation을 줄 수 있다. (아무거에나 즉시 animation을 줄 수 없다.)

ex)

Animated.Image
Animated.ScrollView
Animated.Text
Animated.View
Animated.FlatList
Animated.SectionList

 

animation을 주고 싶은 components가 위에 해당하지 않는다면 createAnimatedComponent()를 사용해서 animated components로 변경한다.

 

<option 1>

const Box = styled(Animated.createAnimatedComponent(TouchableOpacity))`
  background-color: tomato;
  width: 200px;
  height: 200px;
`;

단점: TouchableOpacity를 import 해야 한다.

 

<option 2>

const Box = styled.TouchableOpacity`
  background-color: tomato;
  width: 200px;
  height: 200px;
`;

const AnimatedBox = Animated.createAnimatedComponent(Box);

 

Usage

export default function App() {
  const [up, setUp] = useState(false);
  const Y_POSITION = useRef(new Animated.Value(300)).current;
  const toggleUp = () => setUp((prev) => !prev);
  const moveUp = () => {
    Animated.timing(Y_POSITION, {
      toValue: up ? 300 : -300,
      useNativeDriver: true,
      easing: Easing.cubic,
    }).start(toggleUp);
  };
  const opacity = Y_POSITION.interpolate({
    inputRange: [-300, 0, 300],
    outputRange: [1, 0, 1],
  });
  Y_POSITION.addListener(() => console.log(opacity));
  return (
    <Container>
      <AnimatedBox
        onPress={moveUp}
        style={{ opacity, transform: [{ translateY: Y_POSITION }] }}
      />
    </Container>
  );
}

 

extrapolate

interpolate의 inputRange가 범위를 초과했을 때 어떻게 처리할 지 명시할 수 있는 속성

  const rotation = position.interpolate({
    inputRange: [-windowWidth / 3, windowWidth / 3],
    outputRange: ["-15deg", "15deg"],
    extrapolate: "extend",
  });

extend(default): 범위가 넘어가도 같은 비율로 계속 계산

clamp: 범위가 넘어가면 끝값으로 고정

identity: input값을 그대로 output으로 반환

 

getTranslateTransform()

translateY: position.y 혹은 translateX: position.x 이렇게 쓸 필요 없이 getTranslateTransform()으로 값을 가져올 수 있다.

(translate 값을 배열로 반환)

    <Container>
      <AnimatedBox
        onPress={moveUp}
        style={{
          transform: [
            ...position.getTranslateTransform(),
            { rotate: rotation },
          ],
          borderRadius,
          backgroundColor,
        }}
      />
    </Container>

 

 

✅ PanResponder

---

https://reactnative.dev/docs/panresponder

PanResponder · React Native

 

 

onStartShouldSetPanResponder

이 속성은 함수를 받으며, 해당 함수가 true 여부에 따라 View가 touch를 감지할 지 결정해준다.

  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
    }),
  ).current;

 

onPanResponderMove

움직임이 감지되었을 때 동작을 설정할 수 있는 속성

(콜백 함수의 인자로 evt, gestureState를 받는다)

  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: (_, { dx, dy }) => {
        position.setValue({
          x: dx,
          y: dy,
        });
      },
    }),
  ).current;

 

onPanResponderRelease

움직임이 끝났을 때 동작을 설정할 수 있는 속성

const panResponder = useRef(
PanResponder.create({
  onStartShouldSetPanResponder: () => true,
  onPanResponderMove: (_, { dx, dy }) => {
    position.setValue({
      x: dx,
      y: dy,
    });
  },
  onPanResponderRelease: () => {
    Animated.spring(position, {
      toValue: {
        x: 0,
        y: 0,
      },
      useNativeDriver: true,
    }).start();
  },
}),
).current;

 

onPanResponderGrant

사용자가 터치를 시작할 때 딱 한 번 호출된다.

드래그를 끝내고 다시 드래그를 시작할 때마다 0, 0 위치로 돌아간다(setValue에 dx와 dy를 주고 있는데 dx와 dy는 이동한 거리이기 때문에 0으로 초기화 되기 때문)

extractOffset()으로 해결한다.

  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        position.extractOffset();
      },
      onPanResponderMove: (_, { dx, dy }) => {
        console.log("moving");
        position.setValue({
          x: dx,
          y: dy,
        });
      },
      onPanResponderRelease: () => {
        console.log("touch finished");
      },
    }),
  ).current;

 

 

✅ Spring의 애니메이션 효과를 빠르게 끝내는 방법

---

spring animation은 끝나기까지 약간의 텀이 있다.

restSpeedThreshold

- 속도 임계값

- 애니메이션을 끝난걸로 간주하는 속도(초당 몇 픽셀만큼 움직이고 있나에 대한 값)

- 기본값은 0.001

restDisplacementThreshold

- 거리 임계값

- 애니메이션이 끝난 걸로 간주하는 거리

- 기본값은 0.001

 

 

✅ LayoutAnimation

---

https://reactnative.dev/docs/layoutanimation

LayoutAnimation · React Native