Автор оригинала: Reed Barger.

Анимация может создать более привлекательный пользовательский опыт в наших реактивных приложениях.

Однако, чтобы хорошо выглядеть анимациями, может быть много работы и может потребоваться много кода.

Я собираюсь показать вам, как использовать очень мощную библиотеку с реагированием, чтобы сделать потрясающие, Pixel-Perfect Amizations, которые улучшают ваши приложения, без много работы.

Представляем библиотеку Lottie для реагирования

Библиотека, о которой я говорю, называется Лотти. Lottie обеспечивает совершенно другой способ создания впечатляющих анимаций с помощью анимаций, которые производится в популярной программе Adobe After Effects, которые импортируются и экспортируются как файлы JSON.

И лучше всего, чтобы найти и использовать эти анимации, вам не нужно иметь программу Adobe After Effects.

Как использовать Lottiefiles

Все, что вам нужно сделать, это использовать совершенно бесплатный ресурс под названием Лоттейл . Это сайт, который принимает тонны свободных и платных анимаций Лоти.

Допустим, мы хотим, что в нашем приложении мы хотим анимированный логотип RACT в нашем приложении (обратите внимание, что вы можете использовать любую анимацию, которую они создают).

Я лично выберу следующую анимацию реагирования от Lottiefiles, в которой Логотип React вращается Отказ Оттуда мы можем просмотреть его и менять такие вещи, как цвет фона.

Когда мы готовы его использовать, мы можем скачать файл JSON Animation, выбрав Lottie Json:

Независимо от того, как вы создали свой реагированный проект, вы можете поставить его в любую папку, которую вам нравится. Вы можете поместить его в статическую папку в корне вашего проекта, или вы можете поместить его в папку анимации в папке SRC.

Это зависит от вас, поскольку мы будем импортировать данные JSON из того, что может быть путь к файлу.

Я решил поставить свой файл JSON (под названием React-logo.json) в моей статической папке:

Как установить Lottie-Web

Как только это сделано, мы установим Lottie, приведя пакет Lottie-Web Отказ

npm i lottie-web

Обратите внимание, что имеется альтернативная упаковка Lottie, называемая React - Lottie , но он использует Lottie-Web Под капотом, который можно легко использовать непосредственно, как вы увидите в мгновение.

Однажды Lottie-Web Установлен, мы можем разместить нашу анимацию в любом элементе JSX, предоставив указание, что мы хотим жить в определенном селекторе.

Лучший способ сделать это, используя атрибут ID, поскольку его следует использовать только один раз в элементах нашего приложения.

В нашем случае мы могли бы дать ему значение ID React-logo :

// src/App.js
import React from "react";

export default function App() {
  return (
    

      
Hello World
      

    
  );
}

Использовать Lottie, мы можем импортировать его из Lottie-Web И мы импортируем JSON от того, куда бы мы разместили его:

// src/App.js
import React from "react";
import lottie from "lottie-web";
import reactLogo from "../static/react-logo.json";

export default function App() {
  return (
    

      
Hello World
      

    
  );
}

Как использовать Lottie с помощью крюка

Использование самого Лотте просто. Нам нужно получить ссылку на элемент JSX/DOM, который мы хотим поставить анимацию и дать ему данные JSON.

Чтобы взаимодействовать с самим домом, нам нужно будет убедиться, что компонент установлен, поэтому мы будем использовать Useffect Для выполнения побочного эффекта и пройти в пустой массив зависимостей.

В Useffect Теперь мы можем позвонить lottie.loadanimation Чтобы запустить нашу анимацию, передавая его объектом. На этом объекте первое, что нам нужно предоставить, это контейнер, узел DOM, который мы хотим, чтобы эта анимация была запущена.

Мы сможем использовать любой метод, который мы хотим ссылаться на узел DOM; Я лично буду использовать Документ. GTELEMENTYBYID («React-logo») Отказ

// src/App.js
import React from "react";
import lottie from "lottie-web";
import reactLogo from "../static/react-logo.json";

export default function App() {
  React.useEffect(() => {
    lottie.loadAnimation({
      container: document.querySelector("#react-logo"),
    });
  }, []);

  return (
    

      
Hello World
      

    
  );
}

И с этим контейнером нам просто нужно обеспечить саму данные JSON на недвижимость под названием анимациядата Отказ

// src/App.js
import React from "react";
import lottie from "lottie-web";
import reactLogo from "../static/react-logo.json";

export default function App() {
  React.useEffect(() => {
    lottie.loadAnimation({
      container: document.querySelector("#react-logo"),
    });
  }, []);

  return (
    

      
Hello World
      

    
  );
}

После этого вы должны автоматически видеть анимацию:

Если у вас есть тот же код, у меня есть, и у вас анимация работает в пустом Div, она будет выглядеть огромным.

Вы можете исправить это, предоставляя некоторые стили и добавляя фиксированную ширину и высоту для контейнера Div:

Свойства Lottie.loadanimation

Наряду с контейнером и анимациейdata, есть некоторые другие важные свойства, которые мы можем перейти к Полейнимация Чтобы изменить внешний вид анимации и функцию.

lottie.loadAnimation({
  container: document.querySelector("#react-logo"),
  animationData: reactLogo,
  renderer: "svg", // "canvas", "html"
  loop: true, // boolean
  autoplay: true, // boolean
});

Выше я включил все настройки по умолчанию для Полейнимация Отказ Путь по умолчанию анимация отображается так, как SVG, с рендерер имущество. Это имеет большинство функций, но опция HTML может быть более исполнительным и поддерживает 3D слои.

Петли анимации или повторяются бесконечно по умолчанию, потому что петля установлен на правду. Вы можете выключить это поведение, установив его на ложь.

Анимация Автозагрузка Настройка по умолчанию TRUE, что означает, что анимация будет воспроизводиться автоматически, когда она загружена. Если вы хотите условно запускать анимацию, вы можете установить его на TRUE или FALSE, используя переменную состояния (скажем, если вы хотите воспроизвести анимацию только тогда, когда она была видна).

Как добавить Lottie Light

Наконец, последнее, что я упомяну о Лотти, это то, что Lottie-Web довольно большая зависимость.

Если вы хотите использовать все его функции, но обеспокоены привлечением слишком большого количества кода в ваш окончательный пакет, вы можете импортировать легкую версию Lottie следующим образом:

import lottie from "lottie-web/build/player/lottie_light";

Окончательный код

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

Проверьте CodeSandbox Link Если вы хотите играть с окончательным кодом самостоятельно.

Наслаждайтесь этим постом? Присоединяйтесь к React BootCamp

React Bootcamp Занимает все, что вы должны знать о изучении реагирования и связки в один комплексный пакет, включая видео, обманывать, плюс специальные бонусы.

Получить инсайдерскую информацию сотни разработчиков уже использовалось для освоения реагирования, находить работу своей мечты и контролировать свое будущее:

Нажмите здесь, чтобы быть уведомленным, когда он открывается

Оригинал: “https://www.freecodecamp.org/news/how-to-animate-react-apps/”