Анимация искривленного движения объекта с помощью 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) элемент переместится в позицию 100,100 за 1 секунду. Однако, если вы хотите использовать свою собственную функцию, вы должны слушать 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)