<!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 ClutterEffect: 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="pt10.html" title="Part I. ">
<link rel="next" href="migrating-ClutterPath.html" title="Migrating to ClutterPath">
<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="pt10.html"><img src="left.png" width="16" height="16" border="0" alt="Prev"></a></td>
<td><a accesskey="n" href="migrating-ClutterPath.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-ClutterEffect"></a>Migrating from ClutterEffect</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:ebassilinux.intel.com">ebassi<em class="parameter"><code>linux.intel.com</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-ClutterEffect.html#using-actor-animate">Using <code class="function">clutter_actor_animate()</code></a></span></dt></dl></div>
<p>Since version 1.0, Clutter provides the <a class="link" href="clutter-Implicit-Animations.html#ClutterAnimation"><span class="type">ClutterAnimation</span></a> API
and the <a class="link" href="clutter-Implicit-Animations.html#clutter-actor-animate" title="clutter_actor_animate ()"><code class="function">clutter_actor_animate()</code></a> family of functions as replacements
for the <span class="structname">ClutterEffectTemplate</span> and
clutter_effect_* API for creating simple, one-off animations.</p>
<div class="section">
<div class="titlepage"><div><div><h2 class="title" style="clear: both">
<a name="using-actor-animate"></a>Using <code class="function"><a class="link" href="clutter-Implicit-Animations.html#clutter-actor-animate" title="clutter_actor_animate ()"><code class="function">clutter_actor_animate()</code></a></code>
</h2></div></div></div>
<p>Prior to Clutter 1.0, the way to create simple, one-off
animations involving a single actor was the ClutterEffect API. The
major downside of this API was that to abstract the duration and
easing function of the animation the application developer had to
create a <span class="structname">ClutterEffectTemplate</span> and keep it
around for the duration of the application.</p>
<p>The <a class="link" href="clutter-Implicit-Animations.html#clutter-actor-animate" title="clutter_actor_animate ()"><code class="function">clutter_actor_animate()</code></a> function performs all of the
memory management that was delegated to the
<span class="structname">ClutterEffectTemplate</span>, freeing the developer
from having to deal with object bookkeeping.</p>
<p>Another downside of the ClutterEffect API is that every
possible animation has its own function (scaling, opacity, rotation,
movement, etc.), and new functions cannot be added outside of
Clutter.</p>
<div class="example">
<a name="example-clutter-effect"></a><p class="title"><b>Example 1. Effect example</b></p>
<div class="example-contents">
<p>The following code shows a simple animation using
the ClutterEffect API. It animates an actor linearly in 500
milliseconds, by moving it to the (100, 100) coordinates
while fading it out.</p>
<pre class="programlisting">
ClutterEffectTemplate *tmpl;
tmpl = clutter_effect_template_new_for_duration (500, clutter_ramp_inc_func);
clutter_effect_move (tmpl, actor, 100, 100, NULL, NULL);
clutter_effect_fade (tmpl, actor, 0, NULL, NULL);
g_object_unref (tmpl);
</pre>
</div>
</div>
<br class="example-break"><p>The <a class="link" href="clutter-Implicit-Animations.html#clutter-actor-animate" title="clutter_actor_animate ()"><code class="function">clutter_actor_animate()</code></a> function will implicitely
create a <a class="link" href="clutter-Implicit-Animations.html#ClutterAnimation"><span class="type">ClutterAnimation</span></a> with the passed duration and easing
mode, and will bind all the passed properties. All readable and
writable properties specified by a <a class="link" href="ClutterActor.html" title="ClutterActor"><span class="type">ClutterActor</span></a> are animatable
through <a class="link" href="clutter-Implicit-Animations.html#clutter-actor-animate" title="clutter_actor_animate ()"><code class="function">clutter_actor_animate()</code></a>.</p>
<div class="example">
<a name="example-actor-animate"></a><p class="title"><b>Example 2. Animation example</b></p>
<div class="example-contents">
<p>The following code shows the <a class="link" href="clutter-Implicit-Animations.html#clutter-actor-animate" title="clutter_actor_animate ()"><code class="function">clutter_actor_animate()</code></a> call
equivalent to the previous ClutterEffect example.</p>
<pre class="programlisting">
clutter_actor_animate (actor, CLUTTER_LINEAR, 500,
"x", 100.0,
"y", 100.0,
"opacity", 0,
NULL);
</pre>
</div>
</div>
<br class="example-break"><p>The ClutterEffect API provided a way to be notified of the
effect completion. Since the <a class="link" href="clutter-Implicit-Animations.html#clutter-actor-animate" title="clutter_actor_animate ()"><code class="function">clutter_actor_animate()</code></a> function creates
a <a class="link" href="clutter-Implicit-Animations.html#ClutterAnimation"><span class="type">ClutterAnimation</span></a> instance it's possible to use the
<a class="link" href="clutter-Implicit-Animations.html#ClutterAnimation-completed" title="The “completed” signal"><span class="type">“completed”</span></a> signal for the same notification.</p>
<div class="example">
<a name="example-clutter-effect-complete"></a><p class="title"><b>Example 3. Effect complete example</b></p>
<div class="example-contents">
<p>The following code shows how to receive notification of the
completion of the animation.</p>
<pre class="programlisting">
static void
on_fade_complete (ClutterActor *actor,
gpointer data)
{
clutter_actor_hide (actor);
}
ClutterEffectTemplate *tmpl;
tmpl = clutter_effect_template_new_for_duration (500, clutter_ramp_inc_func);
clutter_effect_fade (tmpl, actor, 0, on_fade_complete, NULL);
g_object_unref (tmpl);
</pre>
</div>
</div>
<br class="example-break"><p>The <a class="link" href="clutter-Implicit-Animations.html#clutter-actor-animate" title="clutter_actor_animate ()"><code class="function">clutter_actor_animate()</code></a> function also has a convenience
wrapper that allows to inline the signal connection:</p>
<div class="example">
<a name="example-actor-animate-complete"></a><p class="title"><b>Example 4. Animation completed example</b></p>
<div class="example-contents">
<p>The following code shows how to get the same notification
as the example above.</p>
<pre class="programlisting">
ClutterAnimation *animation;
animation = clutter_actor_animate (actor, CLUTTER_LINEAR, 500,
"opacity", 0,
NULL);
g_signal_connect_swapped (animation,
"completed", G_CALLBACK (clutter_actor_hide),
actor);
/* OR */
clutter_actor_animate (actor, CLUTTER_LINEAR, 500,
"opacity", 0,
"signal-swapped::completed", clutter_actor_hide, actor,
NULL);
</pre>
</div>
</div>
<br class="example-break">
</div>
</div>
<div class="footer">
<hr>Generated by GTK-Doc V1.25.1</div>
</body>
</html>