Html SVG形状随值而非随时间变形

Html SVG形状随值而非随时间变形,html,animation,svg,snap.svg,Html,Animation,Svg,Snap.svg,我正在使用Javascript和snap.svg创建一个游戏 我以前使用snap.svg制作过很多界面和UI,并广泛使用了动画功能提供的tweening。这包括具有相同顶点数的两个形状之间的变形动画。问题是,我可以使用值而不是时间在两个SVG路径之间切换吗?我想通过输入我自己的插值值在两个形状之间变形,即:morphPATH_A,PATH_B,0.76,那么从A到B的方向应该是0.76 我觉得这个功能应该已经存在了,因为SVG的每一个时间步都是这样的?我如何访问这个下功能 尊敬的Dale,可能有

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

我以前使用snap.svg制作过很多界面和UI,并广泛使用了动画功能提供的tweening。这包括具有相同顶点数的两个形状之间的变形动画。问题是,我可以使用值而不是时间在两个SVG路径之间切换吗?我想通过输入我自己的插值值在两个形状之间变形,即:morphPATH_A,PATH_B,0.76,那么从A到B的方向应该是0.76

我觉得这个功能应该已经存在了,因为SVG的每一个时间步都是这样的?我如何访问这个下功能


尊敬的Dale,可能有几种不同的略显老套的方法可以做到这一点。可能最简单的方法是让动画缓和函数返回您想要的值,而不必费心包括持续时间。所以这看起来有点像下面的

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之间的值为开始/结束


有办法,但我已经很久没有玩过了。我认为关键点是动画的“状态”关键点,在“mina”方法/对象中也是“s”。如果我记得很清楚,我会更新的。你也可以通过传递一个自定义的放松来破解它,所以你不需要反弹或线性,只要传递一个返回0.76和最小持续时间的函数就可以了。进一步阅读,试着用Snap.animation创建一个动画对象,然后看看你是否可以调用myanimation.status0.76。你可以在SMIL中完成所有这些。这是一种非常有趣的方法。如果没有其他建议,我会把它标记为答案。谢谢: