cookbook: Simplified and clarified example code

Modified the "animation reuse" sample code to provide
a simpler example to explain in the recipe.

Also modified variable names to mirror the names used
for the previous "complex animation" example and added
some more comments, to further simplify and support the
recipe.

doc/cookbook/examples/animations-reuse-animation.json

@@ -6,11 +6,8 @@
 
   {
     "type" : "ClutterAnimator",
-    "id" : "bounce",
+    "id" : "animator",
-    "timeline" : {
+    "duration" : 2000,
-      "type" : "ClutterTimeline",
-      "duration" : 2500
-    },
 
     "properties" : [
       {
@@ -18,21 +15,8 @@
         "name" : "x",
         "ease-in" : true,
         "keys" : [
-          [ 0.2, "easeOutCubic", 100.0 ],
+          [ 0.0, "linear", 0.0 ],
-          [ 0.6, "easeOutCubic", 150.0 ],
+          [ 1.0, "easeOutCubic", 150.0 ]
-          [ 0.8, "linear", 350.0 ],
-          [ 1.0, "linear", 500.0 ]
-        ]
-      },
-      {
-        "object" : "rig",
-        "name" : "y",
-        "ease-in" : true,
-        "keys" : [
-          [ 0.2, "easeOutCubic", 200.0 ],
-          [ 0.6, "easeOutBounce",  200.0 ],
-          [ 0.8, "linear", 200.0 ],
-          [ 1.0, "linear", 0.0 ]
         ]
       },
       {
@@ -40,10 +24,8 @@
         "name" : "scale-x",
         "ease-in" : true,
         "keys" : [
-          [ 0.2, "easeOutElastic", 2.0 ],
+          [ 0.5, "linear", 1.0 ],
-          [ 0.6, "easeOutBounce",  4.0 ],
+          [ 1.0, "easeOutBack", 2.0 ]
-          [ 0.8, "linear", 4.0 ],
-          [ 1.0, "linear", 1.0 ]
         ]
       },
       {
@@ -51,10 +33,8 @@
         "name" : "scale-y",
         "ease-in" : true,
         "keys" : [
-          [ 0.2, "easeOutElastic", 2.0 ],
+          [ 0.5, "linear", 1.0 ],
-          [ 0.6, "easeOutBounce",  4.0 ],
+          [ 1.0, "easeOutBack", 2.0 ]
-          [ 0.8, "linear", 4.0 ],
-          [ 1.0, "linear", 1.0 ]
         ]
       }
     ]

doc/cookbook/examples/animations-reuse-ui.json

@@ -2,8 +2,8 @@
   {
     "type" : "ClutterStage",
     "id" : "stage",
-    "width" : 550,
+    "width" : 300,
-    "height" : 400,
+    "height" : 200,
     "color" : "#333355ff",
 
     "signals" : [
@@ -11,13 +11,13 @@
     ],
 
     "children" : [
-
       {
         "type" : "ClutterRectangle",
         "id" : "rect1",
-        "color" : "red",
+        "color" : "white",
         "width" : 50,
         "height" : 50,
+        "y" : 50,
         "reactive" : true,
         "signals" : [
           { "name" : "button-press-event", "handler" : "foo_button_pressed_cb" }
@@ -30,6 +30,7 @@
         "color" : "blue",
         "width" : 50,
         "height" : 50,
+        "y" : 50,
         "reactive" : true,
         "signals" : [
           { "name" : "button-press-event", "handler" : "foo_button_pressed_cb" }
@@ -42,12 +43,38 @@
         "color" : "green",
         "width" : 50,
         "height" : 50,
+        "y" : 50,
+        "reactive" : true,
+        "signals" : [
+          { "name" : "button-press-event", "handler" : "foo_button_pressed_cb" }
+        ]
+      },
+
+      {
+        "type" : "ClutterRectangle",
+        "id" : "rect4",
+        "color" : "red",
+        "width" : 50,
+        "height" : 50,
+        "y" : 50,
+        "reactive" : true,
+        "signals" : [
+          { "name" : "button-press-event", "handler" : "foo_button_pressed_cb" }
+        ]
+      },
+
+      {
+        "type" : "ClutterRectangle",
+        "id" : "rect5",
+        "color" : "grey",
+        "width" : 50,
+        "height" : 50,
+        "y" : 50,
         "reactive" : true,
         "signals" : [
           { "name" : "button-press-event", "handler" : "foo_button_pressed_cb" }
         ]
       }
-
     ]
   }
 ]

doc/cookbook/examples/animations-reuse.c

@@ -32,18 +32,20 @@ foo_button_pressed_cb (ClutterActor *actor,
 
   ClutterScript *script;
   ClutterActor *rig;
-  ClutterAnimator *bounce;
+  ClutterAnimator *animator;
 
+  /* load the rig and its animator from a JSON file */
   script = clutter_script_new ();
 
+  /* use a function defined statically in this source file to load the JSON */
   load_script_from_file (script, ANIMATION_FILE);
 
   clutter_script_get_objects (script,
                               "rig", &rig,
-                              "bounce", &bounce,
+                              "animator", &animator,
                               NULL);
 
-  /* remove the button press handler */
+  /* remove the button press handler from the rectangle */
   g_signal_handlers_disconnect_matched (actor,
                                         G_SIGNAL_MATCH_FUNC,
                                         0,
@@ -55,11 +57,21 @@ foo_button_pressed_cb (ClutterActor *actor,
   /* add a callback to clean up the script when the rig is destroyed */
   g_object_set_data_full (G_OBJECT (rig), "script", script, g_object_unref);
 
+  /* add the rig to the stage */
   clutter_container_add_actor (CLUTTER_CONTAINER (stage), rig);
 
+  /* place the rig at the same coordinates on the stage as the rectangle */
+  clutter_actor_set_position (rig,
+                              clutter_actor_get_x (actor),
+                              clutter_actor_get_y (actor));
+
+  /* put the rectangle into the top-left corner of the rig */
   clutter_actor_reparent (actor, rig);
 
-  clutter_animator_start (bounce);
+  clutter_actor_set_position (actor, 0, 0);
+
+  /* animate the rig */
+  clutter_animator_start (animator);
 
   return TRUE;
 }