<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>2. Inverting Animations</title><link rel="stylesheet" type="text/css" href="style.css"><meta name="generator" content="DocBook XSL Stylesheets Vsnapshot"><link rel="home" href="index.html" title="The Clutter Cookbook"><link rel="up" href="animations.html" title="Chapter 5. Animations"><link rel="prev" href="animations.html" title="Chapter 5. Animations"><link rel="next" href="animations-fading.html" title="3. Fading an actor out of or into view"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">2. Inverting Animations</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="animations.html">Prev</a> </td><th width="60%" align="center">Chapter 5. Animations</th><td width="20%" align="right"> <a accesskey="n" href="animations-fading.html">Next</a></td></tr></table><hr></div><div class="section"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="animations-inversion"></a>2. Inverting Animations</h2></div></div></div><div class="section"><div class="titlepage"><div><div><h3 class="title"><a name="idm140200513498816"></a>2.1. Problem</h3></div></div></div><p>You want to have an animation exactly mirroring another one
that you just played.</p></div><div class="section"><div class="titlepage"><div><div><h3 class="title"><a name="idm140200513497504"></a>2.2. Solution</h3></div></div></div><p>Reverse the direction of the <span class="type">ClutterTimeline</span>
associated with the animation.</p><p>For example, here's how to invert an implicit
animation which moves an actor along the <code class="varname">x</code>
axis. The direction of the animation is inverted when the
movement along the <code class="varname">x</code> axis is completed; it is
also inverted if the mouse button is pressed on the actor.</p><p>First, set up the animation:</p><div class="informalexample"><pre class="programlisting">ClutterAnimation *animation;
/*
* animate actor to x = 300.0;
* the implicit animation functions return a ClutterAnimation
* which we can use to invert the timeline
*/
animation = clutter_actor_animate (actor,
CLUTTER_EASE_IN_OUT_CUBIC,
2000,
"x", 300.0,
NULL);
/* callback for when the animation completes */
g_signal_connect (animation,
"completed",
G_CALLBACK (_animation_done_cb),
NULL);
/*
* callback for when the mouse button is pressed on the actor;
* note the animation is passed as user data, so we can
* get at the timeline
*/
g_signal_connect (actor,
"button-press-event",
G_CALLBACK (_on_click_cb),
animation);</pre></div><p>Next, add a function for inverting the timeline:</p><div class="informalexample"><pre class="programlisting">static void
_invert_timeline (ClutterTimeline *timeline)
{
ClutterTimelineDirection direction = clutter_timeline_get_direction (timeline);
if (direction == CLUTTER_TIMELINE_FORWARD)
direction = CLUTTER_TIMELINE_BACKWARD;
else
direction = CLUTTER_TIMELINE_FORWARD;
clutter_timeline_set_direction (timeline, direction);
}</pre></div><p>Then add a function which calls <code class="function">_invert_timeline</code>
when the animation completes. More importantly, the callback should
stop emission of the "completed" signal by the animation. This
prevents the <span class="type">ClutterAnimation</span> underlying the implicit
animation from being unreferenced; which in turn allows it to be
inverted:</p><div class="informalexample"><pre class="programlisting">static void
_animation_done_cb (ClutterAnimation *animation,
gpointer user_data)
{
/* stop the completed signal before the ClutterAnimation is unreferenced */
g_signal_stop_emission_by_name (animation, "completed");
/* invert the timeline associated with the animation */
ClutterTimeline *timeline = clutter_animation_get_timeline (animation);
_invert_timeline (timeline);
}</pre></div><p>Finally, the click callback function uses the same
<code class="function">_invert_timeline</code> function if the animation
is playing; but if the animation is stopped, it will
start it instead:</p><div class="informalexample"><pre class="programlisting">static void
_on_click_cb (ClutterActor *actor,
ClutterEvent *event,
gpointer user_data)
{
ClutterAnimation *animation = (ClutterAnimation *)user_data;
ClutterTimeline *timeline = clutter_animation_get_timeline (animation);
if (clutter_timeline_is_playing (timeline))
{
_invert_timeline (timeline);
}
else
{
clutter_timeline_start (timeline);
}
}</pre></div></div><div class="section"><div class="titlepage"><div><div><h3 class="title"><a name="idm140200507868576"></a>2.3. Discussion</h3></div></div></div><p>If you are using <span class="type">ClutterAnimator</span> rather than
implicit animations, <code class="function">clutter_animator_get_timeline()</code>
enables you to get the underlying timeline; you could then use
the techniques shown above to invert it.</p><p><span class="type">ClutterState</span> enables a different approach
to "inverting" an animation: rather than having a single animation
which you invert, you would define two or more
<span class="emphasis"><em>keys</em></span> for an actor (or set of actors) and
transition between them.</p><p>For the example above, you would define two keys:
one for the actor's initial position; and a second for the actor
at <code class="code">x = 300.0</code>. You would also define the
transition between them: 2000 milliseconds with a
<code class="constant">CLUTTER_EASE_IN_OUT_CUBIC</code> easing mode.</p><p>With the states defined, you would then use
<code class="function">clutter_state_set_state()</code> inside callbacks to
animate the actor between the two <code class="varname">x</code> positions.
Behind the scenes, <span class="type">ClutterState</span> would handle the
animations and timelines for you.</p></div></div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="animations.html">Prev</a> </td><td width="20%" align="center"><a accesskey="u" href="animations.html">Up</a></td><td width="40%" align="right"> <a accesskey="n" href="animations-fading.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">Chapter 5. Animations </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> 3. Fading an actor out of or into view</td></tr></table></div></body></html>