Быстрая установка для Lottie с помощью React и React Native

Если вы здесь, то наверняка уже слышали о Лотти. Это отличный фреймворк от сотрудников AirBnB, который позволяет легко создавать легкие SVG-анимации в After Effects для использования в веб-приложениях и т. Д.

Вот как вы можете быстро настроить его как для React, так и для React Native, используя библиотеки react-lottie и lottie-react-native соответственно. Есть и другие способы использования Lottie, но мы сосредоточимся здесь только на этих двух библиотеках.

Это не касается того, как создавать анимацию Lottie в After Effects, но я буду рад подробно рассказать об этом процессе, если у вас есть какие-либо вопросы по этому поводу - не стесняйтесь оставлять мне комментарий ниже или связываться со мной в Twitter @atyreefinch. Даже если вы не заинтересованы в создании собственных анимаций, вы также можете бесплатно найти отличные анимации Lottie от великих художников на сайте LottieFiles.

Давайте сначала рассмотрим Lottie для React. В терминале npm install react-lottie (или yarn install, если хотите). Затем в компоненте, в котором вы хотите добавить анимацию, импортируйте его следующим образом:

import React from 'react'
import Lottie from 'react-lottie'
import animationData from 'path-to-your-lottie.json'

А вот и установка для рендеринга компонента Lottie. Объекты Lottie для react-lottie принимают одну опцию опций в качестве объекта и другие свойства, которые управляют воспроизведением лотов.

class ControlledLottie extends Component {
  state = {lottieStopped: false, 
            lottiePaused: false}

  render(){
   
    const options = {
      loop: true,
      autoplay: true, 
      animationData: animationData,
      rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice'
      }
    };

    return(
      <div >
        <Lottie options={options}
              height={400}
              width={400}
              isStopped={this.state.lottieStopped}
              isPaused={this.state.lottiePaused}
        />
       </div>
    )

И вы можете экстраполировать, как вы можете управлять запуском и остановкой анимации оттуда. Там также есть другие реквизиты для управления скоростью и другими параметрами воспроизведения. Например, чтобы изменить скорость, вы просто добавляете опору скорости следующим образом:

<Lottie options={options}
              height={400}
              width={400}
              speed={2}
        />

При скорости 2 анимация будет воспроизводиться с удвоенной скоростью, и вы, конечно, также можете динамически изменять это значение, используя состояние или свойства. Вы даже можете воспроизвести анимацию в обратном направлении с помощью опоры скорости, установив ее равной отрицательному значению. Вы можете узнать больше о react-lottie здесь или, в качестве альтернативы, заглянуть в другую библиотеку React Lottie, lottie-react-web.

Теперь перейдем к реализации Lottie в младшем брате React с lottie-react-native.

Сначала откройте свой проект и npm install lottie-react-native. Опять же, вы также можете использовать Yarn здесь или expo install lottie-react-native, если вы используете expo для разработки своего приложения.

Далее вам потребуется следующий импорт:

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

И настройте свой компонент, чтобы он выглядел примерно так:

export default class App extends React.Component {
playAnimation = () => {
    this.animation.play();
  };
render() {
    return (
      <View>
        <LottieView
          ref={animation => {
            this.animation = animation;
          }}
          style={{
            width: 400,
            height: 400,
          }}
          source={require('YOUR-PATH-HERE.json')}
        />
          <Button title="Play Animation" onPress={this.playAnimation} />
      </View>
    );
  }
}

Обратите внимание, что вместо импорта анимации, как в react-lottie, в этом случае мы будем использовать оператор require в нашем коде как опору источника. При желании вы можете обрабатывать это по-разному в разных фреймворках, но это обычно является условностью большей части кода, с которым вы столкнетесь для этих фреймворков. Как и компонент Lottie react-lottie, LottieView для lottie-react-native также принимает другие реквизиты, такие как скорость и логическое значение для цикла.

Вот и все! Woo для плавной, легкой анимации из After Effects в приложениях для телефона или планшета за считанные минуты!

Очевидно, это всего лишь вводная часть, но я надеюсь, что они помогут вам быстро освоиться с одним из этих фреймворков! Не стесняйтесь обращаться в любое время, если у вас есть какие-либо вопросы по поводу вышеизложенного.

Быстрая установка для Lottie с помощью React и React Native

Вопросы по теме