CODEWITHSUNDEEP
javascriptsvgraphael
Mike
Mike

Reputation: 5836

How to combine image and vector animation in Raphael

I'm trying to animate some stuff with R. So i got a PNG which i can animate, but i want to put a circle around the PNG and animate the two as one.

I know one can do it with a set like:

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)
);

and then:

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

...but thats anoying cause of the differences in the attribs of the both elements.

Does someone has a hint what would be a good way to start with? Thanks!

Upvotes: 1

Views: 1418

Answers (1)

basecode
basecode

Reputation: 1510

In my understanding a paper.set is able to handle animations like

this.ship.animate(...)

otherwise you shouldn't use paper.set in this case. i suggest to use animateWith

see: http://raphaeljs.com/reference.html#animateWith

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

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

Upvotes: 1

Related Questions