是否可以使用 Velocity.js 变形 SVG 的路径？

Question

是否可以使用 Velocity.js 变形 SVG 的路径？

来自 "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

编辑：请注意，我是 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

编辑：Velocity 内置了一些字符串动画支持，请参阅下面的 Rycochets 回答。

如果没有，您可以自己尝试，将路径字符串分解为一个数组。

一种方法是在polyfill 使用路径数据polyfill（因为Chrome 已弃用该功能以便轻松访问数组点）。然后你可以通过路径点进行类似于下面的循环并进行插值。

您也可以尝试使用一些正则表达式来拆分然后构建备份，一个简单的示例可能类似于以下内容。它可能不完整（我还没有真正测试过正则表达式，如果有一些我没有想到的字符，你可能会得到不同数量的元素）。

$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