Ist es möglich, SVG-Pfade mit Velocity.js zu morphen?

Question

Ist es möglich, SVG-Pfade mit Velocity.js zu morphen?

VON "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"

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: Bitte beachten Sie, ich der Autor des Codes bin, dass dies im Jahr 2016 aktiviert, so dass es die offiziellen Weg, es zu tun unterstützt wird!

Fast, sollte wie folgt sein:

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 hat eine Schnur Animation Unterstützung eingebaut, siehe unten Rycochets beantworten.

Wenn nicht, können Sie es selbst versuchen, indem Sie die Pfadzeichenfolge in ein Array aufteilen.

Eine Möglichkeit ist die Verwendung des Pfaddaten-Polyfill (da Chrome diese Funktion verwehrt hat, um einen einfachen Zugriff auf die Array-Punkte zu ermöglichen) unter polyfill. Dann könntest du ähnlich wie unten durch die Pfadpunkte schleifen und interpolieren.

Sie könnten auch versuchen, einige Regex zu teilen und dann wieder aufzubauen, ein schnelles Beispiel könnte etwas wie das Folgende sein. Es ist wahrscheinlich nicht vollständig (ich habe die Regex nicht wirklich getestet, und Sie können unterschiedliche Anzahl von Elementen erhalten, wenn es einige Zeichen gibt, an die ich nicht gedacht habe).

$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