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

Набирающий популярность семимильными шагами, плагин JavaScript, который предлагает грамотную работу анимации при превращении из одной фигуры в другую.

Допустим, вы хотите анимировать между двумя путями SVG или Canvas фигуры визуализации. Если вы подключите их координаты или укажите пути что-то вроде d3.transition(), это может сработать, если формы соответствуют друг другу очень хорошо — например, превращение треугольника в другие треугольники. Но как только ваши формы не соответствуют, вы получите непредсказуемые результаты странные завороты и резких скачков.

анимация примера

Цель этой библиотеки заключается в обеспечении оптимальной интерполяции для любых двух произвольных форм (или групп формы), что приводит к довольно плавной анимацией, без «глюков».

Использование библиотеки для плавной анимации SVG элементов

Инсталляция плагина:

Flubber ожидает либо строку пути SVG или массив [х, Y]:

Методы возвращают интерполяторы, функции, которые можно вызвать со значения от 0 до 1, чтобы вернуться в соответствующую форму, где 0 — начало анимации и 1 конец. Использование может выглядеть следующим образом:

На странице разработчика библиотеки также приведена информация об API. Там же можно найти множество визуальных примеров, которые можно скачать и со всем разобраться. Удачи!

В поисках шаблона для сайта?