React, Redux и Svg-анимация, часть 1
Это практическая статья (включает в себя проект github, который вы можете клонировать) по основам использования компонентов React, Redux и Styled для создания анимации Awesome Svg.
Проект, который я сделал для этой статьи, поможет вам понять, как работать с react-redux и как использовать его для управления свойствами svg.
Эта статья для вас? В этом проекте я буду использовать: React, Redux, Svg и styled-components.
Если вы новичок в одной из этих технологий или имеете некоторый опыт работы с ними, я уверен, что вы найдете эту статью / проект ценным для вас.
Если вы React, Redux, Svg, Styled-components ниндзя, возможно, вы не найдете здесь чего-то нового.
Итак, вот моя короткая история о борьбе и «трате» времени на анимацию svg… (:
2 месяца назад я начал работать над новым проектом. Образовательное веб-приложение для детей.
Пока я работал на странице ленты я почувствовал, что там чего-то не хватает… Рисунки были красивыми, линии сетки были идеальными, но все же было немного скучно…
Я начал думать, как я могу сделать эту страницу более интересной? Итак, я начал делать анимацию css/js, и страница стала более реактивной и веселой.
но… это было не то, о чем я думал.
Итак… Впервые в жизни я сделал шаг в SVG-файлы (да, да… те файлы, которые вы получаете от дизайнеров и просто используете их в качестве другого изображения png/jpg в проекте, но счастливы, что они более легкие и векторные) и начали играть с кодом внутри.
В тот момент мне открылся новый мир. И в этой статье я постараюсь дать вам кусочек этого.
Что такое свг? svg — это «масштабируемая векторная графика». Хорошо… И другими словами?… А пока давайте просто скажем, что мы можем использовать один и тот же файл для рендеринга фигур/рисунков/логотипов разных размеров, и их качество останется прежним.
В проекте мы видим, как мы можем создать svg с нуля, используя только js, базовую структуру данных и 3 общих тега svg: ‹svg›(конечно), ‹g› и ‹path›.
‹g› для группировки элементов и ‹path› для создания фигур.
В проекте у нас есть 2 основных компонента: Loader.js и Triangle.js.
Все состояние этого приложения управляется через Redux.
Давайте начнем с создания формы Svg в нашем коде jsx.
Это очень просто. Мы можем использовать теги Svg в нашем коде jsx точно так же, как я сделал в файле загрузчика, где вы можете увидеть ‹svg›‹g›‹Triangle/›‹/g›‹/svg› (Triangle — это, по сути, путь).
элементу ‹path› мы можем передать свойство d, описывающее форму пути.
например: ‹path d=”M 0 60 L 30 0 L 60 60 Z”› нарисует треугольник.
(M 0 60) — начальная точка, (L 30 0) — вторая точка, (L 60 60) — это третья точка, а Z означает закрытие этой фигуры (проведите линию от последней точки к первой).
* Попробуйте немного поиграть с ней, прежде чем продолжить чтение.
Где здесь JavaScript??
Мы можем использовать js для создания более динамичных, реактивных и удобочитаемых путей.
Волшебство начинается со слова присоединиться!
мы можем взять эту строку: ‹path d=”M 0 60 L 30 0 L 60 60 Z”›
и сделать ее такой: ‹path d={['M', 0, 60, 'L' , 30, 0, 'L', 60, 60, 'Z'].join(" ")}›
что означает, что мы можем сделать такую функцию (получает точки и возвращает треугольник):
const Tri= ({p1X, p1Y, p2X, p2Y, p3X, p3Y}) =›
‹path d= {['M', p1X, p1Y, 'L', p2X, p2Y, 'L', p3X, p3Y, 'Z'].join(" ")}›
Теперь, если мы хотим создать 6 треугольников один в другом (как я сделал в проекте),
Мы можем сделать что-то вроде того, что сделал я в компоненте Loader.js.
Мы создаем самый большой треугольник, а затем пишем функцию (makeSmallerTriangle), которая получает координаты основного треугольника и число, указывающее коэффициент, на который мы хотим уменьшить новый треугольник по отношению к самому большому.
эта функция будет выглядеть примерно так:
const bigTriangleCoordinates =
{x1: 0, y1: 60, x2: 30, y2: 0, x3: 60, y3: 60}
const makeSmallerTriangle = (biggestTriangleCoordinates, shrinkSize) =› {
const newTriVertices = [[], [], []];
newTriVertices[0][0] = bigTriangleCoordinates. x1 + shrinkSize * 5;
newTriVertices[0][1] = наибольшие координаты треугольника.y1;
newTriVertices[1][0] = наибольшие координаты треугольника.x2;
newTriVertices[1][1] = bigTriangleCoordinates.y2 + shrinkSize * 10;
newTriVertices[2][0] = bigTriangleCoordinates.x3 -shrinkSize * 5;
newTriVertices[2][1] = bigTriangleCoordinates.y3;
return newTriVertices ;
}
const allOfMyTriangles = [];
for(let i=0;i‹6;i++){
allOfMyTriangles.push(makeSmallerTriangle(biggestTriangleCoordinates, i))
}
allOfMyTriangles будет содержать 6 массивов, каждый из которых содержит 3 массива по 2 числа в каждом (x,y).
allOfMyTriangles = [ [ [x1,y1], [x2,y2 ], [x3,y3] ],[…],[…],[…],[…],[…]].
теперь мы можем сделать:
allOfMyTriangles.map((vertices, index)=›
‹path fill={red} opacity={0.1} m={["m", vertices[0].join (" "), "L", vertices[1].join(" "),", L", vertices[2].join(" "), z"].join(" ")}/›
Теперь мы должны увидеть 6 треугольников на экране.
Я остановлюсь здесь для этой статьи и продолжу говорить о том, как использовать redux для управления нашим состоянием svg и анимации, о некоторых основах, посвященных styled-components, и о некоторых темах среднего уровня — продвинутых в styled-components.
Надеюсь, это было полезно для вас.
Репозиторий Git: https://github.com/nir-ne/react-redux-svg-animations
Спасибо за внимание и надеемся увидеть вас в следующей статье,
Нир Нехорай.
