Adding a new animation tutorial
authorgastal <gastal>
Mon, 9 Apr 2012 13:50:16 +0000 (13:50 +0000)
committergastal <gastal@7cbeb6ba-43b4-40fd-8cce-4c39aea84d33>
Mon, 9 Apr 2012 13:50:16 +0000 (13:50 +0000)
Patch by: Guilherme Iscaro <iscaro@profusion.mobi>

git-svn-id: http://svn.enlightenment.org/svn/e/trunk/edje@69974 7cbeb6ba-43b4-40fd-8cce-4c39aea84d33

doc/examples.dox
src/examples/animations2.c [new file with mode: 0644]
src/examples/animations2.edc [new file with mode: 0644]
src/lib/Edje.h

index 1b56e6e..17fd993 100644 (file)
@@ -18,6 +18,7 @@
  * @li @ref tutorial_edje_multisense
  * @li @ref tutorial_edje_basic2
  * @li @ref tutorial_edje_signals_2
+ * @li @ref tutorial_edje_animations_2
  */
 
 /**
  * edje_cc -id /path/to/the/image signalsBubble.edc
  * @endverbatim
  */
+
+/**
+ * @page tutorial_edje_animations_2 Edje animations example 2
+ *
+ * In this example we will make an animation of a bouncing ball.
+ *
+ * Our focus now will be in the .edc file, because in the C source code we just load the edje object and do
+ * nothing else.
+ *
+ * We want to give the freedom to the object to use the whole canvas of our program, so lets define
+ * the min, max of our group:
+ *
+ * @dontinclude animations2.edc
+ * @skipline max
+ * @skipline min
+ *
+ * You will notice that in our .c file the canvas will have this size
+ *
+ * Now we will define our part that's going to be our image, the ball:
+ * @skip part{
+ * @until type:
+ *
+ *
+ * At the description block bellow we are saying that this part has an image, defining
+ * the max and min size and it's position on the edje_object. The default state is the first
+ * state of the part, this means that when the edje object is loaded this one is going to be showed to you.
+ *
+ * Here it is:
+ * @dontinclude animations2.edc
+ * @skip description
+ * @until }
+ * @until }
+ *
+ * Now in the next description block we are saying where the ball is going to stop.
+ * Note that we have the "inherit" property. This means we are inheriting everything from default,
+ * except rel1 and rel2, because we are redefining it.
+ *
+ * Check the code:
+ *
+ * @skip description
+ * @until }
+ *
+ * We defined how our object will look like and it's position during the animation,
+ * now we need to define how it's going to act during the time. To do this we will
+ * use the programs block
+ *
+ * The first program block will start the animation, it will wait for the 'load' signal. This signal
+ * is generated when the edje object is loaded. The 'after' property is saying to this program block exactly this:
+ * "When you finish, call the program 'animation,state1' ". The 'in' property is saying, wait 0.5 seconds until you execute this program block.
+ *
+ * Here is the code:
+ *
+ * @skip program {
+ * @until }
+ *
+ * Now lets make the ball move and bounce it. In the second program block we are defining what we need to do
+ * with the action property. So we are saying change to the state "down-state" using the transition BOUNCE
+ * and apply this to the part "part_bubble". You can notice that BOUNCE has three parameters, the first one
+ * is saying how much time the transition will last, the second one is the factor of curviness
+ * and the last one is saying how many times and object will bounce.
+ *
+ * The code is very easy:
+ *
+ * @skip program {
+ * @until }
+ *
+ * Now all you have to do is compile the code and run it!
+ *
+ * When you compile and run it you should see this:
+ * @image html signal2final.png
+ * @image rtf signal2final.png
+ * @image latex signal2final.eps width=\textwidth
+ *
+ * The .edc file:
+ * @include animations2.edc
+ *
+ * The source code:
+ * @include animations2.c
+ *
+ * To compile use this command:
+ * @verbatim
+ * gcc -o animations2 animations2.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\"
+ * -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
+ * -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
+ * `pkg-config --cflags --libs evas ecore ecore-evas edje`
+ *
+ * edje_cc  animations2.edc
+ * @endverbatim
+ */
diff --git a/src/examples/animations2.c b/src/examples/animations2.c
new file mode 100644 (file)
index 0000000..0fa9288
--- /dev/null
@@ -0,0 +1,96 @@
+#ifdef HAVE_CONFIG_H
+#include "config.h"
+#else
+#define PACKAGE_EXAMPLES_DIR "."
+#define __UNUSED__
+#endif
+
+#include <Ecore.h>
+#include <Ecore_Evas.h>
+#include <Edje.h>
+#include <stdio.h>
+
+#define WIDTH     (700)
+#define HEIGHT    (700)
+
+static void
+_on_delete(Ecore_Evas *ee)
+{
+   ecore_main_loop_quit();
+}
+
+int
+main(int argc __UNUSED__, char **argv)
+{
+   char edje_file_path[PATH_MAX];
+   const char *edje_file = "animations2.edj";
+   Evas *evas;
+   Ecore_Evas *ee;
+   Eina_Prefix *pfx;
+   Evas_Object *edje_obj;
+   Evas_Object *bg;
+
+   if (!ecore_evas_init()) return EXIT_FAILURE;
+
+   if (!edje_init()) goto shutdown_ecore_evas;
+
+   pfx = eina_prefix_new(argv[0], main, "EDJE_EXAMPLES", "edje/examples",
+                         edje_file, PACKAGE_BIN_DIR, PACKAGE_LIB_DIR,
+                         PACKAGE_DATA_DIR, PACKAGE_DATA_DIR);
+
+   if (!pfx) goto shutdown_edje;
+
+   ee = ecore_evas_new(NULL, 0, 0, WIDTH, HEIGHT, NULL);
+
+   if (!ee) goto eina_prefix_free;
+
+   ecore_evas_callback_delete_request_set(ee, _on_delete);
+   ecore_evas_title_set(ee, "Animations");
+
+   evas = ecore_evas_get(ee);
+
+   bg = evas_object_rectangle_add(evas);
+   evas_object_color_set(bg, 255, 255, 255, 255);
+   evas_object_move(bg, 0, 0);
+   evas_object_resize(bg, WIDTH, HEIGHT);
+   evas_object_show(bg);
+
+   ecore_evas_object_associate(ee, bg, ECORE_EVAS_OBJECT_ASSOCIATE_BASE);
+   evas_object_focus_set(bg, EINA_TRUE);
+
+   edje_obj = edje_object_add(evas);
+
+   snprintf(edje_file_path, sizeof(edje_file_path), "%s/examples/%s",
+            eina_prefix_data_get(pfx), edje_file);
+
+   if (!edje_object_file_set(edje_obj, edje_file_path, "animation_group"))
+     {
+        int err = edje_object_load_error_get(edje_obj);
+        const char *errmsg = edje_load_error_str(err);
+        fprintf(stderr, "Could not load the edje file - reason:%s\n", errmsg);
+        goto eina_prefix_free;
+     }
+
+   evas_object_resize(edje_obj, 700, 700);
+   evas_object_move(edje_obj, 50, 50);
+   evas_object_show(edje_obj);
+
+   ecore_evas_show(ee);
+
+   ecore_main_loop_begin();
+
+   eina_prefix_free(pfx);
+   ecore_evas_free(ee);
+   edje_shutdown();
+   ecore_evas_shutdown();
+
+   return EXIT_SUCCESS;
+
+   eina_prefix_free: eina_prefix_free(pfx);
+
+   shutdown_edje: edje_shutdown();
+
+   shutdown_ecore_evas: ecore_evas_shutdown();
+
+   return EXIT_FAILURE;
+}
diff --git a/src/examples/animations2.edc b/src/examples/animations2.edc
new file mode 100644 (file)
index 0000000..eb7e81c
--- /dev/null
@@ -0,0 +1,48 @@
+collections {
+   group {
+      name: "animation_group";
+      max: 700 700;
+      min: 700 700;
+     images{
+         image: "bubble.png" COMP;
+     }
+    parts{
+              part{
+                   name: "part_bubble";
+                   type: IMAGE;
+                   description{
+                       state: "default" 0.0;
+                       max: 63 63;
+                       min: 63 63;
+                       image{
+                            normal: "bubble.png";
+                       }
+                       rel1.relative: 0.0 0.0;
+                       rel2.relative: 0.0 0.0;
+                    }
+                    description {
+                       state: "down-state" 1.0;
+                       inherit: "default" 0.0;
+                       rel1.relative: 0.0 1.0;
+                       rel2.relative: 0.0 0.0;
+                     }
+         }
+
+    }
+    programs{
+       program {
+         signal: "load";
+         source: "";
+         in: 0.5 0.0;
+         after: "animation,state1";
+       }
+       program {
+         name: "animation,state1";
+         source: "";
+         action: STATE_SET "down-state" 1.0;
+         target: "part_bubble";
+         transition: BOUNCE 2.5 0.0 5.0;
+      }
+    }
+   }
+}
index d90c29e..fc76657 100644 (file)
@@ -172,6 +172,7 @@ part of Edje's API:
 - @ref tutorial_edje_box2
 - @ref tutorial_edje_color_class
 - @ref tutorial_edje_animations
+- @ref tutorial_edje_animations_2
 - @ref Example_Edje_Signals_Messages
 - @ref tutorial_edje_signals_2
 - @ref tutorial_edje_text