3. Fading an actor out of or into view

3.1. Problem

You want to animate an actor so that it fades out of or into view.

3.2. Solution

Animate the actor's opacity property.

You can do this using any of the approaches provided by the animation API. Here's how to fade out an actor (until it's completely transparent) using implicit animations:

/* fade out actor over 4000 milliseconds */
clutter_actor_animate (actor,
                       "opacity", 0,

Here's an example of a rectangle fading out using this animation:

CLUTTER_EASE_OUT_CUBIC is one of the Clutter easing modes; see the introduction for more details about what these are and how to choose one.

Here's an example of the transitions you could use to fade an actor in and out using ClutterState:

ClutterState *transitions = clutter_state_new ();

/* all transitions last for 2000 milliseconds */
clutter_state_set_duration (transitions, NULL, NULL, 2000);

/* transition from any state to "fade-out" state */
clutter_state_set (transitions,
                   NULL,        /* from state (NULL means "any") */
                   "fade-out",  /* to state */
                   actor, "opacity", CLUTTER_EASE_OUT_QUAD, 0,

/* transition from any state to "fade-in" state */
clutter_state_set (transitions, NULL, "fade-in",
                   actor, "opacity", CLUTTER_EASE_OUT_QUAD, 255,

/* put the actor into the "fade-out" state with no animation */
clutter_state_warp_to_state (transitions, "fade-out");

You would then trigger an animated state change as events occur in the application (e.g. mouse button clicks):

clutter_state_set_state (transitions, "fade-in");

Here's an example of this animation fading in then out again:


ClutterState is most useful where you need to animate an actor backwards and forwards between multiple states (e.g. fade an actor in and out of view). Where you just want to fade an actor in or out once, clutter_actor_animate() is adequate.

3.3. Discussion

Reducing an actor's transparency to zero does not make it inactive: the actor will still be reactive even if it's not visible (responding to key events, mouse clicks etc.). To make it really "disappear", you could use clutter_actor_hide() once you'd made the actor fully transparent.