使用 svg.js 动画对象的弯曲运动

Question

我想使用 svg.js 为对象的曲线运动（无旋转）制作动画。但我找不到任何简单的解决方案来解决这个问题。我写了两个运行良好的小函数，但它不像普通动画那样运行，而且它在后台运行不完美。

我更喜欢这样的解决方案：

var draw = SVG("drawing").size(500,500);
var rect = draw.rect(50,50);
rect.animate().curvedmove(100,100);

我做的两个函数：

function animateJump(object,start,end,ampl,y,i=0){
    var speed = 25;
    var pos = 0;
    pos = start+i*((end-start)/speed);
    object.animate(1).move(pos,y+bounceFunction(start,end,ampl,pos));

    if (i <= speed){
        animateJump(object,start,end,ampl,y,i+1)
    }
}


function bounceFunction(a,b,c,x){
    return -1 * (x-a)*(x-b) * c * (4/((a-b)*(b-a)));
}

有什么简单的解决方法吗？

感谢您的帮助！

Answer 1

animate 方法建立一个新的动画上下文，在其中运行您指定的计时器（默认为 1 秒）。因此，如果您执行el.animate().move(100,100)，该元素将在 1 秒内移动到位置 100,100。 但是，如果您想使用自己的函数，则需要监听 during 事件，该事件会及时为您提供从 0 到 1 的当前位置。

el.animate().during(function(pos, morphFn, easedPos) {
  this.move(pos, bounceFunction(pos))
})

请注意，pos 是一个介于 0 和 1 之间的值，因此直接将其设置为坐标并没有多大意义。您需要计算出我们移动的开始和结束值并自己计算（或使用 morphFn，如morphFn(start, end)）

例子：

var startX = 100
var endX = 300

var startY = 100
var endY = 300

el.animate().during(function(pos, morphFn, easedPos) {
  var x = morphFn(startX, endX)
  var y = SVG.morph(bounceFunction(pos))(startY, endY)

  this.move(x, y)
})

morphFn 默认绑定到当前位置。因此，如果您有自己的位置（例如使用自定义反弹函数时），您需要创建一个新的变形函数，您可以使用 SVG.morph 方法来完成。此方法需要一个位置并返回一个绑定到该位置的变形函数。

所以这将是相同的：

  var x = SVG.Morph(pos)(startX, endX)
  var y = SVG.Morph(bounceFunction(pos))(startY, endY)