diff --git a/doc/cookbook/animations.xml b/doc/cookbook/animations.xml index 2cc0cdaae..17741f929 100644 --- a/doc/cookbook/animations.xml +++ b/doc/cookbook/animations.xml @@ -212,7 +212,7 @@ _alpha_ease_in_sextic (ClutterAlpha *alpha, -
+
Inverting Animations
@@ -225,13 +225,156 @@ _alpha_ease_in_sextic (ClutterAlpha *alpha,
Solution - ... + Reverse the direction of the ClutterTimeline + associated with the animation. + + For example, here's how to invert an implicit + animation which moves an actor along the x + axis. The direction of the animation is inverted when the + movement along the x axis is completed; it is + also inverted if the mouse button is pressed on the actor. + + First, set up the animation: + + + + + + + + Next, add a function for inverting the timeline: + + + + + + + + Then add a function which calls _invert_timeline + when the animation completes. More importantly, the callback should + stop emission of the "completed" signal by the animation. This + prevents the ClutterAnimation underlying the implicit + animation from being unreferenced; which in turn allows it to be + inverted: + + + + + + + + Finally, the click callback function uses the same + _invert_timeline function if the animation + is playing; but if the animation is stopped, it will + start it instead: + + + + + + +
Discussion - ... + If you are using ClutterAnimator rather than + implicit animations, clutter_animator_get_timeline() + enables you to get the underlying timeline; you could then use + the techniques shown above to invert it. + + ClutterState enables a different approach + to "inverting" an animation: rather than having a single animation + which you invert, you would define two or more + keys for an actor (or set of actors) and + transition between them. + + For the example above, you would define two keys: + one for the actor's initial position; and a second for the actor + at x = 300.0. You would also define the + transition between them: 2000 milliseconds with a + CLUTTER_EASE_IN_OUT_CUBIC easing mode. + + With the states defined, you would then use + clutter_state_set_state() inside callbacks to + animate the actor between the two x positions. + Behind the scenes, ClutterState would handle the + animations and timelines for you. +