DevGang
Авторизоваться

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

Создание красивых анимаций - одна из самых сложных задач для разработчика Frontend. Решением этой проблемы является использование некоторой супер простой в использовании библиотеки, такой как MoJS. В этой статье мы узнаем, как использовать MoJS с React для создания супер классных анимаций.

Что такое MoJS?

MoJS - это не что иное, как библиотека на основе JavaScript, которая используется для создания классных анимаций. Причина, по которой MoJS так популярен, заключается в том, что он супер быстрый и имеет возможность retina ready и открытый исходный код.

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

Используйте MoJS с React

Чтобы использовать Emojis с React, нам нужно сначала установить пакет.

npm i @mojs/core --save

После установки нам нужно импортировать наши mojs в наш файл.

import mojs from '@mojs/core'

Для отображения анимации нам понадобится пустой div.

 render() {
    return <div id="test" />;
  }

В componentDidMount мы можем поместить наш анимационный код.

  componentDidMount() {
    new mojs.Shape({
      parent: "#test",
      shape: "circle",
      fill: { "#F64040": "#FC46AD" },
      radius: { 20: 80 },
      duration: 2000,
      isYoyo: true,
      isShowStart: true,
      easing: "elastic.inout",
      repeat: 1
    });
  }

Наш полный компонент будет выглядеть так

import React, { Component } from "react";
import mojs from "@mojs/core";
import "./styles.css";

export default class App extends Component {
  componentDidMount() {
    new mojs.Shape({
      parent: "#test",
      shape: "circle",
      fill: { "#F64040": "#FC46AD" },
      radius: { 20: 80 },
      duration: 2000,
      isYoyo: true,
      isShowStart: true,
      easing: "elastic.inout",
      repeat: 1
    });
  }
  render() {
    return <div id="test" />;
  }
}

Теперь вы сможете увидеть этот пользовательский интерфейс на своей веб-странице.

Теперь вы заметите, что анимации пока не показаны. Чтобы показать анимацию, нам нужно активировать функцию воспроизведения.

Мы можем хранить нашу анимацию в переменной.

Подобно этой

  const animation = new mojs.Shape({
      parent: "#test",
      shape: "circle",
      fill: { "#F64040": "#FC46AD" },
      radius: { 20: 80 },
      duration: 2000,
      isYoyo: true,
      isShowStart: true,
      easing: "elastic.inout",
      repeat: 1
    });

После этого мы можем просто использовать функцию play или replay.

animation.play();

Наш обновленный компонент будет выглядеть примерно так.

import React, { Component } from "react";
import mojs from "@mojs/core";
import "./styles.css";

export default class App extends Component {
  componentDidMount() {
    const animation = new mojs.Shape({
      parent: "#test",
      shape: "circle",
      fill: { "#F64040": "#FC46AD" },
      radius: { 20: 80 },
      duration: 2000,
      isYoyo: true,
      isShowStart: true,
      easing: "elastic.inout",
      repeat: 1
    });
    animation.play();
  }
  render() {
    return <div id="test" />;
  }
}

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

Источник:

#JavaScript #CSS #React #HTML
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

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

Попробовать

В этом месте могла бы быть ваша реклама

Разместить рекламу