SVG形状随时间而不是时间变形

Question

我正在使用Javascript和snap.svg创建游戏

我之前使用snap.svg制作了很多界面和UI，并广泛使用了animate函数提供的补间。这包括具有相同数量顶点的两个形状之间的变形动画。问题是，我可以使用值而不是时间在两个SVG路径之间进行补间吗？我想通过输入自己的插值来在两个形状之间进行变形：morph（PATH_A，PATH_B，0.76），那么从A到B的距离应为0.76。

我觉得此功能应该已经存在，因为这就是每步的SVG都在发生什么？我如何访问此下拉功能？

问候，戴尔

Answer 1

可能有几种不同的方法。可能最简单的方法是使动画缓动函数返回所需的值，而不必理会持续时间。因此，这看起来类似于以下内容...

var s = Snap("#svg");
var d1 = "M94.2,265.7L82,203.4c43.3-15.6,83.8-29.2,137.1-20.2c61.5-27.6,126.1-56.9,202.6 46.1c18.7,18.9,21.5,39.8,12.2,62.3C322.7,231.9,208.2,247.6,94.2,265.7z";

var d2 = "M179.4,83.5l62.4-11.8c15.3,43.4-76,102.6-22.6,111.5c61.5-27.6,126.1-56.9,202.6-46.1c18.7,18.9,21.5,39.8,12.2,62.3C250.6,296.7,52.4,259.2,179.4,83.5z"

var path = s.path(d1)

function animatePartial( val ) {
    var a = Snap.animation({ d: d2 }, 0, function(n) { return val })
    path.animate(a)
}

animatePartial(0.1)

setTimeout( function() { animatePartial(0.9) }, 1000 )

因此，上面的示例将跳转到动画的某个百分比，其中0/1之间的值为开始/结束。

jsfiddle