React Native의 Lottie 애니메이션 : 구현 가이드

React Native에서 Lottie 파일을 디자인, 애니메이션 및 테마 지정하는 방법

Lottie 애니메이션으로 UX를 한 단계 업그레이드하세요

Lottie 는 원래 AirBnB에서 만든 라이브러리로 After Effects 애니메이션을 JSON 개체로 내보내고 기본적으로 모바일 플랫폼과 웹에서 재생할 수 있습니다. Lottie for React Native 는 작성 시점에 매주 100,000 회 이상의 다운로드로 현재 특히 인기가 있습니다. 이는 정당한 이유가 있습니다. 라이브러리를 통해 개발자는 모바일에서 기본적으로 실행되는 매우 인상적인 복잡한 애니메이션을 만드는 업계 표준 도구를 사용할 수 있습니다. 장치.

고성능 벡터 애니메이션은 정점 수준에서 유동적 인 전환 및 모양 변형을 제공 할뿐만 아니라 확장 및 테마 지원과 같은 다른 이점도 제공합니다. 다음 로켓 발사 애니메이션은 일반적인 Lottie 애니메이션을 보여줍니다 (GIF 형식에서는 품질이 저하됩니다!).

Lottie 애니메이션은 스케일링, 여유, 정점 조작 등을 지원합니다.

이 애니메이션은 lottie-react-native패키지 를 통해 React Native에 구매되었으며 , 이제 Javascript 커뮤니티 전체에서 주요 채택을 달성했습니다.

이전 버전에는 설치가 까다로 웠지만, Lottie for React Native는 최신 버전의 React Native 0.63과 함께 설치 중단 및 경고와 관련된 이빨 문제를 해결 한 것으로 보입니다. React Native의 자동 연결은 설치 프로세스를 더욱 간소화하여 라이브러리에 익숙해 져 앱을 시각적으로 더 매력적이고 궁극적으로 더 재미있게 만들 수있는 좋은 시간입니다.

Lottie 파일에 대해 알아보기

로티 파일 웹 사이트는 이미 쉽게 프로젝트로 가져 오거나 프로토 타입에 사용할 수있는 애니메이션의 라이브러리를 개최하고 있습니다. 이 애니메이션은 또한 자신의 디자인에 영감을 줄 수 있으며 Lottie 애니메이션의 가능성과 한계를 보여줍니다.

로티 마켓 플레이스는 또한 개발자 캐치 동향 및 릴리스 애니메이션 팩에 대한 기회를 제공, 애니메이터 로티 형식으로 고품질의 그림을 판매 할 수 있도록하기 위해 설립되었습니다. 전자 지갑 아이콘 팩 반면 예는, 성장 핀 기술 현장과 관련이있을 것입니다 Covid 안전 정보의 수집 대상으로 추적 및 건강 애플리케이션을 것입니다.

아이콘의 테스트와 공유를 용이하게하기 위해, 우리는 또한 장치에 직접 애니메이션을로드 하는 Lottie Files iOS 앱 을 가지고 있습니다 . 색상을 바꾸고 재생을 제어 할 수 있습니다.

개념에서 최종 애니메이션까지 Lottie 애니메이션을 가져 오기 위해 채택 할 수있는 몇 가지 워크 플로가 있으며, 선호하는 도구에 따라 다른 소프트웨어 패키지와 동일합니다.

  • SketchAEUX 플러그인. Sketch는 Adobe XD와 다르지 않은 Mac 용 비주얼 프로토 타이핑 애플리케이션입니다 . Sketch는 모바일 장치에 초점을 맞춘 다양한 표준화 된 치수의 "아트 보드"또는 캔버스를 지원하며 포괄적 인 벡터 도구 세트를 포함합니다. AEUX의 스케치를위한 플러그인은 그래픽을 선택하고 직접 후 효과를 내보낼 수 있습니다.
  • Sketch 워크 플로우와 유사하게 Figma 는 브라우저 기반 솔루션으로 협업 프로토 타이핑을 허용합니다. AEUX는 또한 Figma를 지원하므로 Figma 스토리 보드에서 일부 그래픽을 내보내려는 경우에도 AEUX를 사용하면 After Effects 조작을 위해 그래픽을 내보낼 수 있습니다.
  • 기존 앱에 애니메이션을 추가하려는 경우 전체 캔버스를 다시 디자인하는 것은 과도한 작업입니다. Illustrator와 같은 벡터 기반 편집 패키지에서 모양을 만들고 레이어를 만듭니다.

위의 모든 것은 사전 애니메이션이거나 After Effects에서 애니메이션 할 정적 벡터를 준비하는 것입니다. 애니메이션이 적용되면 Lottie Files 플러그인 을 사용하여 애니메이션을 미리보고 JSON 개체로 내 보냅니다.

Lottie는 모든 After Effects 기능을 지원하지 않으므로 (벡터 애니메이션에 원하는 모든 기능이 호환되지만) 애니메이션을 내보내기 전에 미리 볼 수 있으면 예상대로 작동하는지 확인하는 것이 매우 편리합니다. 포괄적 인 분석 지원되는 기능 표확인하세요 .

이 모든 것을 말하면서 이제 아이콘을 훨씬 더 흥미롭게 만드는 것을 중심으로 React Native 앱용 Lottie Files의 특정 사용 사례를 요약하겠습니다.

이 작품이 다룰 내용

이 부분은 눌렀을 때 움직이는 대화 형 탭 모음 아이콘을 만드는 과정을 안내합니다. 아이콘은 독자가 자신의 앱에 유용한 애니메이션을 만들 수 있도록 주요 애니메이션 기술을 보여줍니다.

특히, 상호 작용할 때 흥미로운 방식으로 애니메이션을 적용 할 수 있도록 정적 SVG 아이콘을 다시 디자인 할 것입니다. 앱의 기본 탐색기 역할을하는 표준 아이콘 집합 인 다음 탭 표시 줄을 사용합니다.

정적 SVG 아이콘이있는 탭 막대

위의 탭 바는 제가 개인적으로 개발 한 앱에서 가져온 것이며 완벽하게 잘 작동합니다. 그러나 이러한 아이콘 더 상호 작용할 있으며 비활성 상태 일 때 색상 변경 이상으로 반응 할 수 있습니다.

이 아이콘을 더 흥미롭게 만들기 위해 Lottie 애니메이션으로 리팩토링 할 것입니다. 아이콘은 다음 애니메이션으로 대체됩니다.

탭 및 프레스 인과 상호 작용하는 Lottie 애니메이션

버튼을 누르고 있으면 아이콘이 약간 눌려져 있고, 버튼을 놓으면 애니메이션이 계속됩니다. 즉석 탭도 자연스러워 보이며 아이콘이 압착되어 원래 모양으로 점차 완화됩니다. 또한 확장 타원이 집 모양 너머로 보이지 않도록하는 마스크와 함께 물결 효과와 같은 Material-UI 가 추가되었습니다.

이 기사에서는이 사용자 정의 애니메이션을 처음부터 만드는 데 사용되는 기술을 살펴 봅니다. 애니메이션은 Lottie Files 플러그인을 사용하여 After Effects에서 내보내고 lottie-react-native아이콘과 상호 작용하는 데 API가 사용되는 React Native로 가져옵니다 .

이러한 벡터 기반 애니메이션은 기기에서 크기를 조정할뿐만 아니라 각 모양을 특정 색상으로 테마로 지정할 수 있습니다. 이는 색상 필터를 사용 하여 수행되며 아래에서 더 자세히 설명합니다. 색상 필터를 사용하면 After Effects에서 레이어 이름을 기반으로 모양을 참조 할 수 있으며, 여기서 색상을 즉시 교체 할 수 있습니다.

색상 필터를 사용하면 Lottie 애니메이션 테마와 호환됩니다. 동일한 애니메이션의 밝고 어두운 모드를 만들 필요가 없습니다. React Native에서 호스팅되는 테마 구성은 컬러 필터를 통해 애니메이션에 직접 적용 할 수 있습니다.

아이콘 애니메이션 파이프 라인

Adobe Illustrator 는 벡터 그래픽과 관련하여 업계 표준이며 사용자 정의 모양을 만들기위한 이상적인 시작점입니다.

여기서 목표는 애니메이션이 필요한 그래픽의 다양한 구성 요소를 분리하는 것입니다. 집 아이콘의 경우 굴뚝, 지붕 및 집의 대부분이 3 개의 레이어로 분리되어 그에 따라 이름이 지정됩니다.

Illustrator에서 레이어로 분리 된 홈 아이콘 구성 요소.

그래픽은 Illustrator .ai파일 로 저장하고 파일 -> 가져 오기 -> 파일…을 통해 After Effects로 직접 가져올 수 있습니다 . 모양과 레이어 설정에 만족하면 Illustrator의 작업이 완료된 것입니다.

이제 After Effects에서 가져올 파일을 선택하면 몇 가지 가져 오기 옵션이 표시됩니다. 컴포지션 가져 오기 종류 옵션 을 선택하고 푸티 지 크기를 문서 크기 와 일치시켜야합니다 .

푸티 지 가져 오기 종류를 선택하면 레이어가 병합되어 애니메이션 할 수 없습니다.

가져온 컴포지션을 두 번 클릭하면 그 안에 별도의 레이어와 모양이 표시됩니다.

파일 유형을 나타내는 Ai 아이콘이있는 가져온 레이어입니다.

Illustrator 자산을 모양 레이어로 변환

레이어를 보면 실제로 Ai레이어 임을 알 수 있으며 이는 Lottie의 문제입니다. 자산 유형은 레이어 이름 왼쪽에 아이콘으로 표시됩니다.

이 Ai 형식은 다음과 같은 이유로 Lottie JSON 파일로 내보낼 때 파이프 라인에서 더 문제가됩니다.

  • 레이어는 인코딩 된 PNG 이미지로 내보내지고 출력 된 JSON 파일에 포함됩니다. 이렇게하면 파일 크기가 크게 늘어납니다.
  • 자산은 비트 맵으로 내보내지기 때문에 테마를 지정하고 앱에 아이콘을 배치 할 때 색상 필터 나 크기 조정의 영향을받지 않습니다.
벡터 레이어를 모양으로 변환.

만들기 메뉴는 레이어 아래의 주 메뉴에서도 찾을 수 있습니다 .

Ai 레이어는 더 이상 필요하지 않으며 캔버스에서 삭제하거나 숨길 수 있습니다. 또한 "Outlines"텍스트를 제거하여 새로 만든 모양 레이어의 이름을 바꿀 가치가 있습니다. 이러한 레이어 이름은 색상 필터링과 관련하여 더 아래에서 참조되기 때문입니다.

이제 지원되는 모든 After Effects 기능 을 사용하여 새로 만든 모양 레이어에 애니메이션을 적용 할 수 있습니다 .

애니메이션 기술은이 기사의 범위를 벗어나지 만 Lottie가 키 프레임 애니메이션을 만들기위한 기본 도구를 설명 하는 유용한 과정 이 있습니다. Lottie가 완벽하게 지원하는 몇 가지 흥미로운 애니메이션 기술을 보여주는 보너스 비디오 도 있습니다 . After Effects를 처음 사용하는 경우이 콘텐츠를 살펴 보는 것이 좋습니다.

그러나 여기서 언급 할 것은 마스크를 만드는 방법과 House 레이어에 적용되는 잔물결 효과입니다.

마스크 및 파급 효과

마스크는 레이어의 가시 영역을 정의하며 사용자 정의 벡터 그래픽과 일치하도록 특정 모양이되도록 조작 할 수 있습니다. 레이어를 마우스 오른쪽 버튼으로 클릭하고 마스크 -> 새 마스크를 선택하여 마스크를 추가 할 수 있습니다 .

그러면 마스크 속성이 레이어에 추가됩니다. 다음의 경우 모양 레이어 1에는 크기 조정 및 투명도가 적용된 흰색 타원 인 "잔물결"모양이 포함됩니다.

"잔물결"타원 모양 레이어에 추가 된 레이어 마스크

마스크 경로 필드는 마스크의 가시 영역을 정의하는 것입니다. 모양… 을 클릭하면 경계 상자 또는 타원 모양을 기본 마스크로 설정할 수 있습니다. 이것은 분명히 집의 복잡한 모양을 따르지 않으므로 모양에 더 많은 정점을 추가하고 집 모양과 일치하도록 조작해야합니다.

펜 도구와 선택 도구는 정점을 추가하고 위치와 곡률을 변경하는 데 사용됩니다.

펜으로도 마스크 모양 정점을 조작합니다.

안타깝게도 After Effects에서는 모양을 마스크 모양 속성으로 드래그 할 수 없으므로 마스크 모양을 수동으로 그릴 수 있습니다.

타원의 크기와 불투명도가 애니메이션 된 후 최종 결과는 집 모양으로 제한되는 효과를 사용하여 탭할 때마다 트리거되는 잔물결 효과를 모방합니다.

마스크에 의해 제한되는 물결 효과 애니메이션입니다.

최종 애니메이션은 18 개의 키 프레임 길이입니다. 모든 애니메이션 상태는이 하나의 애니메이션에 있으며 Lottie의 API를 사용하여 React Native에서 제어됩니다.

모든 상태를 하나의 애니메이션으로 결합하는 것이 일반적입니다. 가지고 이 책갈피에 애니메이션을 선별 및 선택 해제 애니메이션 모두 그 콤바인을. 각 상태를 재생하기위한 특정 키 프레임은 React Native 측에서 구성되며, 이에 대해 더 자세히 다룰 것입니다.

애니메이션 세그먼트는 다음과 같습니다.

  • 프레임 1 : 기본 상태
  • 프레임 2 : 눌린 상태, 압입 이벤트가 트리거 될 때 표시됩니다. 이것은 Pressable다음 섹션 의 구성 요소 와 함께 설명됩니다 .
  • 프레임 3 ~ 18 : 아이콘을 탭하면 재생되는 집과 함께 잔물결 효과가 원래 모양으로 돌아갑니다.

애니메이션 미리보기 및 내보내기는 Lottie Files 플러그인을 사용하면 간단합니다 .

  • -> 확장 -> LottieFiles 를 선택 하여 플로팅 창에서 플러그인을 엽니 다.
  • 내보낼 구성을 선택하십시오.
  • 미리보기를 확인하고 클라우드 또는 PC로 내 보냅니다.

React Native의 Lottie

에 대한 설치 지침에 lottie-react-native따라 프로젝트에 필요한 종속성을 추가합니다.

yarn add yarn add lottie-react-native lottie-ios

// embedding a lottie animation in React Native components
...
import LottieView from 'lottie-react-native'
export const LottieAnimation = (props) => 
  <LottieView
    source={require('./lottie/home.json')}
    loop={false}
    autoPlay={false}
    progress={0} 
    style={{ width: 150, height: 150 }}
  />

명시 적 애니메이션 제어

애니메이션은 참조를 통해 액세스 할 수있는 LottieView 구성 요소에 연결된 명령형 API 메서드 로 제어 할 수 있습니다. 이 예제는 기능적 구성 요소를 다루기 때문에 useRef후크를 사용하고 애니메이션에 대한 참조를 생성 해 보겠습니다 .

// using useRef to control lottie animation
import React, { useRef } from 'react'
import LottieView from 'lottie-react-native'
export const LottieAnimation = (props) => {
  const homeAnimation = useRef();
const playAnimation = () => {
    homeAnimation.current.play(2, 18);
  }
const pressAnimation = () => {
    homeAnimation.current.play(0, 1);
  }
return (
    <LottieView
      source={require('./lottie/home.json')}
      loop={false}
      autoPlay={false}
      progress={0} 
      style={{ width: 150, height: 150 }}
      ref={homeAnimation}
    />
  )
}

위의 코드는 또한 잔물결 애니메이션 (프레임 2-18)을 재생하고 아이콘을 눌렀을 때 눌린 상태 (프레임 1)를 재생하는 두 개의 핸들러 함수를 정의합니다. LottieView구성 요소는 누르기 이벤트를 지원하지 않으므로 같은 부품으로 포장 TouchableOpacity, TouchableHighlight또는 새로운 Pressable구성 요소.

reset()메서드는 애니메이션의 진행률을 0으로 재설정합니다. 그렇지 않으면 애니메이션이 재생 된 마지막 프레임에 유지됩니다. 애니메이션을 재설정하려면을 homeAnimation.current.reset()호출해야합니다.

은 "만질"구성 요소와는 달리, Pressable그와 지원보다 세분화 된 터치 컨트롤 onPressIn, onPressOutonLongPress이벤트. 눌린 상태에서 아이콘을 표시하고 스탠드 탭 동작 onPressIn을 위해 호출하는 pressAnimation()데 사용 합니다 onPress.

<Pressable
  onPressIn={() => pressAnimation()}
  onPress={() => playAnimation()}
>
  <LottieFiles
    ...
   />
</Pressable>

색상 필터 및 테마

아직 다루지 않은 또 다른 중요한 고려 사항이 있는데, 그것은 앱의 테마에 맞게 아이콘 모양의 색상을 전환하는 것과 관련이 있습니다. 이것은의 colorFilters 소품으로 수행됩니다 LottieView.

이 소품에 각 모양을 개별적으로 색칠하는 필터 배열을 제공하는 다음 스 니펫을 확인하십시오. 아이콘 레이어는 After Effects 의 HomeAll 컴포지션에 보관되어 있습니다 .

// supplying color filters to a lottie animation
<LottieView
  source={require('../../img/tabs/home.json')}
  ...
   colorFilters={
    [
      {
        keypath: "HomeAll.House",
        color: theme.priBg,
      },
      {
        keypath: "HomeAll.Roof",
        color: theme.darkBg,
      },
      {
        keypath: "HomeAll.Chimney",
        color: theme.priBg,
      },
    ]
  }
/>

모든 도형 (또는 도형의 하위 집합)에 같은 색상을 지정하려면 별표를 사용하면됩니다.

// apply the same colour to all layers within `HomeAll`
colorFilters={[
  {
    keypath: "HomeAll.*",
    color: theme.secBg,
  }
]}

Lottie Files에서 일부 애니메이터는 레이어 계층 구조를 색상 필터링과 일치하지 않는 것으로 간주합니다. 테마는 이제 앱 디자인의 필수 부분이므로 그래야합니다. 그럼에도 불구하고 잘못 설계된 애니메이션과 직관적이지 않은 레이어 이름을 발견 할 수 있습니다. 이는 제 경험에서 흔히 볼 수 있습니다.

색상 필터가 작동하지 않는 "nm"경우 JSON 파일 의 속성을 확인 하십시오. 이러한 속성에는 레이어 이름이 포함되어 있으며 애니메이션 구조에 대한 지침을 제공합니다.

컬러 필터는 애니메이션의 "nm"속성 값을 참조합니다.

이제 홈 아이콘 애니메이션 구현을 마쳤습니다! 독자는 이제 Lottie 애니메이션 제작 과정과 자신 만의 방식으로 시작하는 방법을 잘 이해하게 될 것입니다.

요약하자면

이 기사에서는 벡터 아트 워크를 쉽게 만드는 데 사용되는 Lottie 에코 시스템과 널리 사용되는 소프트웨어 도구를 살펴 보았습니다. 그런 다음 After Effects에서 가져오고 애니메이션 할 수 있습니다.

우리는 대화 형 홈 아이콘 형태로 Lottie 애니메이션의 구현 프로세스를 살펴 보았습니다. 복잡한 SVG는 집의 각 구성 요소 (본체, 지붕 및 굴뚝)에 해당하는 레이어로 분리되었습니다. 잔물결 효과에 마스크를 적용하여 잔물결을 집 모양 자체로 제한했습니다. 이렇게하려면 기본 마스크 경계 상자에 정점을 추가하고 그 모양을 집 모양과 일치하도록 조작해야했습니다.

Lottie의 React Native 측면도 다루었습니다. 여기서 내 보낸 하우스 애니메이션은 React Native 구성 요소에 포함되고 Pressable구성 요소와 LottieView구성 요소의 명령형 API 메서드 를 통해 제어됩니다 . 각 애니메이션 모양에 채우기 색상을 전달할 수있는 메커니즘 인 색상 필터도 고려되었습니다. 이것은 앱을 테마로 할 때 매우 유용합니다.

Suggested posts

JavaScript 테스트의 기초

JavaScript 테스트의 기초

"잠깐만 요, JavaScript 테스팅에 대한 또 다른 기사"라고 생각할 수 있습니다. 예, JavaScript 테스트의 기본 사항에 대해 더 많이 이야기하고 싶은 이유는이 주제에 대한 많은 기사가 JavaScript 테스트를 작성하기위한 코드 스 니펫과 도구를 보여줌으로써 매우 유사한 방식으로 작성 되었기 때문입니다.

Big-O 렌즈를 통한 Javascript의 배열 및 객체 성능

Big-O 렌즈를 통한 Javascript의 배열 및 객체 성능

프로그램의 효율성은 요소의 검색, 정렬, 액세스, 삽입 및 제거와 같은 작업을 수행하기 위해 엄청난 양의 데이터를 처리 할 때 시간 복잡성에 직접적으로 의존합니다. 성능 향상의 필요성에 따라 객체와 배열을 선택적으로 사용할 수 있습니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.