In this chapter, we will learn the techniques of animating 2D and 3D objects. We will introduce Cinder's features in this field, such as timeline and math functions.
The recipes in this chapter will cover the following:
- Animating with the timeline
- Creating animation sequences with the timeline
- Animating along a path
- Aligning camera motion to a path
- Animating text – text as a mask for a movie
- Animating text – scrolling text lines
- Creating a flow field with Perlin noise
- Creating an image gallery in 3D
- Creating a spherical flow field with Perlin noise
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.
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;
We will create several parameters that will be animated with the timeline. Perform the following steps to do so:
- Declare the following members to be animated:
Anim<Color> mBackgroundColor; Anim<Vec2f> mCenter; Anim<float> mRadius;
- Initialize the parameters in the
setupmethod.mBackgroundColor = Color( CM_HSV, randFloat(), 1.0f, 1.0f ); mCenter = getWindowCenter(); mRadius = randFloat( 20.0f, 100.0f );
- In the
drawmethod, we need to clear the background using the color defined inmBackgroundColorand draw a circle atmCenterwithmRadiusas the radius.gl::clear( mBackgroundColor.value() ); gl::drawSolidCircle( mCenter.value(), mRadius.value() );
- To animate the values whenever the user presses the mouse button, we need to declare the
mouseDownevent handler.void mouseDown( MouseEvent event );
- Let's implement the
mouseDownevent handler and add the animations to the main timeline. We will animatemBackgroundColorto a new random color, setmCenterto the mouse cursor's position, and setmRadiusto a new random value.Color backgroundColor( CM_HSV, randFloat(), 1.0f, 1.0f ); timeline().apply( &mBackgroundColor, backgroundColor, 2.0f, EaseInCubic() ); timeline().apply( &mCenter, (Vec2f)event.getPos(), 1.0f, EaseInCirc() ); timeline().apply( &mRadius, randFloat( 20.0f, 100.0f ), 1.0f, EaseInQuad() );
The timeline is a new feature of Cinder introduced in version 0.8.4. It permits the user to animate parameters by adding them to the timeline once, and everything gets updated behind the scenes.
Animations must be objects of the template class ci::Anim. This class can be created using any template type that supports the + operator.
The main ci::Timeline object can be accessed by calling the ci::app::App::timeline() method. There is always a main timeline and the user can also create other ci::Timeline objects.
The fourth parameter in the ci::Timeline::apply method is a functor object that represents a Tween method. Cinder has several Tweens available that can be passed as a parameter to define the type of animation.
The ci::Timeline::apply method used in the preceding example uses the initial value of the ci::Anim object, but it is also possible to create an animation where both the begining and end values are passed.
For example, if we wanted to animate mRadius from a starting value of 10.0 to the end value of 100.0 seconds, we would call the following method:
timeline().apply( &mRadius, 10.0f, 100.0f 1.0f, EaseInQuad() );
- To see all the available easing functions, please refer to the Cinder documentation, located at http://libcinder.org/docs/v0.8.4/_easing_8h.html.