/usr/share/gtk-doc/html/clutter-cookbook/textures-crossfade.html is in libclutter-1.0-doc 1.20.0-1.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 | <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>7. Cross-fading between two images</title><link rel="stylesheet" type="text/css" href="style.css"><meta name="generator" content="DocBook XSL Stylesheets V1.78.1"><link rel="home" href="index.html" title="The Clutter Cookbook"><link rel="up" href="textures.html" title="Chapter 4. Textures"><link rel="prev" href="textures-reflection.html" title="6. Creating a reflection of a texture"><link rel="next" href="animations.html" title="Chapter 5. Animations"></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">7. Cross-fading between two images</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="textures-reflection.html">Prev</a> </td><th width="60%" align="center">Chapter 4. Textures</th><td width="20%" align="right"> <a accesskey="n" href="animations.html">Next</a></td></tr></table><hr></div><div class="section"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="textures-crossfade"></a>7. Cross-fading between two images</h2></div></div></div><div class="section"><div class="titlepage"><div><div><h3 class="title"><a name="idp73342352"></a>7.1. Problem</h3></div></div></div><p>You want to do a cross-fade animation (a.k.a. a dissolve
transition) between two images.</p><p>An example use case would be creating a slideshow effect:
load an image from a file, display it in the UI, then load a second
image and cross-fade to it.</p></div><div class="section"><div class="titlepage"><div><div><h3 class="title"><a name="idp73344368"></a>7.2. Solutions</h3></div></div></div><p>There are two main approaches you could take:</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem"><p>Use two <span class="type">ClutterTextures</span>, one on top
of the other.</p></li><li class="listitem"><p>Use a single <span class="type">ClutterTexture</span>
with the two images in separate layers inside it.</p></li></ol></div><div class="section"><div class="titlepage"><div><div><h4 class="title"><a name="idp73349184"></a>7.2.1. Solution 1: two textures</h4></div></div></div><p>This approach uses two <span class="type">ClutterTextures</span>,
<code class="varname">bottom</code> and <code class="varname">top</code>. To begin
with, the <code class="varname">bottom</code> texture shows the
<span class="emphasis"><em>source</em></span> image and is opaque; the
<code class="varname">top</code> texture is loaded with
the <span class="emphasis"><em>target</em></span> image, but is not visible as
it is fully transparent.</p><p>An animation is then used to fade in the
<code class="varname">top</code> texture and fade out the
<code class="varname">bottom</code> texture, leaving just <code class="varname">top</code>
visible.</p><p>To implement this, first create the two textures inside a
<span class="type">ClutterBinLayout</span>:</p><div class="informalexample"><pre class="programlisting">/* ... initialise Clutter, get default stage etc. ... */
/* Actors added to this layout are centered on both x and y axes */
ClutterLayoutManager *layout = clutter_bin_layout_new (CLUTTER_BIN_ALIGNMENT_CENTER,
CLUTTER_BIN_ALIGNMENT_CENTER);
ClutterActor *box = clutter_box_new (layout);
/* set the size of the box so it fills the stage (in this case 600x600) */
clutter_actor_set_size (box, 400, 400);
ClutterActor *bottom = clutter_texture_new ();
ClutterActor *top = clutter_texture_new ();
/*
* Add the textures to the layout;
* NB because top is added last, it will be "on top of" bottom
*/
clutter_container_add_actor (CLUTTER_CONTAINER (box), bottom);
clutter_container_add_actor (CLUTTER_CONTAINER (box), top);
/* stage is a ClutterStage instance */
clutter_container_add_actor (CLUTTER_CONTAINER (stage), box);</pre></div><p>Load the <code class="varname">source</code> image into the bottom
texture and the <code class="varname">target</code> image into the top one.
As this is the same operation each time, it makes sense to write
a function for loading an image into a texture and checking
for errors, e.g.:</p><div class="informalexample"><pre class="programlisting">static gboolean
load_image (ClutterTexture *texture,
gchar *image_path)
{
GError *error = NULL;
gboolean success = clutter_texture_set_from_file (CLUTTER_TEXTURE (texture),
image_path,
&error);
if (error != NULL)
{
g_warning ("Error loading %s\n%s", image_path, error->message);
g_error_free (error);
exit (EXIT_FAILURE);
}
return success;
}</pre></div><p>The <code class="function">load_image()</code> function can then
be called for each texture:</p><div class="informalexample"><pre class="programlisting">/* file path to the image visible when the UI is first displayed */
gchar *source = NULL;
/* file path to the image we're going to cross-fade to */
gchar *target = NULL;
/* ...set image file paths, e.g. from command line or directory read... */
/* the bottom texture contains the source image */
load_image (CLUTTER_TEXTURE (bottom), source);
/* the top texture contains the target image */
load_image (CLUTTER_TEXTURE (top), target);</pre></div><p>For the animations, we use <span class="type">ClutterState</span> as we
want to animate two actors at once (<code class="varname">top</code>
and <code class="varname">bottom</code>):</p><div class="informalexample"><pre class="programlisting">ClutterState *transitions = clutter_state_new ();
/* start state, where bottom is opaque and top is transparent */
clutter_state_set (transitions, NULL, "show-bottom",
top, "opacity", CLUTTER_LINEAR, 0,
bottom, "opacity", CLUTTER_LINEAR, 255,
NULL);
/* end state, where top is opaque and bottom is transparent */
clutter_state_set (transitions, NULL, "show-top",
top, "opacity", CLUTTER_EASE_IN_CUBIC, 255,
bottom, "opacity", CLUTTER_EASE_IN_CUBIC, 0,
NULL);
/* set 1000ms duration for all transitions between states */
clutter_state_set_duration (transitions, NULL, NULL, 1000);</pre></div><p>Note that rather than set the start opacities manually
on the actors (e.g. using
<code class="function">clutter_actor_set_opacity()</code>),
I've used a <span class="type">ClutterState</span> to define the start
state (as well as the end state). This makes it easier to
track transitions, as they are all kept in one data structure.</p><div class="note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3><p>The easing modes used for the cross-fade animation
(<code class="constant">CLUTTER_EASE_IN_CUBIC</code>)
can be set to whatever you like. I personally think that
ease-in modes look best for cross-fading.</p></div><p>"Warp" the two textures into the start state
(<code class="varname">bottom</code> opaque, <code class="varname">top</code>
transparent):</p><div class="informalexample"><pre class="programlisting">clutter_state_warp_to_state (transitions, "show-bottom");</pre></div><p>Using <code class="function">clutter_state_warp_to_state()</code>
immediately transitions to a state without animating, which
in this case sets up the initial state of the UI.</p><p>Finally, use the <span class="type">ClutterState</span> to animate
the two textures, so <code class="varname">top</code> fades in and
<code class="varname">bottom</code> fades out:</p><div class="informalexample"><pre class="programlisting">clutter_state_set_state (transitions, "show-top");</pre></div><p>Here's what it looks like:</p><p><video controls="controls" src="videos/textures-crossfade-two-textures.ogv"><a href="videos/textures-crossfade-two-textures.ogv"></a></video></p><p>The full code for this example
<a class="link" href="textures-crossfade.html#textures-crossfade-example-1" title="Example 4.4. Cross-fading between two images using two ClutterTextures">is in the
appendix</a>.</p></div><div class="section"><div class="titlepage"><div><div><h4 class="title"><a name="idp70902064"></a>7.2.2. Solution 2: one texture with two layers</h4></div></div></div><p>The alternative solution is to use a single texture
and the low-level COGL API to set up two different layers
inside it, one for each image.</p><p>Then, rather than fade between two textures,
progressively combine the two layers together using an
alpha value which changes over the course of an animation
(from 0.0 at the start of the animation to 1.0 at its end).</p><p>At any point in the cross-fade animation, you are
actually seeing a combination of the color
values in the two images (modified by an alpha component), rather
than seeing one image through the other. This can give a smoother
cross-fade effect than the two texture approach.</p><p>As this solution is more complex
and relies on the lower-level (and more difficult to follow)
COGL API, the next section is just a short summary of how it
works; see <a class="link" href="textures-crossfade.html#textures-crossfade-example-2" title="Example 4.5. Cross-fading between two images using one ClutterTexture and the COGL API">the
sample code, which has liberal comments</a> for more details.</p><div class="note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3><p>For more about texture combining, refer to the COGL
API documentation (particularly the section about material
blend strings). You may also find it useful to get hold of
a decent OpenGL reference. (So you can look it up, what we're
doing in this solution is using a texture combiner with
interpolation as the texture combiner function.)</p></div><div class="section"><div class="titlepage"><div><div><h5 class="title"><a name="idp70907408"></a>7.2.2.1. Cross-fading using a texture combiner with interpolation</h5></div></div></div><p>The cross-fade is implemented by combining the two layers,
computing a color value for each pixel in the resulting texture.
The value for each pixel at a given point in the animation
is based on three things:</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem"><p>The color value of the <span class="emphasis"><em>source</em></span>
pixel</p></li><li class="listitem"><p>The color value of the <span class="emphasis"><em>target</em></span>
pixel</p></li><li class="listitem"><p>The alpha value of a third colour at the given point
in the animation's timeline</p></li></ol></div><p>The resulting value for each RGBA color component in each pixel
is computed using an interpolation function. In pseudo-code, it
looks like this:</p><div class="informalexample"><pre class="programlisting"> color component value = (target pixel value * alpha) + (source pixel value * (1 - alpha))</pre></div><p>The effect is that as the alpha increases towards 1.0,
progressively more of the <span class="emphasis"><em>target</em></span> pixel's
color is used, and progressively less of the <span class="emphasis"><em>source</em></span>
pixel's: so the <span class="emphasis"><em>target</em></span> fades in, while
the <span class="emphasis"><em>source</em></span> fades out.</p><p>The advantage of this approach is that color and
brightness transitions only occur where pixels differ between
the two images. This means that you transitions are smoother
where you are cross-fading between images with similar color ranges
and brightness levels.</p><p>A special case is where you're cross-fading
from an image to itself: the two texture approach can cause some
dimming during this kind of transition; but the single texture
approach results in no color or brightness changes (it's not even
a transition as such, as all the pixels are identical in
the two layers).</p></div></div></div><div class="section"><div class="titlepage"><div><div><h3 class="title"><a name="textures-crossfade-discussion"></a>7.3. Discussion</h3></div></div></div><div class="section"><div class="titlepage"><div><div><h4 class="title"><a name="idp70920912"></a>7.3.1. Cross-fades between images of different sizes</h4></div></div></div><p>The code examples
(<a class="link" href="textures-crossfade.html#textures-crossfade-example-1" title="Example 4.4. Cross-fading between two images using two ClutterTextures">two textures</a>,
<a class="link" href="textures-crossfade.html#textures-crossfade-example-2" title="Example 4.5. Cross-fading between two images using one ClutterTexture and the COGL API">one texture with
COGL</a>) don't take account of the size of the images being
loaded.</p><p>In the two texture example, this isn't so much of a problem,
as you can resize the textures individually to the images:
providing you use
<code class="function">clutter_texture_set_keep_aspect_ratio()</code>,
different image sizes shouldn't be a problem. See
<a class="link" href="textures-crossfade.html#textures-crossfade-example-3" title="Example 4.6. A simple slideshow application using two ClutterTextures">the slideshow
example</a>, for a demonstration of how to cycle through
different sized images.</p><p>In the case of the single texture approach, you will get
problems when cross-fading between two images with
different sizes. There is no easy way to maintain the aspect
ratio (as you have two layers, potentially with different sizes,
in the same texture). The last layer added to the
<span class="type">CoglMaterial</span> determines the size of the texture;
so if the previous layer has different dimensions, it will
appear distorted in the UI. In the
<a class="link" href="textures-crossfade.html#textures-crossfade-example-2" title="Example 4.5. Cross-fading between two images using one ClutterTexture and the COGL API">single texture
code example</a>, the <span class="emphasis"><em>source</em></span> layer
is added first; so, if the <span class="emphasis"><em>target</em></span> layer has
different dimensions, the <span class="emphasis"><em>source</em></span> will
appear distorted.</p><p>There are a couple of ways you can remedy this:</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem"><p>As you load each image into its own
<span class="type">CoglTexture</span>, get its size with
<code class="function">cogl_texture_get_width()</code> and
<code class="function">cogl_texture_get_height()</code>. Then set the
<span class="type">ClutterTexture's</span> size to the
size of the source layer. Next, as
you cross-fade, simultaneously animate a
size change in the <span class="type">ClutterTexture</span> to
the target image's size.</p><p>This could work with non-realistic images where
some distortion of the image is acceptable (the target image
may be the wrong size to start with, but transition to the
correct size by the time it's fully faded in). But it can
look a bit odd for transitions between photos.</p></li><li class="listitem"><p>Use GdkPixbuf (or similar) to load the images into a temporary
data structure. (GdkPixbuf works well for this as it can resize
the image while retaining its aspect ratio.) Then load the data from
the pixbuf into a <span class="emphasis"><em>region</em></span> of a
<span class="type">CoglTexture</span> which has the same dimensions as
the <span class="type">ClutterTexture</span>.</p><p>Here's an example of how you can rewrite the
<code class="function">load_cogl_texture()</code> function of
the <a class="link" href="textures-crossfade.html#textures-crossfade-example-2" title="Example 4.5. Cross-fading between two images using one ClutterTexture and the COGL API">single
texture example</a> to do this:</p><div class="informalexample"><pre class="programlisting">/* requires this extra include */
#include <gdk-pixbuf/gdk-pixbuf.h>
static CoglHandle
load_cogl_texture (const char *type,
const char *file,
const guint texture_width,
const guint texture_height)
{
GError *error = NULL;
/*
* Load image data from a file into a GdkPixbuf,
* but constrained to the size of the target ClutterTexture;
* aspect ratio is maintained
*
* texture_width and texture_height are set elsewhere to
* the width and height of the ClutterTexture
*/
GdkPixbuf *pixbuf = gdk_pixbuf_new_from_file_at_size (file,
texture_width,
texture_height,
&error);
if (error != NULL)
{
g_print ("Unable to load %s image: %s\n", type, error->message);
g_error_free (error);
exit (EXIT_FAILURE);
}
guint rowstride = gdk_pixbuf_get_rowstride (pixbuf);
guint width = gdk_pixbuf_get_width (pixbuf);
guint height = gdk_pixbuf_get_height (pixbuf);
guchar *data = gdk_pixbuf_get_pixels (pixbuf);
CoglPixelFormat format = COGL_PIXEL_FORMAT_RGB_888;
if (gdk_pixbuf_get_has_alpha (pixbuf) == TRUE)
format = COGL_PIXEL_FORMAT_RGBA_8888;
/* CoglTexture with the same dimensions as the ClutterTexture */
CoglHandle *tex = cogl_texture_new_with_size (texture_width,
texture_height,
COGL_TEXTURE_NO_SLICING,
format);
/*
* load the texture data into a region of the full-sized texture;
* the size of the region is set from the size of the image data
* (as resized by GdkPixbuf)
*/
cogl_texture_set_region (tex,
0, 0, /* from top-left corner of the pixbuf */
(texture_width - width) / 2, /* center on the CoglTexture */
(texture_height - height) / 2, /* center on the CoglTexture */
width, height,
width, height,
format,
rowstride,
data);
return tex;
}</pre></div><p>Because you're copying the image data from the
file into a region of the <span class="type">CoglTexture</span>
that's the same size as the image data in the pixbuf, it isn't
distorted.</p></li></ol></div></div><div class="section"><div class="titlepage"><div><div><h4 class="title"><a name="textures-crossfade-discussion-slideshows"></a>7.3.2. Slideshows</h4></div></div></div><p>The two texture solution can be easily extended
to cycle through multiple images. To begin with, the first
image is loaded into the <code class="varname">top</code> texture. Then,
the basic pattern for transitioning to the next image is as follows:</p><div class="itemizedlist"><ul class="itemizedlist" style="list-style-type: disc; "><li class="listitem"><p>Copy the data from the <code class="varname">top</code> texture
to the <code class="varname">bottom</code> texture.</p></li><li class="listitem"><p>Make the <code class="varname">top</code> texture transparent
and the <code class="varname">bottom</code> texture opaque (using
<code class="function">clutter_state_warp_to_state()</code>). At this
point, it appears as though the textures haven't changed.</p></li><li class="listitem"><p>Load the next image into <code class="varname">top</code>.</p></li><li class="listitem"><p>When <code class="varname">top</code> has finished loading,
fade it in while simultaneously fading out
<code class="varname">bottom</code> (using
<code class="function">clutter_state_set_state()</code>).</p></li></ul></div><p>The <a class="link" href="textures-crossfade.html#textures-crossfade-example-3" title="Example 4.6. A simple slideshow application using two ClutterTextures">sample
code in the appendix</a> implements this as part of
a simple slideshow application.</p></div></div><div class="section"><div class="titlepage"><div><div><h3 class="title"><a name="idp70956432"></a>7.4. Full examples</h3></div></div></div><div class="example"><a name="textures-crossfade-example-1"></a><p class="title"><b>Example 4.4. Cross-fading between two images using two
<span class="type">ClutterTextures</span></b></p><div class="example-contents"><pre class="programlisting">#include <stdlib.h>
#include <clutter/clutter.h>
static gchar *source = NULL;
static gchar *target = NULL;
static guint duration = 1000;
static GOptionEntry entries[] = {
{
"source", 's',
0,
G_OPTION_ARG_FILENAME, &source,
"The source image of the cross-fade", "FILE"
},
{
"target", 't',
0,
G_OPTION_ARG_FILENAME, &target,
"The target image of the cross-fade", "FILE"
},
{
"duration", 'd',
0,
G_OPTION_ARG_INT, &duration,
"The duration of the cross-fade, in milliseconds", "MSECS"
},
{ NULL }
};
static gboolean
start_animation (ClutterActor *actor,
ClutterEvent *event,
gpointer user_data)
{
ClutterState *transitions = CLUTTER_STATE (user_data);
clutter_state_set_state (transitions, "show-top");
return TRUE;
}
static gboolean
load_image (ClutterTexture *texture,
gchar *image_path)
{
GError *error = NULL;
gboolean success = clutter_texture_set_from_file (CLUTTER_TEXTURE (texture),
image_path,
&error);
if (error != NULL)
{
g_warning ("Error loading %s\n%s", image_path, error->message);
g_error_free (error);
exit (EXIT_FAILURE);
}
return success;
}
int
main (int argc, char *argv[])
{
GError *error = NULL;
/* UI */
ClutterActor *stage;
ClutterLayoutManager *layout;
ClutterActor *box;
ClutterActor *top, *bottom;
ClutterState *transitions;
if (clutter_init_with_args (&argc, &argv,
" - cross-fade", entries,
NULL,
NULL) != CLUTTER_INIT_SUCCESS)
return 1;
if (source == NULL || target == NULL)
{
g_print ("Usage: %s -s <source> -t <target> [-d <duration>]\n", argv[0]);
exit (EXIT_FAILURE);
}
if (clutter_init (&argc, &argv) != CLUTTER_INIT_SUCCESS)
return 1;
stage = clutter_stage_new ();
clutter_stage_set_title (CLUTTER_STAGE (stage), "cross-fade");
clutter_actor_set_size (stage, 400, 300);
clutter_actor_show (stage);
g_signal_connect (stage, "destroy", G_CALLBACK (clutter_main_quit), NULL);
layout = clutter_bin_layout_new (CLUTTER_BIN_ALIGNMENT_CENTER,
CLUTTER_BIN_ALIGNMENT_CENTER);
box = clutter_box_new (layout);
clutter_actor_set_size (box, 400, 300);
bottom = clutter_texture_new ();
top = clutter_texture_new ();
clutter_container_add_actor (CLUTTER_CONTAINER (box), bottom);
clutter_container_add_actor (CLUTTER_CONTAINER (box), top);
clutter_container_add_actor (CLUTTER_CONTAINER (stage), box);
/* load the first image into the bottom */
load_image (CLUTTER_TEXTURE (bottom), source);
/* load the second image into the top */
load_image (CLUTTER_TEXTURE (top), target);
/* animations */
transitions = clutter_state_new ();
clutter_state_set (transitions, NULL, "show-bottom",
top, "opacity", CLUTTER_LINEAR, 0,
bottom, "opacity", CLUTTER_LINEAR, 255,
NULL);
clutter_state_set (transitions, NULL, "show-top",
top, "opacity", CLUTTER_EASE_IN_CUBIC, 255,
bottom, "opacity", CLUTTER_EASE_IN_CUBIC, 0,
NULL);
clutter_state_set_duration (transitions, NULL, NULL, duration);
/* make the bottom opaque and top transparent */
clutter_state_warp_to_state (transitions, "show-bottom");
/* on key press, fade in the top texture and fade out the bottom texture */
g_signal_connect (stage,
"key-press-event",
G_CALLBACK (start_animation),
transitions);
clutter_actor_show (stage);
clutter_main ();
g_object_unref (transitions);
if (error != NULL)
g_error_free (error);
return EXIT_SUCCESS;
}
</pre></div></div><br class="example-break"><div class="example"><a name="textures-crossfade-example-2"></a><p class="title"><b>Example 4.5. Cross-fading between two images using one
<span class="type">ClutterTexture</span> and the COGL API</b></p><div class="example-contents"><pre class="programlisting">#include <stdlib.h>
#include <clutter/clutter.h>
static gchar *source = NULL;
static gchar *target = NULL;
static guint duration = 1000;
static GOptionEntry entries[] = {
{
"source", 's',
0,
G_OPTION_ARG_FILENAME, &source,
"The source image of the cross-fade", "FILE"
},
{
"target", 't',
0,
G_OPTION_ARG_FILENAME, &target,
"The target image of the cross-fade", "FILE"
},
{
"duration", 'd',
0,
G_OPTION_ARG_INT, &duration,
"The duration of the cross-fade, in milliseconds", "MSECS"
},
{ NULL }
};
static void
_update_progress_cb (ClutterTimeline *timeline,
guint elapsed_msecs,
ClutterTexture *texture)
{
CoglHandle copy;
gdouble progress;
CoglColor constant;
CoglHandle material = clutter_texture_get_cogl_material (texture);
if (material == COGL_INVALID_HANDLE)
return;
/* You should assume that a material can only be modified once, after
* its creation; if you need to modify it later you should use a copy
* instead. Cogl makes copying materials reasonably cheap
*/
copy = cogl_material_copy (material);
progress = clutter_timeline_get_progress (timeline);
/* Create the constant color to be used when combining the two
* material layers; we use a black color with an alpha component
* depending on the current progress of the timeline
*/
cogl_color_init_from_4ub (&constant, 0x00, 0x00, 0x00, 0xff * progress);
/* This sets the value of the constant color we use when combining
* the two layers
*/
cogl_material_set_layer_combine_constant (copy, 1, &constant);
/* The Texture now owns the material */
clutter_texture_set_cogl_material (texture, copy);
cogl_handle_unref (copy);
clutter_actor_queue_redraw (CLUTTER_ACTOR (texture));
}
static CoglHandle
load_cogl_texture (const char *type,
const char *file)
{
GError *error = NULL;
CoglHandle retval = cogl_texture_new_from_file (file,
COGL_TEXTURE_NO_SLICING,
COGL_PIXEL_FORMAT_ANY,
&error);
if (error != NULL)
{
g_print ("Unable to load %s image: %s\n", type, error->message);
g_error_free (error);
exit (EXIT_FAILURE);
}
return retval;
}
static int
print_usage_and_exit (const char *exec_name,
int exit_code)
{
g_print ("Usage: %s -s <source> -t <target> [-d <duration>]\n", exec_name);
return exit_code;
}
int
main (int argc, char *argv[])
{
CoglHandle texture_1;
CoglHandle texture_2;
CoglHandle material;
ClutterActor *stage;
ClutterActor *texture;
ClutterTimeline *timeline;
if (clutter_init_with_args (&argc, &argv,
" - Crossfade", entries,
NULL,
NULL) != CLUTTER_INIT_SUCCESS)
return 1;
if (source == NULL || target == NULL)
return print_usage_and_exit (argv[0], EXIT_FAILURE);
/* Load the source and target images using Cogl, because we need
* to combine them into the same ClutterTexture.
*/
texture_1 = load_cogl_texture ("source", source);
texture_2 = load_cogl_texture ("target", target);
/* Create a new Cogl material holding the two textures inside two
* separate layers.
*/
material = cogl_material_new ();
cogl_material_set_layer (material, 1, texture_1);
cogl_material_set_layer (material, 0, texture_2);
/* Set the layer combination description for the second layer; the
* default for Cogl is to simply multiply the layer with the
* precendent one. In this case we interpolate the color for each
* pixel between the pixel value of the previous layer and the
* current one, using the alpha component of a constant color as
* the interpolation factor.
*/
cogl_material_set_layer_combine (material, 1,
"RGBA = INTERPOLATE (PREVIOUS, "
"TEXTURE, "
"CONSTANT[A])",
NULL);
/* The material now owns the two textures */
cogl_handle_unref (texture_1);
cogl_handle_unref (texture_2);
/* Create a Texture and place it in the middle of the stage; then
* assign the material we created earlier to the Texture for painting
* it
*/
stage = clutter_stage_new ();
clutter_stage_set_title (CLUTTER_STAGE (stage), "cross-fade");
clutter_actor_set_size (stage, 400, 300);
clutter_actor_show (stage);
g_signal_connect (stage, "destroy", G_CALLBACK (clutter_main_quit), NULL);
texture = clutter_texture_new ();
clutter_container_add_actor (CLUTTER_CONTAINER (stage), texture);
clutter_texture_set_cogl_material (CLUTTER_TEXTURE (texture), material);
clutter_actor_add_constraint (texture, clutter_align_constraint_new (stage, CLUTTER_ALIGN_X_AXIS, 0.5));
clutter_actor_add_constraint (texture, clutter_align_constraint_new (stage, CLUTTER_ALIGN_Y_AXIS, 0.5));
cogl_handle_unref (material);
/* The timeline will drive the cross-fading */
timeline = clutter_timeline_new (duration);
g_signal_connect (timeline, "new-frame", G_CALLBACK (_update_progress_cb), texture);
clutter_timeline_start (timeline);
clutter_main ();
g_object_unref (timeline);
return EXIT_SUCCESS;
}
</pre></div></div><br class="example-break"><div class="example"><a name="textures-crossfade-example-3"></a><p class="title"><b>Example 4.6. A simple slideshow application using two
<span class="type">ClutterTextures</span></b></p><div class="example-contents"><pre class="programlisting">/*
* Simple slideshow application, cycling images between
* two ClutterTextures
*
* Run by passing one or more image paths or directory globs
* which will pick up image files
*
* When running, press any key to go to the next image
*/
#include <stdlib.h>
#include <clutter/clutter.h>
static guint stage_side = 600;
static guint animation_duration_ms = 1500;
static const ClutterColor stage_color = { 0x33, 0x33, 0x55, 0xff };
typedef struct {
ClutterActor *top;
ClutterActor *bottom;
ClutterState *transitions;
GSList *image_paths;
guint next_image_index;
} State;
static gboolean
load_next_image (State *app)
{
gpointer next;
gchar *image_path;
CoglHandle *cogl_texture;
GError *error = NULL;
/* don't do anything if already animating */
ClutterTimeline *timeline = clutter_state_get_timeline (app->transitions);
if (clutter_timeline_is_playing (timeline) == 1)
{
g_debug ("Animation is running already");
return FALSE;
}
if (!app->next_image_index)
app->next_image_index = 0;
next = g_slist_nth_data (app->image_paths, app->next_image_index);
if (next == NULL)
return FALSE;
image_path = (gchar *)next;
g_debug ("Loading %s", image_path);
cogl_texture = clutter_texture_get_cogl_texture (CLUTTER_TEXTURE (app->top));
if (cogl_texture != NULL)
{
/* copy the current texture into the background */
clutter_texture_set_cogl_texture (CLUTTER_TEXTURE (app->bottom), cogl_texture);
/* make the bottom opaque and top transparent */
clutter_state_warp_to_state (app->transitions, "show-bottom");
}
/* load the next image into the top */
clutter_texture_set_from_file (CLUTTER_TEXTURE (app->top),
image_path,
&error);
if (error != NULL)
{
g_warning ("Error loading %s\n%s", image_path, error->message);
g_error_free (error);
return FALSE;
}
/* fade in the top texture and fade out the bottom texture */
clutter_state_set_state (app->transitions, "show-top");
app->next_image_index++;
return TRUE;
}
static gboolean
_key_pressed_cb (ClutterActor *actor,
ClutterEvent *event,
gpointer user_data)
{
State *app = (State *)user_data;
load_next_image (app);
return TRUE;
}
int
main (int argc, char *argv[])
{
State *app = g_new0 (State, 1);
guint i;
GError *error = NULL;
/* UI */
ClutterActor *stage;
ClutterLayoutManager *layout;
ClutterActor *box;
if (argc < 2)
{
g_print ("Usage: %s <image paths to load>\n", argv[0]);
exit (EXIT_FAILURE);
}
app->image_paths = NULL;
/*
* NB if your shell globs arguments to this program so argv
* includes non-image files, they will fail to load and throw errors
*/
for (i = 1; i < argc; i++)
app->image_paths = g_slist_append (app->image_paths, argv[i]);
if (clutter_init (&argc, &argv) != CLUTTER_INIT_SUCCESS)
return 1;
stage = clutter_stage_new ();
g_signal_connect (stage, "destroy", G_CALLBACK (clutter_main_quit), NULL);
clutter_stage_set_title (CLUTTER_STAGE (stage), "cross-fade");
clutter_actor_set_size (stage, stage_side, stage_side);
clutter_stage_set_color (CLUTTER_STAGE (stage), &stage_color);
layout = clutter_bin_layout_new (CLUTTER_BIN_ALIGNMENT_CENTER,
CLUTTER_BIN_ALIGNMENT_CENTER);
box = clutter_box_new (layout);
clutter_actor_set_size (box, stage_side, stage_side);
app->bottom = clutter_texture_new ();
clutter_texture_set_keep_aspect_ratio (CLUTTER_TEXTURE (app->bottom), TRUE);
app->top = clutter_texture_new ();
clutter_texture_set_keep_aspect_ratio (CLUTTER_TEXTURE (app->top), TRUE);
clutter_container_add_actor (CLUTTER_CONTAINER (box), app->bottom);
clutter_container_add_actor (CLUTTER_CONTAINER (box), app->top);
clutter_container_add_actor (CLUTTER_CONTAINER (stage), box);
/* animations */
app->transitions = clutter_state_new ();
clutter_state_set (app->transitions, NULL, "show-top",
app->top, "opacity", CLUTTER_EASE_IN_CUBIC, 255,
app->bottom, "opacity", CLUTTER_EASE_IN_CUBIC, 0,
NULL);
clutter_state_set (app->transitions, NULL, "show-bottom",
app->top, "opacity", CLUTTER_LINEAR, 0,
app->bottom, "opacity", CLUTTER_LINEAR, 255,
NULL);
clutter_state_set_duration (app->transitions,
NULL,
NULL,
animation_duration_ms);
/* display the next (first) image */
load_next_image (app);
/* key press displays the next image */
g_signal_connect (stage,
"key-press-event",
G_CALLBACK (_key_pressed_cb),
app);
clutter_actor_show (stage);
clutter_main ();
g_slist_free (app->image_paths);
g_object_unref (app->transitions);
g_free (app);
if (error != NULL)
g_error_free (error);
return EXIT_SUCCESS;
}
</pre></div></div><br class="example-break"></div></div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="textures-reflection.html">Prev</a> </td><td width="20%" align="center"><a accesskey="u" href="textures.html">Up</a></td><td width="40%" align="right"> <a accesskey="n" href="animations.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">6. Creating a reflection of a texture </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> Chapter 5. Animations</td></tr></table></div></body></html>
|