Набирающий популярность семимильными шагами, плагин JavaScript, который предлагает грамотную работу анимации при превращении из одной фигуры в другую.
Допустим, вы хотите анимировать между двумя путями SVG или Canvas фигуры визуализации. Если вы подключите их координаты или укажите пути что-то вроде d3.transition(), это может сработать, если формы соответствуют друг другу очень хорошо — например, превращение треугольника в другие треугольники. Но как только ваши формы не соответствуют, вы получите непредсказуемые результаты странные завороты и резких скачков.
Цель этой библиотеки заключается в обеспечении оптимальной интерполяции для любых двух произвольных форм (или групп формы), что приводит к довольно плавной анимацией, без «глюков».
Использование библиотеки для плавной анимации SVG элементов
Инсталляция плагина:
<script src="https://unpkg.com/flubber"></script>
Flubber ожидает либо строку пути SVG или массив [х, Y]:
"M100,100 L200,100 L150,200Z" // треугольник в виде пути [[100, 100], [200, 100], [150, 200]] // треугольник в виде координат
Методы возвращают интерполяторы, функции, которые можно вызвать со значения от 0 до 1, чтобы вернуться в соответствующую форму, где 0 — начало анимации и 1 конец. Использование может выглядеть следующим образом:
// Смешивания и сопоставления типов
var triangle = "M1,1 L2,1 L1.5,2 Z",
pentagon = [[0, 0], [1, 1], [3, 1], [2, 0.5], [0, 1]];
var interpolator = flubber.interpolate(triangle, pentagon);
requestAnimationFrame(draw);
function draw(time) {
var t = howFarAlongTheAnimationIsOnAScaleOfZeroToOne(time);
myPathElement.setAttribute("d", interpolator(t));
if (t < 1) {
requestAnimationFrame(draw);
}
}
На странице разработчика библиотеки также приведена информация об API. Там же можно найти множество визуальных примеров, которые можно скачать и со всем разобраться. Удачи!
