Lottie React Native

당신은 현재 두 가지 위치 중 하나에 있을 것입니다. 디자이너가 당신에게 Lottie JSON을 제공하고 "오늘 앱에 넣을 수 있을까요?"라고 묻는 경우, 또는 이미 그것을 연결하고 개발 단계에서 애니메이션 작동을 확인했지만 실제 장치, 시작 시간 및 릴리스 빌드가 들어가면 비용이 많이 들 것이라는 것을 알게 된 경우.

Lottie React Native에서 흥미로운 점은 여기 있습니다. 기본 데모는 쉽습니다. 프로덕션 준비가 된 implementation은 그렇지 않습니다. 차이점은 일반적으로 설치 방법, 재생 제어 방법 및 애니메이션 파일을 무해한 자산으로 대우하는지 아니면 성능 예산의 일부로 대우하는지에 따라 결정됩니다.

목차

• Lottie는 React Native 앱에서 필수적입니다.
  • 디자인과 엔지니어링은 같은 싸움을 더 이상 싸우지 않습니다.
  • Lottie가 가장 잘 맞는 곳은 어디인가요?
• Lottie 개발 환경을 설정하는 방법
  • 설치하기 전에 워크플로우를 선택하세요.
  • Expo 관리 설정
  • Bare React Native 설정
  • 시간을 절약하는 Bare 워크플로우
• 첫 번째 Lottie 애니메이션을 표시하세요.
  • 로컬 애니메이션 파일을 추가하세요
  • LottieView를 사용하여 렌더링하세요
  • 더 나은 첫 번째 화면 테스트
• Lottie 애니메이션 제어를 마스터하세요
  • 플레이백이 단순할 때 프로퍼티를 사용하세요
  • 상태가 애니메이션을 제어할 때 레퍼런스를 사용하세요
  • 믿을 수 있는 좋아요와 싫어요 패턴
• 생산 앱의 성능 최적화
  • 팀이 문제를 겪는 곳
  • 먼저 최적화해야 할 것
  • 로컬 파일과 원격 전달
• 일반적인 Lottie 문제 해결
  • Android에서 애니메이션 렌더링이 안됩니다.
  • 오래된 기기에서 재생이 불안정합니다.
  • 리퍼런스가 null이거나 재생이 아무런 효과가 없습니다.
  • 화면 크기에 따라 애니메이션의 모양이 틀립니다.

Lottie React Native를 사용하는 이유

React Native에서 고급 애니메이션을 직접 구현하려면 얼마나 많은 시간과 노력을 들여야 하는지 이미 알고 계시죠. 작은 움직임의 세부 사항은 타이밍 로직, 이ंटर폴레이션, 플랫폼의 특이점으로 변해버립니다. 애니메이션은 거의 완벽하게 보이지만, '가까운' 정도는 디자이너가 배포한 것과는 다릅니다.

Lottie는 이 workflow를 바꿨습니다. 에어비앤비는 2016년에 Lottie를 오픈 소스로 공개했으며, 이 릴리스는 모바일 애니메이션을 디자인자가 직접 배포할 수 있도록 해 주었습니다. 엔터프라이즈 환경에서 이 변화는 개발 비용을 40%까지 줄였습니다. 에어비앤비의 Lottie 개요디자인과 엔지니어링은 같은 싸움을 하지 않습니다. Lottie React Native의 주요 이점은 'JSON에서 예쁜 애니메이션'만이 아니라, 관심사 분리를 의미합니다. 디자이너는 After Effects에서 작업하고 Bodymovin으로 내보내고, 개발자는 원본을 Native-backed 플레이백으로 렌더링합니다. motion을 커스텀 __CAPGO_KEEP_0__로 번역하는 대신..

40%

A key benefit of Lottie React Native isn’t just “pretty animations in JSON.” It’s the separation of concerns. Designers work in After Effects and export with Bodymovin. Developers render the output with native-backed playback instead of translating motion into custom code.

애니메이션 작업은 확산하는 경향이 있습니다. 단일 축하 상태 애니메이션은 디자인 검토, 제품 검토, Android 동작, iOS 동작, 접근성 및 시작 수행에 영향을 미칠 수 있습니다. Lottie는 이 표면 영역을 좁힙니다.

실용적인 규칙: Lottie를 사용할 때 애니메이션은 제품 경험의 일부가 아닌 단순한 불투명도 또는 변환 전환만 필요할 때만 사용하십시오.

또한 사용자 경험의 관점이 있습니다. 운동은 feedback, 동작 확인 및 로딩 상태를 죽은 것처럼 느끼게 하는 데 도움이 됩니다. 인터페이스에 대한 신뢰, 보존 또는 폴리시를 생각하는 팀이 있다면 애니메이션은 그 대화의 일부입니다. 더 광범위한 앱 사용자 경험 토론 일반적으로 끝에 도달합니다: 빠른 feedback는 정적 화면보다 좋습니다.

Lottie가 가장 잘 맞는 곳

Lottie React Native는 다음과 같은 경우에 가장 잘 작동합니다:

• 브랜드 미세 동작 좋아요, 저장, 체크마크 및 구매 성공 상태와 같은 것
• 온보딩 일러스트레이션 비디오를 배송하지 않고도 커스텀으로 느껴지도록 해야 하는 것
• 로딩 및 빈 상태 정적 UI가 끝나지 않은 느낌
• 기능 교육 제품이 GIF나 MP4를 임베딩하지 않고도 동작을 원할 때

모든 애니메이션 문제를 해결하지는 않는다. 기본적인 화면 전환 애니메이션의 경우, React Native의 내장 애니메이션 도구가 더 간단하다. 매우 큰 또는 상호작용이 많은 동작 시스템의 경우, JSON 형식이 이점이 아닌 단점이 될 수 있다. 이 단점은 프로덕션에 도달했을 때 더 중요해진다. 대부분의 튜토리얼은 너무 일찍 멈추기 때문에 프로덕션에 도달했을 때 이 단점이 더 중요해진다.

로티(Lottie) 개발 환경 설정

설치 경로가 하나의 결정에 달려 있다: Expo 관리 워크플로우 또는 Bare React Native. 개발자들은 Expo 내부의 Bare 워크플로우 가이드를 따르는 경우나, Expo가 모든 네이티브 세부 사항을 추상화한다고 가정하는 경우에 대부분의 설정 문제가 발생한다.

워크플로우를 선택하기 전에

Expo에서 앱이 실행되는 경우, 가장 빠른 설정을 위해 Expo 경로를 유지하라. 네이티브 커스텀 작업이 필요하다고 생각하는 경우에만 Expo 경로를 벗어나라. Bare 앱의 경우 또는 이미 네이티브 모듈에 의존하고 직접 제어를 원하는 경우, 일반 네이티브 의존성을 설치하고 iOS 및 Android 빌드를 즉시 검증하라.

A lot of teams underestimate how much easier debugging becomes when you keep your setup aligned with the project type. That’s also why many teams building custom native integrations move early to an Expo 개발 클라이언트 워크플로우 대신 앱이 더 어려워질 때까지 기다리지 않기 때문입니다.

Expo 관리 설정

Expo 관리 앱의 경우, 최소한으로 유지하세요.

1. 패키지를 설치하세요.

   npx expo install lottie-react-native

2. 메트로를 재시작하세요.

   npx expo start -c

3. 디바이스 또는 시뮬레이터에서 확인하세요. 지역 JSON 파일에서 시작하여 매우 작은 애니메이션을 렌더링하세요. 큰 자산과 새로운 설치를 동시에 디버그하지 마세요.

Expo에서 몇 가지 실용적인 주의 사항이 있습니다.

• 지역 파일을 우선으로 합니다. 네트워크 잡음이 생기는 것은 네트워크를 통해 애니메이션 디버깅을 하려는 경우에만 발생합니다.
• 테스트 릴리즈 동작을 일찍 테스트하세요: 개발 모드에서는 타이밍과 성능과 관련된 문제를 숨길 수 있습니다.
• 어셋 경로를 감시하세요: JSON 파일이 잘못 위치한 경우 가장 일반적인

nothing이 렌더링되지 않는

원인입니다.

Expo는

1. it works

   npm install lottie-react-native

2. 를 가장 빠르게 달성하는 방법입니다. 그러나

   cd ios && pod install && cd ..

3. it scales

   npx react-native run-ios

   or

   npx react-native run-android

bare React Native 설정입니다.

시간을 절약하는 기본 워크플로

이 단축된 체크리스트를 사용하여 다음 단계로 진행하세요:

설치가 정상적으로 완료되었지만 첫 번째 애니메이션을 표시하지 못한다면, 설치 문제가 아니다. 일반적으로 asset 경로, 컴포넌트 크기, 또는 재생 설정이 문제이다.

첫 번째 Lottie 애니메이션 표시

첫 번째 작동 애니메이션은 반드시 단순해야 한다. 로컬 파일. 고정 크기. 자동 재생. 반복 옵션. 조건부 재생, 원격 JSON, 또는 심층 애니메이션 내보내기와 같은 복잡한 애니메이션을 시작하지 마라.

로컬 애니메이션 파일을 추가하라

자산 폴더가 없다면 폴더를 생성하라:

assets/
  animations/
    success.json

이름이 간단해야 한다. 공백, 이상한 기호, 또는 중첩 폴더의 수준이 많은 폴더를 피하라. 경로가 명확해야 하기 때문이다. require() 브랜딩 로딩 화면이나 런칭 후 전환을 위해 Lottie를 사용한다면, 시작 경로에 큰 애니메이션을 넣기 전에 신중하게 생각하라. 특히 React Native 스플래시 화면 동작을 튜닝하는 경우이다.

LottieView를 사용하여 렌더링하라 대형 화면 파일에 직접 넣지 말고 전용 컴포넌트를 생성하라:.

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__

import React from 'react';
import { View, StyleSheet } from 'react-native';
import LottieView from 'lottie-react-native';

export function SuccessAnimation() {
  return (
    <View style={styles.container}>
      <LottieView
        source={require('../assets/animations/success.json')}
        autoPlay
        loop={false}
        style={styles.animation}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  animation: {
    width: 220,
    height: 220,
  },
});

세 가지 유용한 일을 수행합니다:

• 라이브러리가 올바르게 렌더링되는지 증명합니다
• 자산 경로가 올바르게 해결되는지 증명합니다
• 재생 및 크기 조정을 나중에 조정할 수 있는 단일 고립된 위치를 제공합니다

기본 사항을 생략하면 즉시 나타나는 몇 가지 문제가 있습니다:

• 너무 좁거나 높지 않습니다: 애니메이션은 존재하지만 보이지 않을 수 있습니다.
• 잘못된 require() 경로: 메트로가 파일을 찾을 수 없습니다.
• 유효하지 않은 내보내기: 몇몇 JSON 파일은 기술적으로 유효하지만 모바일에서 예상치 못한 동작을 하는 특성을 포함할 수 있습니다.

첫 번째 렌더링을 지역화하고 결정적이게 유지하세요. 통합 테스트 중이지 않습니다.

더 나은 첫 번째 화면 테스트

컴포넌트를 단순한 화면에 배치하고 중립적인 배경을 사용하세요:

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { SuccessAnimation } from './src/SuccessAnimation';

export default function App() {
  return (
    <SafeAreaView style={styles.screen}>
      <SuccessAnimation />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

이것이 iOS 및 Android 시뮬레이터에서 모두 작동한다면, 첫 번째 실제 장벽을 넘었습니다. 그 다음 단계는 더 많은 애니메이션을 추가하는 것이 아니라, 선언적 속성과 직접적인 참조를 사용할 때를 배워야 합니다.

Lottie 애니메이션 제어를 마스터하세요

Lottie React Native 버그의 대부분은 애니메이션에 상태에 반응할 때 나타납니다. 자동 재생은 쉽습니다. '사용자가 아이템을 좋아할 때 이 구간을 재생하고, 사용자가 아이템을 좋아하지 않을 때 역방향으로 재생하고, 컴포넌트가 다시 렌더링될 때 stutter하지 않도록' 하는 것은 복잡합니다.

속성 사용할 때 재생이 단순합니다

비 인터랙티브 재생의 경우 속성만으로 충분합니다.

<LottieView
  source={require('../assets/animations/loading.json')}
  autoPlay
  loop
  speed={1}
/>

이 스타일은 좋습니다:

• 로딩 인디케이터
• 비활성화된 온보딩 일러스트레이션
• 장식적인 빈 상태

정의적이고 읽기 쉬우며. 컴포넌트가 마운트되면, 재생이 시작되고, React가 제어권을 유지합니다. 애니메이션 로직이 전적으로 속성으로 설명될 수 있다면, 그곳에 유지하세요.

더 복잡한 정의적 사례는 progress애니메이션 프레임을 다른 값과 연결하는 것입니다. motion이 외부 진행 소스에 반영되어야 할 때 잘 작동하지만, 한 번만 트리거하는 이벤트에 적합하지 않습니다.

이미지 비교를 위해 먼저 refs로 넘어가겠습니다:

refs를 사용하여 상태가 애니메이션을 제어하세요

사용자가 탭, 토글, 또는 액션을 완료할 때, refs는 일반적으로 더 안전한 도구입니다. 현실적인 데이터는 68%의 개발자가 하이브리드 프레임워크를 사용하여 애니메이션 트리거가 실패하는 것을 보고했습니다. 이는 hooks에서 refs를 적절하게 처리하지 못하는 것 때문입니다. useEffect hooksrefs를 적절하게 처리하는 데 대한 의존성에 대한 의견 animation.current.play() __CAPGO_KEEP_0__-중심에 대한 논의 Capacitor.

그 문제는 하이브리드 앱에만 국한되지 않습니다. 평범한 React Native에서도 나타납니다. 특히 개발자가 refs를 재생성할 때, 마운트하기 전에 재생을 트리거할 때, 또는 불안정한 효과에 애니메이션 호출을 묶을 때.

import React, { useRef, useState } from 'react';
import { Pressable } from 'react-native';
import LottieView from 'lottie-react-native';

export function LikeButton() {
  const animationRef = useRef<LottieView>(null);
  const [liked, setLiked] = useState(false);

  const onPress = () => {
    if (!animationRef.current) return;

    if (liked) {
      animationRef.current.play(60, 0);
    } else {
      animationRef.current.play(0, 60);
    }

    setLiked(!liked);
  };

  return (
    <Pressable onPress={onPress}>
      <LottieView
        ref={animationRef}
        source={require('../assets/animations/like.json')}
        loop={false}
        autoPlay={false}
        style={{ width: 96, height: 96 }}
      />
    </Pressable>
  );
}

신뢰할 수 있는 좋아요와 싫어요 패턴

이 패턴은 state가 변경될 때마다 호출하는 것보다 프로덕션에서 더 잘 작동합니다. play() inside useEffect 왜 그것이 작동하는지:

이벤트가 애니메이션 트리거를 소유하고 있습니다:

• 클릭 이벤트는 재생을 시작하는 안정적인 순간입니다. ref는 지역적이고 지속적입니다:
• 필요하지 않은 리렌더링을 피합니다. useRef 컴포넌트는 자동 재생 충돌을 피합니다:
• 마운트 동작과 사용자 트리거 동작이 충돌하지 않도록 합니다. 이 패턴은 state가 변경될 때마다 호출하는 것보다 프로덕션에서 더 잘 작동합니다.

일반적인 실수는 피하는 것이 좋습니다:

1. 리퍼런스(Reference)가 존재하기 전에 트리거(Trigger)하지 마세요.
   만약 animationRef.current null일 경우 재생이 일어나지 않습니다. 보호하세요.

2. 사용 autoPlay 명령형 제어(Command)와 함께.
   재생을 위한 기본 소유주(Owner)를 하나로 선택하세요.

3. 모든 것을 통제하기 위해 useEffect
   효과는 유용하지만 UI 액션에 대해 타이밍 문제를 추가하는 대신 제거하는 데 도움이 됩니다.

만약 애니메이션(Animation)이 터치(Tap) 반응을.responds한다면, 터치 핸들러(Tap Handler) 내부에서 트리거를 먼저 사용하세요. useEffect 소스(Truth)가 그 상호작용(Interaction) 바깥에 존재할 때만

실용적인 앱(Production Apps)에서 성능 최적화

리액트 네이티브 로티(Lottie React Native)는 가볍게 보이지만 팀이 큰 JSON 파일을 앱 번들에 넣고 시작 시간이 느려진 이유를 이해하는 데 어려움을 겪을 때가 있습니다. 애니메이션 자체가 항상 문제가 되지 않습니다. 전달 전략이 문제입니다.

팀이 어려움을 겪는 곳

가장 쉬운 실수는 모든 애니메이션을 직접 자바스크립트로 번들링하고 너무 일찍 로드하는 것입니다. 로티 JSON을 잘못 배송하는 것에 대한 이 안내서에 따르면, JS 번들을 로티 JSON과 같은 자산으로 과부하시키면 중간급 장치에서 앱 시작 시간이 40% 이상 증가할 수 있습니다.그것은 많은 팀이 실제로 경험하는 문제와 일치합니다. 문제는 단 하나의 작은 성공 애니메이션이 아닙니다. 그것은 쌓인 문제입니다:

온보딩 모션

• 로더 상태
• 전자 상거래 반응
• 이 가이드는 로티 JSON을 잘못 배송하는 것에 대한 것입니다.
• 브랜드 비어있는 화면
• 지역화 파일과 다른 패키지-heavy 자산이 옆에 앉아 있습니다.

앱이 이미 시작에 대한 예산 문제를 가지고 있다면, Lottie 파일은 빠르게 문제를 악화시킬 수 있습니다.

최적화해야 할 첫 번째 항목

export 자체에서 시작하세요. 애니메이션 export이 추상적이라면, 나중에 파싱, 메모리, 렌더링 안정성에서 비용을 지불할 것입니다. 디자이너 export을 그대로 받아들이지 마세요.

이 프로덕션 체크리스트를 사용하세요:

• 배송 전에 JSON을 압축하세요: 작은 파일은 로드하기가 더 쉬우며 시작 시 불필요한 부피를 줄일 수 있습니다.
• JS 패키지에서 비중이 낮은 애니메이션을 이동하세요: 시작 code을 앱이 즉시 필요로 하는 것에 집중하세요.
• 애니메이션을 수요에 따라 로드하세요: 화면이나 액션에 필요한 경우 렌더링하세요.
• 기존 기기 동작 감사: 최신 시뮬레이터는 비싼 재생을 숨길 수 있습니다.
• 대형 Lottie 파일을 시작 화면 장식으로 사용하지 마세요: 첫 번째 상호 작용이 중요하지 않다면, 앱 시작과 렌더링, 프레임워크 트레이드 오프의 더 큰 맥락에서 애니메이션 결정에 대한 가이드라인을 제공하는 앱 라이트어의 모바일 성능 가이드는 유용한 동료 읽기입니다.

팀이 심각한 모바일 성능 작업을 수행하는 경우 AppLighter의 모바일 성능 가이드 하나의 어려운 진실:

첫 번째 상호 작용을 늦추는 아름다운 애니메이션은 일반적으로 디자인 승리보다는 제품 버그입니다. React Native를孤立적으로 생각하지 마세요. 하이브리드 스택에서 작업하는 팀은 유사한 자산 로드 문제에 직면하고 __CAPGO_KEEP_0__ 앱의 더 광범위한 애니메이션 성능 가이드가 Lottie 결정에도 잘 적용됩니다.

팀이 심각한 모바일 성능 작업을 수행하는 경우 animation performance guidance for Capacitor apps 하나의 어려운 진실:

국내 파일 versus 원격 전송

국내 파일은 예측 가능합니다. 오프라인에서 작동하고 네트워크 불안정성을 제거하고 테스트가 더 쉬워집니다. 또한 쉽게 오버 패키징이 가능합니다.

원격 전송은 바이너리가 더 가볍지만 애니메이션의 가용성, 캐싱, fallback 문제가 발생합니다. 이러한 트레이드 오프는 비중심적인 동작에 대해 받아 들일 수 있지만 주요 UX 상태인 구매 확인 또는 인증 성공과 같은 경우에는 위험합니다.

실용적인 분리는 잘 작동합니다:

이 섹션에서 규칙을 하나만 적용한다면, 이 규칙을 사용하세요: Lottie JSON을 성능에 민감한 자산으로, 무해한 장식으로 다루지 마세요..

Lottie 문제 해결

Lottie가 깨지면, 일반적인 원인이 대부분입니다. 잘못된 경로. 크기가 없는 크기. 참조 시간이 잘못되었습니다. JSON이 너무 무거운 경우. 디버깅을 빠르게 하려면 변수를 줄이세요.

안드로이드에서 애니메이션 렌더링이 안됩니다.

먼저 JSON 파일이 해결되는지 확인하세요. 그런 다음 컴포넌트에 명시적인 크기를 지정하세요.

<LottieView
  source={require('../assets/animations/success.json')}
  autoPlay
  style={{ width: 200, height: 200 }}
/>

그것도 실패하면, 다른 알려진 좋은 애니메이션으로 교체하세요. 그럼 파일이 문제인지, 설정이 문제인지 알 수 있습니다.

오래된 기기에서 플레이백이 끊기게 됩니다.

이것은 일반적으로 자산에 문제가 있는 경우입니다, API.

이러한 해결책을 시도하세요:

• 애니메이션 복잡성을 줄이기: 원본 파일이 무거우면 가벼운 내보내기 요청을 하세요.
• 나중에 불러오기: 초기 화면 작업에 경쟁하지 마세요.
• 항목 목록 애니메이션 복잡성을 줄이기:
• 원본 파일이 무거우면 가벼운 내보내기 요청을 하세요. 페이지 경로: /ko/blog/lottie-react-native/

리소스는 null이거나 play는 아무런 동작도 하지 않습니다.

항목 목록

if (animationRef.current) {
  animationRef.current.play();
}

지연 로딩: useRef초기 화면 작업과 경쟁하지 마세요. Yarn 캐시 정리 루틴 개발 중에 오해스러운 자산 동작을 제거하기 위해 종종 충분합니다.

화면 크기에 따라 애니메이션이 잘못 보인다

애니메이션은 레이아웃을 정의하지 마세요. 컨테이너 안에 넣고 의도적으로 크기를 조정하세요.

• 아이콘과 반응에 고정된 경계를 사용하세요
• larger 일러스트레이션에.aspect-aware wrapper를 사용하세요
• 전체 너비로拉기 전에 export의 의도된 구성이 무엇인지 확인하세요

대부분의 “Lottie이 깨졌습니다” 보고서가 레이아웃 문제, 자산 문제 또는 타이밍 문제로 끝납니다. 라이브러리는 종종 당신이 요청한 것과 정확히 수행합니다.

마지막 디버깅 단축키가 필요하다면 모든 고급 속성을 제거하고 중앙 뷰에 하나의 로컬 애니메이션을 렌더링하고 다시 빌드하세요. 이 방법은 문제를 더 빠르게 분리합니다.

Capgo은 JavaScript, 자산 및 구성 수정을 Capacitor 앱에 푸시하기 위해 스토어 리뷰를 기다리지 않고 팀이 배포할 수 있도록 도와줍니다. hybrid 앱을 유지 관리하고 safer 방법으로 업데이트, staged rollout을 처리하고 front-end 문제에서 빠르게 복구해야 한다면 Capgo 참조할 가치가 있습니다.