<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Migrating from ClutterAnimation: Clutter Reference Manual</title>
<meta name="generator" content="DocBook XSL Stylesheets Vsnapshot">
<link rel="home" href="index.html" title="Clutter Reference Manual">
<link rel="up" href="migration.html" title="Part IX. Migrating from previous version of Clutter">
<link rel="prev" href="migrating-ClutterBehaviour.html" title="Migrating from ClutterBehaviour">
<link rel="next" href="deprecated.html" title="Part X. Deprecated Classes">
<meta name="generator" content="GTK-Doc V1.25.1 (XML mode)">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
<table class="navigation" id="top" width="100%" summary="Navigation header" cellpadding="2" cellspacing="5"><tr valign="middle">
<td width="100%" align="left" class="shortcuts"></td>
<td><a accesskey="h" href="index.html"><img src="home.png" width="16" height="16" border="0" alt="Home"></a></td>
<td><a accesskey="u" href="migration.html"><img src="up.png" width="16" height="16" border="0" alt="Up"></a></td>
<td><a accesskey="p" href="migrating-ClutterBehaviour.html"><img src="left.png" width="16" height="16" border="0" alt="Prev"></a></td>
<td><a accesskey="n" href="deprecated.html"><img src="right.png" width="16" height="16" border="0" alt="Next"></a></td>
</tr></table>
<div class="chapter">
<div class="titlepage"><div>
<div><h2 class="title">
<a name="migrating-ClutterAnimation"></a>Migrating from ClutterAnimation</h2></div>
<div><div class="author">
<h3 class="author">
<span class="firstname">Emmanuele</span> <span class="surname">Bassi</span>
</h3>
<div class="affiliation"><div class="address"><p><br>
<code class="email"><<a class="email" href="mailto:ebassignome.org">ebassi<em class="parameter"><code>gnome.org</code></em></a>></code><br>
</p></div></div>
</div></div>
</div></div>
<div class="toc"><dl class="toc"><dt><span class="section"><a href="migrating-ClutterAnimation.html#id-1.10.6.12">Migrating <code class="function">clutter_actor_animate()</code></a></span></dt></dl></div>
<p>The <a class="link" href="clutter-Implicit-Animations.html#ClutterAnimation"><span class="type">ClutterAnimation</span></a> class, along with the <a class="link" href="ClutterActor.html" title="ClutterActor"><span class="type">ClutterActor</span></a> wrappers
<a class="link" href="clutter-Implicit-Animations.html#clutter-actor-animate" title="clutter_actor_animate ()"><code class="function">clutter_actor_animate()</code></a>, <a class="link" href="clutter-Implicit-Animations.html#clutter-actor-animate-with-timeline" title="clutter_actor_animate_with_timeline ()"><code class="function">clutter_actor_animate_with_timeline()</code></a> and
<a class="link" href="clutter-Implicit-Animations.html#clutter-actor-animate-with-alpha" title="clutter_actor_animate_with_alpha ()"><code class="function">clutter_actor_animate_with_alpha()</code></a>, has been deprecated in Clutter 1.12,
and should not be used in newly written code.</p>
<p>The direct replacement for a <a class="link" href="clutter-Implicit-Animations.html#ClutterAnimation"><span class="type">ClutterAnimation</span></a> is the
<a class="link" href="ClutterPropertyTransition.html" title="ClutterPropertyTransition"><span class="type">ClutterPropertyTransition</span></a> class, which allows the transition of a
single <span class="type">GObject</span> property from an initial value to a final value over a
user-defined time using a user-defined easing curve.</p>
<p>The <a class="link" href="ClutterPropertyTransition.html" title="ClutterPropertyTransition"><span class="type">ClutterPropertyTransition</span></a> class inherits from <a class="link" href="ClutterTransition.html" title="ClutterTransition"><span class="type">ClutterTransition</span></a>,
which allows setting the transition interval, as well as the animatable
instance to be transitioned; and from <a class="link" href="ClutterTimeline.html" title="ClutterTimeline"><span class="type">ClutterTimeline</span></a>, which allows setting
the duration and easing curve of the transition.</p>
<p>For instance, the following <a class="link" href="clutter-Implicit-Animations.html#ClutterAnimation"><span class="type">ClutterAnimation</span></a> set up:</p>
<div class="informalexample">
<table class="listing_frame" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="listing_lines" align="right"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15</pre></td>
<td class="listing_code"><pre class="programlisting"><span class="usertype">ClutterAnimation</span><span class="normal"> </span><span class="symbol">*</span><span class="normal">animation </span><span class="symbol">=</span><span class="normal"> </span><span class="function"><a href="clutter-Implicit-Animations.html#clutter-animation-new">clutter_animation_new</a></span><span class="normal"> </span><span class="symbol">();</span>
<span class="function"><a href="clutter-Implicit-Animations.html#clutter-animation-set-mode">clutter_animation_set_mode</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">animation</span><span class="symbol">,</span><span class="normal"> <a href="ClutterTimeline.html#CLUTTER-EASE-OUT-CUBIC:CAPS">CLUTTER_EASE_OUT_CUBIC</a></span><span class="symbol">);</span>
<span class="function"><a href="clutter-Implicit-Animations.html#clutter-animation-set-duration">clutter_animation_set_duration</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">animation</span><span class="symbol">,</span><span class="normal"> </span><span class="number">2500</span><span class="symbol">);</span>
<span class="comment">/* object_to_animate is set elsewhere */</span>
<span class="function"><a href="clutter-Implicit-Animations.html#clutter-animation-set-object">clutter_animation_set_object</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">animation</span><span class="symbol">,</span><span class="normal"> object_to_animate</span><span class="symbol">);</span>
<span class="usertype">ClutterInterval</span><span class="normal"> </span><span class="symbol">*</span><span class="normal">interval </span><span class="symbol">=</span><span class="normal"> </span><span class="function"><a href="clutter-Value-intervals.html#clutter-interval-new">clutter_interval_new</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">G_TYPE_FLOAT</span><span class="symbol">,</span><span class="normal"> </span><span class="number">0.0</span><span class="symbol">,</span><span class="normal"> </span><span class="number">100.0</span><span class="symbol">);</span>
<span class="comment">/* property_name is set elsewhere */</span>
<span class="function"><a href="clutter-Implicit-Animations.html#clutter-animation-bind-interval">clutter_animation_bind_interval</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">animation</span><span class="symbol">,</span><span class="normal"> property_name</span><span class="symbol">,</span><span class="normal"> interval</span><span class="symbol">);</span>
<span class="usertype">ClutterTimeline</span><span class="normal"> </span><span class="symbol">*</span><span class="normal">timeline </span><span class="symbol">=</span><span class="normal"> </span><span class="function"><a href="clutter-Implicit-Animations.html#clutter-animation-get-timeline">clutter_animation_get_timeline</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">animation</span><span class="symbol">);</span>
<span class="function"><a href="ClutterTimeline.html#clutter-timeline-start">clutter_timeline_start</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">timeline</span><span class="symbol">);</span></pre></td>
</tr>
</tbody>
</table>
</div>
<p>Can be replaced by <a class="link" href="ClutterPropertyTransition.html" title="ClutterPropertyTransition"><span class="type">ClutterPropertyTransition</span></a>:</p>
<div class="informalexample">
<table class="listing_frame" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="listing_lines" align="right"><pre>1
2
3
4
5
6
7
8
9
10
11
12</pre></td>
<td class="listing_code"><pre class="programlisting"><span class="usertype">ClutterTransition</span><span class="normal"> </span><span class="symbol">*</span><span class="normal">transition </span><span class="symbol">=</span><span class="normal"> </span><span class="function"><a href="ClutterPropertyTransition.html#clutter-property-transition-new">clutter_property_transition_new</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">property_name</span><span class="symbol">);</span>
<span class="function"><a href="ClutterTimeline.html#clutter-timeline-set-progress-mode">clutter_timeline_set_progress_mode</a></span><span class="normal"> </span><span class="symbol">(</span><span class="function">CLUTTER_TIMELINE</span><span class="normal"> </span><span class="symbol">(</span><span class="normal">transition</span><span class="symbol">),</span>
<span class="normal"> <a href="ClutterTimeline.html#CLUTTER-EASE-OUT-CUBIC:CAPS">CLUTTER_EASE_OUT_CUBIC</a></span><span class="symbol">);</span>
<span class="function"><a href="ClutterTimeline.html#clutter-timeline-set-duration">clutter_timeline_set_duration</a></span><span class="normal"> </span><span class="symbol">(</span><span class="function">CLUTTER_TIMELINE</span><span class="normal"> </span><span class="symbol">(</span><span class="normal">transition</span><span class="symbol">),</span><span class="normal"> </span><span class="number">2000</span><span class="symbol">);</span>
<span class="function"><a href="ClutterTransition.html#clutter-transition-set-animatable">clutter_transition_set_animatable</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">transition</span><span class="symbol">,</span><span class="normal"> object_to_animate</span><span class="symbol">);</span>
<span class="function"><a href="ClutterTransition.html#clutter-transition-set-from">clutter_transition_set_from</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">transition</span><span class="symbol">,</span><span class="normal"> G_TYPE_FLOAT</span><span class="symbol">,</span><span class="normal"> </span><span class="number">0.0</span><span class="symbol">);</span>
<span class="function"><a href="ClutterTransition.html#clutter-transition-set-to">clutter_transition_set_to</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">transition</span><span class="symbol">,</span><span class="normal"> G_TYPE_FLOAT</span><span class="symbol">,</span><span class="normal"> </span><span class="number">100.0</span><span class="symbol">);</span>
<span class="function"><a href="ClutterTimeline.html#clutter-timeline-start">clutter_timeline_start</a></span><span class="normal"> </span><span class="symbol">(</span><span class="function">CLUTTER_TIMELINE</span><span class="normal"> </span><span class="symbol">(</span><span class="normal">transition</span><span class="symbol">));</span></pre></td>
</tr>
</tbody>
</table>
</div>
<p>It is important to note that only <a class="link" href="ClutterAnimatable.html" title="ClutterAnimatable"><span class="type">ClutterAnimatable</span></a> implementations
can be used directly with <a class="link" href="ClutterTransition.html" title="ClutterTransition"><span class="type">ClutterTransition</span></a>.</p>
<p>A <a class="link" href="ClutterPropertyTransition.html" title="ClutterPropertyTransition"><span class="type">ClutterPropertyTransition</span></a> can only animate a single property; if
more than one property transition is required, you can use the
<a class="link" href="ClutterTransitionGroup.html" title="ClutterTransitionGroup"><span class="type">ClutterTransitionGroup</span></a> class to group the transitions together.</p>
<div class="section">
<div class="titlepage"><div><div><h2 class="title" style="clear: both">
<a name="id-1.10.6.12"></a>Migrating <a class="link" href="clutter-Implicit-Animations.html#clutter-actor-animate" title="clutter_actor_animate ()"><code class="function">clutter_actor_animate()</code></a>
</h2></div></div></div>
<p><a class="link" href="ClutterActor.html" title="ClutterActor"><span class="type">ClutterActor</span></a> animatable properties can use implicit transitions
through their setter functions. The duration and easing curve of the
animation is controlled by <a class="link" href="ClutterActor.html#clutter-actor-set-easing-duration" title="clutter_actor_set_easing_duration ()"><code class="function">clutter_actor_set_easing_duration()</code></a> and by
<a class="link" href="ClutterActor.html#clutter-actor-set-easing-mode" title="clutter_actor_set_easing_mode ()"><code class="function">clutter_actor_set_easing_mode()</code></a>, respectively; for instance, the
equivalent of the following <a class="link" href="clutter-Implicit-Animations.html#clutter-actor-animate" title="clutter_actor_animate ()"><code class="function">clutter_actor_animate()</code></a> call:</p>
<div class="informalexample">
<table class="listing_frame" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="listing_lines" align="right"><pre>1
2
3
4
5</pre></td>
<td class="listing_code"><pre class="programlisting"><span class="function"><a href="clutter-Implicit-Animations.html#clutter-actor-animate">clutter_actor_animate</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">actor</span><span class="symbol">,</span><span class="normal"> <a href="ClutterTimeline.html#CLUTTER-EASE-OUT-BOUNCE:CAPS">CLUTTER_EASE_OUT_BOUNCE</a></span><span class="symbol">,</span><span class="normal"> </span><span class="number">500</span><span class="symbol">,</span>
<span class="normal"> </span><span class="string">"x"</span><span class="symbol">,</span><span class="normal"> new_x_position</span><span class="symbol">,</span>
<span class="normal"> </span><span class="string">"y"</span><span class="symbol">,</span><span class="normal"> new_y_position</span><span class="symbol">,</span>
<span class="normal"> </span><span class="string">"opacity"</span><span class="symbol">,</span><span class="normal"> </span><span class="number">255</span><span class="symbol">,</span>
<span class="normal"> NULL</span><span class="symbol">);</span></pre></td>
</tr>
</tbody>
</table>
</div>
<p>Can be replaced by the following:</p>
<div class="informalexample">
<table class="listing_frame" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="listing_lines" align="right"><pre>1
2
3
4</pre></td>
<td class="listing_code"><pre class="programlisting"><span class="function"><a href="ClutterActor.html#clutter-actor-set-easing-mode">clutter_actor_set_easing_mode</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">actor</span><span class="symbol">,</span><span class="normal"> <a href="ClutterTimeline.html#CLUTTER-EASE-OUT-BOUNCE:CAPS">CLUTTER_EASE_OUT_BOUNCE</a></span><span class="symbol">);</span>
<span class="function"><a href="ClutterActor.html#clutter-actor-set-easing-duration">clutter_actor_set_easing_duration</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">actor</span><span class="symbol">,</span><span class="normal"> </span><span class="number">500</span><span class="symbol">);</span>
<span class="function"><a href="ClutterActor.html#clutter-actor-set-position">clutter_actor_set_position</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">actor</span><span class="symbol">,</span><span class="normal"> new_x_position</span><span class="symbol">,</span><span class="normal"> new_y_position</span><span class="symbol">);</span>
<span class="function"><a href="ClutterActor.html#clutter-actor-set-opacity">clutter_actor_set_opacity</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">actor</span><span class="symbol">,</span><span class="normal"> </span><span class="number">255</span><span class="symbol">);</span></pre></td>
</tr>
</tbody>
</table>
</div>
<p>The default easing duration for the 1.0 API series is set to 0,
which means no transition at all.</p>
<p>It is possible to set the easing state of a <a class="link" href="ClutterActor.html" title="ClutterActor"><span class="type">ClutterActor</span></a> to its
default values by using <a class="link" href="ClutterActor.html#clutter-actor-save-easing-state" title="clutter_actor_save_easing_state ()"><code class="function">clutter_actor_save_easing_state()</code></a>, and return
to the previous values by calling <a class="link" href="ClutterActor.html#clutter-actor-restore-easing-state" title="clutter_actor_restore_easing_state ()"><code class="function">clutter_actor_restore_easing_state()</code></a>
instead. The easing state affects all the animatable properties that
are modified after changing it; so, for instance:</p>
<div class="informalexample">
<table class="listing_frame" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="listing_lines" align="right"><pre>1
2
3
4
5
6
7
8
9
10
11</pre></td>
<td class="listing_code"><pre class="programlisting"><span class="function"><a href="ClutterActor.html#clutter-actor-save-easing-state">clutter_actor_save_easing_state</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">actor</span><span class="symbol">);</span>
<span class="function"><a href="ClutterActor.html#clutter-actor-set-easing-duration">clutter_actor_set_easing_duration</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">actor</span><span class="symbol">,</span><span class="normal"> </span><span class="number">500</span><span class="symbol">);</span>
<span class="function"><a href="ClutterActor.html#clutter-actor-set-opacity">clutter_actor_set_opacity</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">actor</span><span class="symbol">,</span><span class="normal"> </span><span class="number">255</span><span class="symbol">);</span>
<span class="function"><a href="ClutterActor.html#clutter-actor-save-easing-state">clutter_actor_save_easing_state</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">actor</span><span class="symbol">);</span>
<span class="function"><a href="ClutterActor.html#clutter-actor-set-easing-delay">clutter_actor_set_easing_delay</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">actor</span><span class="symbol">,</span><span class="normal"> </span><span class="number">500</span><span class="symbol">);</span>
<span class="function"><a href="ClutterActor.html#clutter-actor-set-easing-duration">clutter_actor_set_easing_duration</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">actor</span><span class="symbol">,</span><span class="normal"> </span><span class="number">500</span><span class="symbol">);</span>
<span class="function"><a href="ClutterActor.html#clutter-actor-set-size">clutter_actor_set_size</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">actor</span><span class="symbol">,</span><span class="normal"> width</span><span class="symbol">,</span><span class="normal"> height</span><span class="symbol">);</span>
<span class="function"><a href="ClutterActor.html#clutter-actor-restore-easing-state">clutter_actor_restore_easing_state</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">actor</span><span class="symbol">);</span>
<span class="function"><a href="ClutterActor.html#clutter-actor-restore-easing-state">clutter_actor_restore_easing_state</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">actor</span><span class="symbol">);</span></pre></td>
</tr>
</tbody>
</table>
</div>
<p>The animation above will implicitly transition the opacity from
its current value to 255 in 500 milliseconds using the default easing
curve; at the same time, the size of the actor will be transitioned in
500 milliseconds after a delay of 500 milliseconds to the new size
stored in the variables <span class="emphasis"><em>width</em></span> and
<span class="emphasis"><em>height</em></span>.</p>
</div>
</div>
<div class="footer">
<hr>Generated by GTK-Doc V1.25.1</div>
</body>
</html>