Question

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

这 <center>![My caption](myImage.png)</center>

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

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

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

2 个答案: