CODEWITHSUNDEEP
javascriptjqueryanimationraphael
countmora
countmora

Reputation: 37

How can I animate a moving circle to a bigger circle using Raphael?

I have a circle with x=50, y=30 and radius = 20. This circle should move in 1000 ms to a new position x=150, y=170 and radius = 30.

These are my objects:

paper.circle(50, 30, 20);
paper.newCircle(150, 170, 30);

Now I want to animate a movement, so it looks like the first circle moves to the second one but with a bigger radius.

Much like the first example here (click on the arrow) but it should have a bigger radius after the animation.

This should be pretty simple but I can not figure out how to do this.

Upvotes: 0

Views: 103

Answers (1)

Ian
Ian

Reputation: 13842

You can pass in an object to the animate method, and pass it a duration, like follows.

var c = paper.circle(50, 30, 20);
c.animate({ r: 30, cx: 150, cy: 170 }, 1000);

Upvotes: 2

Related Questions