Skip to content

Animation

Jump to bottom
aspiringLich edited this page Jan 16, 2023 · 11 revisions

Animations

Now that you've got some graphics on the screen, you might want to make it a bit more dynamic. Lucky for you, there's a built in animation system that's simple™, easy™, and capable™.

To start assigning animations to an object, you first need to call .animate() on it.

Circle circle = new Circle(100, 100, 40).colorTo(Color.RED);
circle.animate().moveTo(100, 200);

Here's a quick overview of the relevant methods:

Method Description
add() Schedules the animation after previous animations have wrapped up
with() Schedules the nexy animation with the previous animation
wait() Schedules the next animations some amount of time after it normally would
schedule() Schedules the animation at some point in the future, with() and add() are unaffected

And here are the different animations you can use:

** !! TODO !! **

Method Description

Graphical Explanation

Now that probably wasn't very easy to understand, but hopefully this explanation will help:

Square square = new Square(0, 0, 40);

Imagine a timeline: +1 is 1 second into the future, +2 is 2 seconds into the future etc.

 
Square square = new Square(0, 0, 40);

square.animate()
    .add(moveTo(100, 0), 4);

Notice the two markers, NEXT and PREV. NEXT points to the end of the last animation, and prev points to the start of the last animation.

add() adds the animation after the NEXT marker (previously on NOW), and then the markers adjust for the next animation.

 
Square square = new Square(0, 0, 40);

square.animate()
    .add(moveTo(100, 0), 4)
    .add(colorTo(Color.RED), 4);

Now it should be obvious how you can keep chaining together add()'s into infinity and have all the animations play one after another, but just this does not allow you to run two animations in parallel. For that you need with().

 
Square square = new Square(0, 0, 40);

square.animate()
    .add(moveTo(100, 0), 4)
    .with(colorTo(Color.RED), 5);

As you can see, instead of adding the next animation after the NEXT marker, it adds it after the PREV marker. This makes it so both animations play at the same time.

Also note that the NEXT marker moved to accomodate the duration of with().

i'll do the rest later
Clone this wiki locally