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...