[react] 리액트 네이티브에서 지도 애니메이션 효과 적용하기

22 Dec 2023

react

리액트 네이티브 앱에서 지도를 사용할 때, 지도의 애니메이션 효과를 적용하고 싶을 때가 있습니다. 이번 블로그에서는 리액트 네이티브에서 지도 애니메이션 효과를 적용하는 방법에 대해 알아보겠습니다.

1. 지도 라이브러리 선택

먼저, 리액트 네이티브에서 지도를 표시하기 위한 라이브러리를 선택해야 합니다. 가장 대표적인 라이브러리로는 react-native-maps가 있습니다. 해당 라이브러리는 구글 맵과 애플 맵을 지원하며, 다양한 옵션과 기능을 제공합니다.

import MapView from 'react-native-maps';

2. 애니메이션 효과 적용

애니메이션 효과를 적용하려면 Animated 모듈을 사용하여 애니메이션 값을 조절해야 합니다. 예를 들어, 지도의 위치를 부드럽게 변경하거나 확대/축소하는 애니메이션을 적용하려면 다음과 같이 Animated를 활용할 수 있습니다.

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

const MapWithAnimation = () => {
  const mapAnimation = new Animated.Value(0);

  const startAnimation = () => {
    Animated.timing(mapAnimation, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true
    }).start();
  };

  return (
    <View>
      <MapView
        style={{ width: 300, height: 300 }}
        region={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      >
      </MapView>
    </View>
  );
};

위 예제에서 mapAnimation은 애니메이션 값의 상태를 나타내며, startAnimation 함수를 통해 애니메이션을 시작합니다.

3. 마무리

이제 위 예제와 같이 react-native-maps를 사용하여 지도에 애니메이션 효과를 적용할 수 있습니다.

간단히 정리하면, 애니메이션 효과를 적용하기 위해 Animated 모듈을 활용하고, 지도 라이브러리로 react-native-maps를 선택하여 지도와 애니메이션을 통합시킬 수 있습니다.

이상으로 리액트 네이티브에서 지도 애니메이션 효과를 적용하는 방법에 대해 알아보았습니다. 원하는 애니메이션 효과를 적용하여 지도를 보다 흥미롭게 표현해보세요.

참고 문헌:

React Native Maps: https://github.com/react-native-maps/react-native-maps