Как совместить изображение и векторную анимацию в Рафаэле

Question

Я пытаюсь оживить некоторые вещи с помощью R. Таким образом, у меня есть PNG, который я могу анимировать, но я хочу поместить круг вокруг PNG и анимировать их как одно.

Я знаю, что это можно сделать с помощью набора:

this.ship = paper.set();
this.ship.push(
    paper.circle(116, 116, 20).attr("fill", "#ff0"),
    paper.image("assets/img/ship.png", 100, 100, 32, 32)
);

и затем:

{
this.ship[i].animate ...
}

... но это раздражающая причина различий в свойствах обоих элементов.

Есть ли у кого-нибудь подсказка, с чего начать? Спасибо!

Answer 1

В моем понимании paper.set умеет обрабатывать анимации вроде

this.ship.animate(...)

в противном случае вы не должны использовать paper.set в этом случае. Я предлагаю использовать animateWith

см .: http://raphaeljs.com/reference.html#animateWith

var img = paper.image(...);
var circle = paper.circle(...);

img.animate({...}, 2000);
circle.animateWith(img, {...}, 2000);