Адаптивный offset-path.
22 июня 2023 г.
Offset-path - это линия, по которой будет двигаться элемент, само движение задается в анимации через offset-distance.
Документация offset-path: https://developer.mozilla.org/en-US/docs/Web/CSS/offset-path
(Свойства offset-distance - которое используется для анимации движения по offset-path на момент написания не поддерживался браузерами Safari)
С использованием библиотеки Pathfit.JS
Этот способ хорошо справляется со своей задачей и не блокирует фронт расчетами.
Пока он не предназначен для React, я использовала решение из issue https://github.com/ccprog/pathfit/issues/5
В node modules нет необходимого конфига, поэтому я
- склонировала к себе репозиторий pathfit,
- установила rollup npm i rollup
- в файле rollap.config.js поменяла iife на umd
- запустила npm run build
После можно добавлять js файл в свой проект (pathfit.js или pathfit.min.js) и импортировать из него Pathfit как модуль. Я добавила pathfit.js, чтобы добавить в него тернарный оператор.
Для того, чтобы мои блоки совпали с блоками path, я также использовала еще один svg, который вставила в блок контейнер со стилями fill none, stroke none, position absolute. Через него я рассчитывала размеры блоков в зависимости от ширины экрана. Если анимация не связана с версткой, это не потребуется.
Библиотека ссылка
Пример на codepen (от ccprog): https://codepen.io/ccprog/pen/QWjpgYP
С использованием библиотеки D3.JS
В этом методе используется библиотека d3js.
Команда установки: npm install d3
Импорт: import * as d3 from "d3";
Все варианты установки библиотеки:
https://github.com/d3/d3/blob/main/README.md#installing
Документация: https://github.com/d3/d3/wiki
Способ подходить как для ванильного JS, так и для React. С другими фреймворками не пробовала еще его использовать.
Как я поняла создание такой анимации - мы создаем динамический path, на основе размера первоначального svg, его vewBox и path. Затем помещаем динамически созданный path как scss переменную на элемент контейнер. Анимированный элемент получает offset-path как раз через эту переменную.
В процессе работы поняла следующее:
- Анимируемый элемент должен обязательно находится внутри контейнера, которому передаем path
- При больших размерах path, требует больших вычислений и тормозит фронт
- Чтобы все работало, у контейнера должны быть ширина и высота, для формирования динамического path мы берем у него offsetWidth и offsetHeight.
Источник: статья
Анимировать сам svg
Альтернативный способ. В своей анимации я использовала его отдельно для safari браузера.
(У меня плохо работал в faerfox, но если path короткая, то работает нормально)
Можно анимировать svg элемент с помощью <animateMotion> по path.
animateTransform - https://codepen.io/chriscoyier/pen/XJoxvj
В svg можно анимировать атрибуты svg элементов - c помощью <animate>
Документация svg https://developer.mozilla.org/en-US/docs/Web/SVG
Пример 1 https://svg-art.ru/?p=2142
Пример 2