탭탭카드놀이) lottie files 적용하기

숫자나 글자 그림은 직접 제작하는 게 통일성이 있고 사용하기 좋았지만, 동물은 좀 더 움직임이 있으면 좋을 거라 생각했다

기존에는 아주 약간 다른 그림파일 2개를 준비한 뒤 한장만 보여주고 클릭했을 때 나머지 한 장을 보여주는 식으로 애니메이션을 만들었는데

그림을 그리는 시간을 내는것도 쉽지 않고 그리다 보니 욕심이 나서 하나하나 만드는데 체력적, 정신적으로 굉장히 많은 에너지를 쏟다 보니 정작 중요한 개발을 못하는 사태가 발생했다

그러던 와중 맘에 드는 애니메이션을 사용할 수 있는 lottie files를 찾게 되었고 적용했던 과정을 작성해보고자 한다

https://github.com/coqoa/tabtabcard

GitHub - coqoa/tabtabcard

---

 

lottie files 라이브러리 적용 법 : https://github.com/lottie-react-native/lottie-react-native

GitHub - lottie-react-native/lottie-react-native: Lottie wrapper for React Native.

 

1. 설치

// 터미널에서 두가지를 설치한다
npm i --save lottie-react-native
npm i --save lottie-ios@3.2.3

// ios에서 사용하기 위해 ios 파일로 이동해 pod install을 해준다
cd ios
pod install

2. 안드로이드와 자동으로 링크되지 않는 문제를 해결하기 위해 다음과 같이 한다

 

2-1 android/app/src/main/java/<AppName>/MainApplication.java

// android/app/src/main/java/<AppName>/MainApplication.java
// 해당위치로 가서 다음을 추가해준다

import com.airbnb.android.react.lottie.LottiePackage;

// 그리고 List<ReactPackage> getPackages();내부에 다음을 추가작성한다
packages.add(new LottiePackage());

위치

import

packages.add(new LottiePackage());

 

2-2 android/app/build.gradle

 

* 위치확인!!

android/app/build.gradle 에 작성해야 한다

android/build.gradle에 작성해놓고 왜 안되는지 한참 삽질했음...

// android/app/build.gradle
// 해당위치로 가서 dependencies에 다음을 추가한다
implementation project(':lottie-react-native')

위치

맨아랫줄

 

 

2-3 android/settings.gradle

// android/settings.gradle
// 해당위치에 다음 코드 추가
include ':lottie-react-native'
project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android')

위치

 

3. 적용하기

3-1 사용하고 싶은 json파일을 찾아서 다운로드한다

https://lottiefiles.com/featured

Featured animations from our community

Lottie JSON 다운로드

 

 

3-2. AnimationExam.js(컴포넌트)

* 기존에 작성 중인 전체 파일에다 바로 적용하니깐 에러가 났음.
사용하려는 부분을 컴포넌트화해서 import 해야 함

import React from 'react';
import Lottie from 'lottie-react-native';

const AnimationExam = () => {
    return <Lottie source={require("다운받은파일경로 (예 ../asset/lottie/예제.json)")}  autoPlay loop></Lottie>
};

export default AnimationExam;

// 'lottie-react-native'를 먼저 import하고
// <Lottie source={파일주소} autoPlay loop /> 태그로 사용한다

3-3. 사용하기

import AnimationExam from "./AnimationExam";
// 컴포넌트를 import해주고 사용하고 싶은곳에 적용한다


// ... codes


<AnimationExam />

 

내 결과

 

어흥

* 끊기는 건 gif 파일 만드느라 발생했음, 에뮬레이터랑 디바이스에서 잘 돌아감