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:
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:
Anim<Color> mBackgroundColor; Anim<Vec2f> mCenter; Anim<float> mRadius;
setup
method.mBackgroundColor = Color( CM_HSV, randFloat(), 1.0f, 1.0f ); mCenter = getWindowCenter(); mRadius = randFloat( 20.0f, 100.0f );
draw
method, we need to clear the background using the color defined in mBackgroundColor
and draw a circle at mCenter
with mRadius
as the radius.gl::clear( mBackgroundColor.value() ); gl::drawSolidCircle( mCenter.value(), mRadius.value() );
mouseDown
event handler.void mouseDown( MouseEvent event );
mouseDown
event handler and add the animations to the main timeline. We will animate mBackgroundColor
to a new random color, set mCenter
to the mouse cursor's position, and set mRadius
to 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() );
18.191.162.51