I am trying to move three circles, after they gradually fade in, to the top left of the page so that they overlap on a box. At the moment, I set a timeout, but it only works for the first circle and the movement is really fast. How can I move them all as a group and slow down the movement?

1 Answer
1

KineticJS has a great transitionTo() function which you can call. It can animate any numerical property, like position or opacity. I created a fiddle to show this, as setTimeout is a bit of an ancient function compared to what is built into the browsers nowadays with RequestAnimationFrame (all major browsers implement this nowadays and KineticJS has a built in fallback like most other libraries do)

I cleaned up your code a little, removing comments and added an extra circle, for fun.

but really all you need is:

myShape.transitionTo({shape configuration, duration});

For example:

circle.transitionTo({
x: box.getX(), //coordinates to transition to
y: box.getY(),
opacity: 1,
duration: 1 // length of time for this animation in seconds, REQUIRED for animation to work
});

I can't stress how much of a pain I think setTimeout is, but it does get the job done in many cases for simple tasks. Is there a reason that you are using setTimeout other than trying to do transitions on your own?
–
SoluableNonagonJan 15 '13 at 15:40

Hi thanks a lot for your great help. I am a newby, so there is no specific reason why I am using setTimeout. I have only just started so I was unaware fo the transitionTo function. Thanks a lot for your help ;)
–
user1977156Jan 15 '13 at 16:02

If this answer solved your problem, could you mark it as correct?
–
SoluableNonagonJan 15 '13 at 16:38