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

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

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"

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', ??????); 
    } 
});

来源

2017-02-14 lolol

-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); 
 
    } 
 
});

来源

2017-02-14 14:03:29 Rycochet

请注意，负数作为字符串的一部分被窃听，直到速度1.4.3 – Rycochet

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

如果不是，您可以自己尝试这样做，将路径字符串分解为数组。

在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

来源

2017-02-14 14:48:02 Ian

对不起 - 不得不downvote - 我增加了速度来处理与字符串>字符串动画几个月的能力之前，我无法访问文档以将其添加到那里。请参阅https://github.com/julianshapiro/velocity/issues/697 – Rycochet

https://github.com/julianshapiro/velocity/commit/7b196f548a27bdbd909e0d82cf89f8ed8c427edf - 尽管自那以后出现了一些修补程序。将我的示例粘贴到JSFiddle示例中（并使其登录到控制台）可以很好地适用于这些值：https：//jsfiddle.net/jgmxy0yc/ - 首先打开控制台... – Rycochet

没有'downvote' ，但由于你是速度代码的作者，我当然尊重它:)。尽管如此，我依然认为我的答案是“有用的”，所以按照SO的要求，找到一个有点苛刻的downvote，但是生活很短暂:)。请注意，我认为您的示例不适用于从正面过渡到负面（但我可能是错误的），所以我认为仍然有一个自定义替代方法很有用。 – Ian

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

回答

相关问题