Animating with the timeline

In this recipe, we will learn how we can animate values using Cinder's new feature; the timeline.

We animate the background color and a circle's position and radius whenever the user presses the mouse button.

Getting ready

Include the necessary files to use the timeline, generate random numbers, and draw using OpenGL. Add the following code snippet at the top of the source file:

#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 create several parameters that will be animated with the timeline. Perform the following steps to do so:

1. Declare the following members to be animated:

   Anim<Color> mBackgroundColor;
   Anim<Vec2f> mCenter;
   Anim<float> mRadius;

2. Initialize the parameters in the setup method.

   mBackgroundColor = Color( CM_HSV, randFloat(), 1.0f, 1.0f );
   mCenter = getWindowCenter();
   mRadius ...