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

时间:2017-04-28 13:05:48

标签: javascript svg svg-animate svg.js

我想使用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)));
}

有一些简单的解决方案吗?

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

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(start, end)这样的morphFn)

示例:

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)