Creating animation sequences with the timeline

In this recipe, we will learn how to use the powerful timeline features of Cinder to create sequences of animations. We will draw a circle and animate the radius and color in a sequenced manner.

Getting ready

Include the necessary files to use the timeline, draw in OpenGL, and generate random numbers.

#include "cinder/gl/gl.h"
#include "cinder/Timeline.h"
#include "cinder/Rand.h"

Also, add the following useful using statements:

using namespace ci;
using namespace ci::app;
using namespace std;

How to do it…

We will animate several parameters sequentially using the timeline. Perform the following steps to do so:

  1. Declare the following members to define the circle's position, radius, and color:
    Anim<float> mRadius;
Anim<Color> mColor;
Vec2f mPos;
  2. In the setup method, initialize the members. Set the position to be at the center of the window, the radius as 30, and a random color using the HSV color mode.
    mPos = (Vec2f)getWindowCenter();
mRadius = 30.0f;
mColor = Color( CM_HSV, randFloat(), 1.0f, 1.0f );
  3. In the draw method, we will clear the background with black and draw the circle using the previously defined members.
    gl::clear( Color::black() ); 
gl::color( mColor.value() );
gl::drawSolidCircle( mPos, mRadius.value() );
  4. Declare the mouseDown event handler.
      void mouseDown( MouseEvent event );
  5. In the implementation of mouseDown, we will apply the animations to the main timeline.

    We will first animate mRadius from 30 to 200 and append another animation to mRadius from 200 to 30.

    Add the following code snippet to the mouseDown method:

    timeline().apply( &mRadius, 30.0f, 200.0f, 2.0f, EaseInOutCubic() );
timeline().appendTo( &mRadius, 200.0f, 30.0f, 1.0f, EaseInOutCubic() );
  6. Let's create a random color using the HSV color mode and use it as the target color to animate mColor and then append this animation to mRadius.

    Add the following code snippet inside the mouseDown method:

        Color targetColor = Color( CM_HSV, randFloat(), 1.0f, 1.0f );
timeline().apply( &mColor, targetColor, 1.0f, EaseInQuad() ).appendTo( &mRadius );

How it works…

Appending animations is a powerful and easy way to create complex animation sequences.

In step 5 we append an animation to mRadius using the following line of code:

timeline().appendTo( &mRadius, 200.0f, 30.0f, 1.0f, EaseInOutCubic() );

This means this animation will only occur after the previous mRadius animation has finished.

In step 6 we append the mColor animation to mRadius using the following line of code:

timeline().apply( &mColor, targetColor, 1.0f, EaseInQuad() ).appendTo( &mRadius );

This means the mColor animation will only occur when the previous mRadius animation has finished.

There's more…

When appending two different animations, it is possible to offset the start time by defining the offset seconds as a second parameter.

So, for example, change the line in step 6 to read the following:

timeline().apply( &mColor, targetColor, 1.0f, EaseInQuad() ).appendTo( &mRadius, -0.5f );

This would mean that the mColor animation would begin 0.5 seconds before mRadius has finished.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.12.76.164