flubber — новая библиотека для работы с анимацией 2-D фигур

Набирающий популярность семимильными шагами, плагин 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. Там же можно найти множество визуальных примеров, которые можно скачать и со всем разобраться. Удачи!

1189 просмотров