react native의 로티 애니메이션

이 자습서는 동영상으로도 사용할 수 있으며 유튜브에서 볼 수 있습니다.
Lottie는 웹 사이트와 응용 프로그램을 위해 경량급, 신축 가능한 애니메이션을 개발하는 간단한 방법이다.
로티Introduced in 2017는 에어뱅크에 인수된 적이 있다.당시 프로그램에 애니메이션을 추가하는 것은 쉬운 일이 아니었다. 엔지니어가 수동으로 애니메이션을 다시 만들어야 사용할 수 있기 때문에 코드가 지루하고 유지하기 어려웠다.또 다른 선택은gif나 동영상을 추가해서 애니메이션을 바꾸는 것이다. 이것은 프로그래밍보다 못하며, 패키지의 크기도 커진다.

"After Effects animations in real time, and allows native apps to use animations as easily as they use static assets." - Airbnb engineering, 2017

Adobe의 JSON 형식에서 Lottie 애니메이션 효과를 직접 내보냅니다.이것은 Bodymovin라는 이름의 AE(후효) 확장 덕분입니다.
이 덕분에 응용 프로그램은 힘든 비용을 다시 쓰지 않아도 훌륭한 애니메이션을 만들 수 있다.
하지만 그만하고 로티와 함께 뭔가를 해보자. 그러면 실천에서 그 신기함을 이해할 수 있을 거야.

우리 뭐 짓고 있어?

이런 경외심을 불러일으키는 상호작용은 우리가 오늘 세워야 할 것이다.클릭하면 점점 착색되고 채워집니다.만약 그것이 이미 클릭되었다면, 우리는 반대 방식으로 애니메이션을 실행하여 심장을 공백의 초기 상태로 회복할 것이다.

선결 조건

이 자습서를 성공적으로 완료하려면 다음이 필요합니다.

Node

React Native's CLI

부팅

우리가 해야 할 첫 번째 일은react 본체 프로젝트를 만드는 것입니다. 따라서 선택한 폴더로 이동하여 새로운react 본체 프로그램을 초기화하는 것입니다.나는 나의 신청을 "Lotteuto"라고 명명할 것이지만, 너는 마음대로 너의 신청을 불러도 된다

npx react-native init lottieTuto

프로그램을 만든 후 내비게이션을 하고 다음 의존항을 설치합니다

로티 렉프

로티 이오스

다음 명령을 사용하여 실을 사용하여 이 작업을 수행할 수 있습니다.

yarn add [email protected] lottie-react-native

또는 다음 명령을 사용하여 npm와 함께 설치할 수 있습니다

npm i --save [email protected] lottie-react-native

애니메이션 찾기

Lottie Files에는 iSense 무료 애니메이션 디렉터리가 포함되어 있으며, 사용자가 사용하기에 적합한 애니메이션을 검색할 수 있습니다.
오늘 우리는 this one을 사용할 것입니다. 그러나 천천히 하세요. 롯데 파일이 제공하는 멋진 애니메이션이 당신을 즐겁게 합니다.

선택한 애니메이션의 페이지에서 다운로드 단추를 누르고lottie json 옵션을 선택하십시오.
이전에 만든 프로그램에서 assets라는 폴더를 만들고 다운로드한 파일을 저장합니다.

이제 드디어 프로그램 작성에 필요한 모든 것이 생겼습니다.

코드 업데이트

내부 응용 프로그램.js, 다음 코드의 기본 코드 바꾸기

//App.js

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

const App = () => {
  return (
    <View style={styles.styles}>
      <Text>Hello Lottie!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  main: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

이제 사용할 기본 코드가 생겼으니 의존항을 가져올 때가 되었다.

롯데뷰

자산 폴더의 애니메이션

기존

<Text>Hello Lottie!</Text>

가지다

//App.js
<LottieView source={like} />

이러한 변경 후에, 당신의 코드는 아래와 같아야 합니다

//App.js
import React from 'react';
import {View, StyleSheet} from 'react-native';
import LottieView from 'lottie-react-native';
import like from './assets/like.json';

const App = () => {
  return (
    <View style={styles.styles}>
      <LottieView source={like} />
    </View>
  );
};

const styles = StyleSheet.create({
  main: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Warning: sometimes when you add LottieView into your code, it breaks your application. If this is happening to you all that you gotta do is reload your app and the error shall disappear

지금 저희가 다운로드한 파일을 보셨을 거예요.

하지만 우리 애니메이션은 아직 애니메이션이 없다.

파일의 애니메이션 설정

우리는 스포일러 파일의 애니메이션을 만드는 방법이 매우 많다.우리가 오늘 사용할 방법은 진도 도구를 사용하는 것이다.
progress 도구에 필요한 값 범위는 0(애니메이션의 시작을 표시함)에서 1(애니메이션의 끝을 표시함)이다.
우리가 해야 할 일은 특정한 시간 범위 내에서 안정적인 속도로 이 값을 업데이트해서 우리의 러투 파일을 애니메이션으로 만드는 것이다.
고맙습니다. React native의 애니메이션 모듈이 이런 행위를 처리해 주었습니다.
그것을 사용하려면 두 가지 물건을 가져와야 한다

useRef-react

에서

애니메이션 - react native

에서
이 두 가져오기를 완료하면 다음 상수를 생성합니다

const progress = useRef(new Animated.Value(0)).current;

Why are we using useRef ?

매번 구성 요소를 다시 렌더링하는 것이 아니라 애니메이션 값을 한 번 만들기를 원하기 때문에useRef는 이런 상황에 매우 적합합니다.
progress의 값을 업데이트하기 위해 함수를 만들어야 합니다

//App.js
const handleLikeAnimation = () => {
    Animated.timing(progress, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

우리는 이 함수에서 도대체 무엇을 했습니까?
응, 애니메이션.타이머 기능은 특정한 시간 범위 내에서 안정적인 속도로 우리의 값을 한 값에서 다른 값으로 업데이트하는 것을 책임진다.
그것은 두 개의 매개 변수를 받아들인다. 첫 번째는 업데이트 중인 값이다.이 값은 애니메이션이어야 합니다.가치관.
두 번째 매개변수는 이 세 속성을 포함해야 하는 객체입니다.

toValue--당신의 최종 가치

기간 - 원시 값에서 최종 값

까지 소요 시간

useNativeDriverCheck the docs(이건 너무 복잡해서 한 줄로 설명할 수 없어요.😅

LottieView를 Touchable Opacity에 포장해야 합니다. LottieView 자체는 클릭할 수 없기 때문에handle Like Animation Function을 호출하는 방법이 필요합니다.
이 모든 변경 후에, 우리의 코드는 이렇다

import React, {useRef} from 'react';
import {View, StyleSheet, Animated, TouchableOpacity} from 'react-native';
import LottieView from 'lottie-react-native';
import like from './assets/like.json';

const App = () => {
  const progress = useRef(new Animated.Value(0)).current;

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

  return (
    <View style={styles.main}>
      <TouchableOpacity onPress={handleLikeAnimation} style={styles.opacity}>
        <LottieView progress={progress} source={like} />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  main: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  opacity: {
    width: 200,
    height: 200,
  },
});

export default App;

일단 우리가 이렇게 한다면, 우리가 우리의 심장을 클릭하면, 그것의 애니메이션은 촉발될 것이다.
마지막 한 가지가 없어졌어요.일단 우리의 애니메이션이 터치되면 다시 누르면 아무런 작용도 하지 않을 것이다
고맙게도 이것은 해결하기 쉽다.
이것은 우리의 초기 값이 0이기 때문에, 우리는 항상 그것을 1로 업데이트한다. 설령 그것이 이미 1이 되더라도.그래서 이 문제를 해결하기 위해서는 애니메이션 상태가 끝났는지 0을 시작했는지 확인하기만 하면 된다.
이것은 우리 응용 프로그램의 최종 코드이다

import React, {useRef, useState} from 'react';
import {View, StyleSheet, Animated, TouchableOpacity} from 'react-native';
import LottieView from 'lottie-react-native';
import like from './assets/like.json';

const App = () => {
  const progress = useRef(new Animated.Value(0)).current;
  const [hasLiked, setHasLiked] = useState(false);

  const handleLikeAnimation = () => {
    const newValue = hasLiked ? 0 : 1;

    Animated.timing(progress, {
      toValue: newValue,
      duration: 1000,
      useNativeDriver: true,
    }).start();

    setHasLiked(!hasLiked);
  };

  return (
    <View style={styles.main}>
      <TouchableOpacity onPress={handleLikeAnimation} style={styles.opacity}>
        <LottieView progress={progress} source={like} />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  main: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  opacity: {
    width: 200,
    height: 200,
  },
});

export default App;

이것이 오늘의 주제다.나는 정말 이 문장이 너에게 도움이 되기를 바란다
이 강좌를 좋아하신다면 제 유튜브 채널을 구독하는 것을 고려해 주십시오.
트위터에서 나를 주목하라: