Воскресенье, 16 июля 2023 18:52

Анимация Lazy Line Painter на ReactJS

Оцените материал
(0 голосов)

Сходу уточню: не только на реакте, но и, к сожалению, на jQuery. Проект Lazy Line Painter, по всей видимости, сегодня скорее мертв, чем жив... был у меня неплохой эскиз, сформированный из svg посредством генератора на страничке проекта; увы, нет уже ни странички, ни генератора. Последняя версия Lazy Line Painter доступна и не требует jQuery, но обратной совместимости у нее опять-таки нет... плюнул, решил не заморачиваться и работать со старым кодом: уже без raphael.js (с чего все начиналось), но еще с jQuery. Итак.

В качестве анимированного фона использован vanta.js: код компонента можно взять с этой странички (ничего критично не поменялось), рассмотреть приложение целиком - в репозитория гитхаба Lazy-Line-Painter-React-App (там, правда, бэкграунд сделан на tsParticles, но какая, по большому счету, разница). Здесь же - что касается Lazy Line Painter v.1.7.0...

 

Увидеть на гитхабе.

 

Все, в общем, несложно. Для использования в CRA этим двум файлам - jquery.lazylinepainter-1.7.0.js и собственно коду приложения (обзовите как хотите) придадим следующую обертку, не забыв импортировать jQuery:

 

import jQuery from "jquery";
jQuery(document).ready(function($) {

....
});

 

Далее:

App.js

import React from "react";
import "./App.css";
import "./jquery.lazylinepainter-1.7.0_modified";
import "./painter";
import WavesComponent from "./components/WavesComponent";

function App() {

  return (
    <WavesComponent>
    <div className="App">
        <div id="content_lazy">
          <div id="lazy"></div>
        </div>
    </div>
    </WavesComponent>
  );
}

export default App;

 

App.css

.App {
    min-height: 30em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#content_lazy {
    width: 50%;
}

 

Вроде все...  результат перед вами.

Последнее изменениеПонедельник, 17 июля 2023 06:05

Оставить комментарий

Добавьте ваш комментарий