Можно ли преобразовать пути SVG с помощью Velocity.js?

Question

Можно ли преобразовать пути SVG с помощью Velocity.js?

ОТ "M292,129c55.2,0,193,125.8,193,181S365.7,506,310.5,506S136,355.2,136,300S236.8,129,292,129z"

К "M230,38c55.2,0,348,57.8,348,113S391.2,569,336,569S55,456.2,55,401S174.8,38,230,38z"

var path = document.querySelectorAll('svg path'); 

Velocity(path[0], { 
    tween: 1000 
}, { 
    duration: 6000, 
    easing: 'easeOutBounce', 
    progress: function (el, c, r, s, t) { 
     el[0].setAttribute('d', ??????); 
    } 
}); 

Answer 1

EDIT: Пожалуйста, обратите внимание, я являюсь автором кода, который позволил это в 2016 году, так что это официальная поддерживается способ сделать это!

Почти, должно быть что-то вроде этого:

var path = document.querySelectorAll('svg path'), 
 
    from = "M292,129c55.2,0,193,125.8,193,181S365.7,506,310.5,506S136,355.2,136,300S236.8,129,292,129z", 
 
    to = "M230,38c55.2,0,348,57.8,348,113S391.2,569,336,569S55,456.2,55,401S174.8,38,230,38z"; 
 

 
Velocity(path[0], { 
 
    tween: [to, from] 
 
}, { 
 
    duration: 6000, 
 
    easing: 'easeOutBounce', 
 
    progress: function(elements, complete, remaining, start, tweenValue) { 
 
     elements[0].setAttribute('d', tweenValue); 
 
    } 
 
});

Answer 2

Edit: Velocity имеет некоторую строку анимации встроенную поддержку в см Rycochets ответ ниже.

Если нет, вы можете попробовать сделать это самостоятельно, разбив строку пути на массив.

Одним из способов может быть использование полиполя данных пути (поскольку Chrome устарел, чтобы обеспечить легкий доступ к точкам массива) на polyfill. Затем вы можете выполнить петлю, подобную ниже, через точки пути и интерполировать.

Вы также можете попробовать использовать некоторое регулярное выражение для разделения, а затем построить резервную копию, быстрый пример может быть примерно следующим. Вероятно, это не совсем (я не тестировал регулярное выражение, и вы можете получить различное количество элементов, если есть некоторые символы, о которых я не думал).

$velocity=$("#mypath"); 

var fromPath = "M292,129c55.2,0,193,125.8,193,181S365.7,506,310.5,506S136,355.2,136,300S236.8,129,292,129z"; 
var toPath = "M230,38c55.2,0,348,57.8,348,113S391.2,569,336,569S55,456.2,55,401S174.8,38,230,38z"; 

var re = /(([+-]?[0-9\.]+)|[a-z]|\s+)([eE][-+]?[0-9]+)?/gi 

var fromMatch = fromPath.match(re) 
var toMatch = toPath.match(re) 

$velocity.velocity(
    { opacity: 0.5, tween: [0,1] }, 
    { progress: function(el, complete, remaining, start, tweenValue) { 
     var interpPath = ''; 
     for(c=0; c<fromMatch.length; c++) { 
     if(!isNaN(fromMatch[c])) { 
      interpPath += (toMatch[c] - fromMatch[c]) * tweenValue + +fromMatch[c] 
     } else { 
      interpPath += toMatch[c] 
     } 
     } 
     el[0].setAttribute('d', interpPath) 
    } } 
) 

jsfiddle