Как использовать 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. Теперь вы можете попробовать все анимации или создать собственную самостоятельно.
