<p>Create the structure of the application, represented by the <span style="font-family: Courier New,Courier,monospace">appdata</span> struct, that holds the main UI components of the application:</p>
+
<pre class="prettyprint">
+// Defines to be used for positioning buttons, their sizes, padding values, etc.
+#define BUTTON_BOX_X_POSITION 20
+#define BUTTON_BOX_Y_POSITION 500
+#define TARGET_BUTTON_X_POSITION 260
+#define TARGET_BUTTON_Y_POSITION 100
+#define DEFAULT_BUTTON_SIZE 200, 100
+#define SCREEN_WIDTH 720
+#define SCREEN_HEIGHT 1280
+#define BUTTON_PADDING_VALUE 20
+
typedef struct
appdata
{
- Evas_Object *win; // Main window
- Evas_Object *label; // Title label
- Evas_Object *button; // Button object, the target of the animations
- Evas_Object *buttonbck; // Button representing the back of the target button
- Evas_Object *hbox; // Horizontal box to store the vertical boxes
- Evas_Object *left_vbox; // Vertical box for the first button column
- Evas_Object *center_vbox; // // Vertical box for the second button column
- Evas_Object *right_vbox; // // Vertical box for the last button column
+ Evas_Object *win; // Main window
+ Evas_Object *label; // Title label
+ Evas_Object *button; // Button object, the target of the animations
+ Evas_Object *buttonbck; // Button representing the back of the target button
+ Evas_Object *hbox; // Horizontal box to store the vertical boxes
+ Evas_Object *left_vbox; // Vertical box for the first button column
+ Evas_Object *center_vbox; // Vertical box for the second button column
+ Evas_Object *right_vbox; // Vertical box for the last button column
float rt_angle, zto, zfrom; // Variables used to store values for animations
} appdata_s;
</pre>
// Label
ad->label = elm_label_add(ad->win);
- elm_object_text_set(ad->label, "Effects Tutorial");
+ elm_object_text_set(ad->label, "Elementary Animation Tutorial");
evas_object_size_hint_weight_set(ad->label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_win_resize_object_add(ad->win, ad->label);
evas_object_show(ad->label);
// Show the window after the base GUI is set up
evas_object_show(ad->win);
- ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad);
</pre>
</li>
<li>
// Create a button in the app window
ad->button = elm_button_add(ad->win);
- // Move the button to x = 50 y = 100
- evas_object_move(ad->button, 50, 100);
+ // Move the button to x = 260 y = 100
+ evas_object_move(ad->button, TARGET_BUTTON_X_POSITION, TARGET_BUTTON_Y_POSITION);
+
+ // Set text for target button
+ elm_object_text_set(ad->button, "Target");
- // Resize the button 100 x 50
- evas_object_resize(ad->button, 200, 50);
+ // Resize the button 200 x 100
+ evas_object_resize(ad->button, DEFAULT_BUTTON_SIZE);
// Show the button
evas_object_show(ad->button);
// Create a back button in the app window
ad->buttonbck = elm_button_add(ad->win);
elm_object_text_set(ad->buttonbck, "Button back");
- evas_object_move(ad->buttonbck, 50, 100);
- evas_object_resize(ad->buttonbck, 200, 50);
+ evas_object_move(ad->buttonbck, TARGET_BUTTON_X_POSITION, TARGET_BUTTON_Y_POSITION);
+ evas_object_resize(ad->buttonbck, DEFAULT_BUTTON_SIZE);
_create_btn_box(ad);
-
} // End of create_base_gui
</pre>
</li></ol></li>
// Create the main container box
ad->hbox = elm_box_add(ad->win);
elm_box_horizontal_set(ad->hbox, EINA_TRUE);
-elm_box_homogeneous_set(ad->hbox, EINA_TRUE);
-evas_object_move(ad->hbox, 10, 500);
+elm_box_homogeneous_set(ad->hbox, EINA_FALSE);
+elm_box_padding_set(ad->hbox, BUTTON_PADDING_VALUE, 0);
+evas_object_move(ad->hbox, BUTTON_BOX_X_POSITION, BUTTON_BOX_Y_POSITION);
+evas_object_resize(ad->hbox, SCREEN_WIDTH - 2 * BUTTON_PADDING_VALUE, SCREEN_HEIGHT);
evas_object_show(ad->hbox);
// Create the first column
ad->left_vbox = elm_box_add(ad->hbox);
elm_box_horizontal_set(ad->left_vbox, EINA_FALSE);
elm_box_homogeneous_set(ad->left_vbox, EINA_TRUE);
+
+elm_box_padding_set(ad->left_vbox, 0, BUTTON_PADDING_VALUE);
+evas_object_size_hint_weight_set(ad->left_vbox, EVAS_HINT_EXPAND, 0.0);
+evas_object_size_hint_align_set(ad->left_vbox, EVAS_HINT_FILL, 0.0);
+
evas_object_show(ad->left_vbox);
elm_box_pack_start(ad->hbox, ad->left_vbox);
ad->center_vbox = elm_box_add(ad->hbox);
elm_box_horizontal_set(ad->center_vbox, EINA_FALSE);
elm_box_homogeneous_set(ad->center_vbox, EINA_TRUE);
+
+elm_box_padding_set(ad->center_vbox, 0, BUTTON_PADDING_VALUE);
+evas_object_size_hint_weight_set(ad->center_vbox, EVAS_HINT_EXPAND, 0.0);
+evas_object_size_hint_align_set(ad->center_vbox, EVAS_HINT_FILL, 0.0);
+
evas_object_show(ad->center_vbox);
elm_box_pack_end(ad->hbox, ad->center_vbox);
ad->right_vbox = elm_box_add(ad->hbox);
elm_box_horizontal_set(ad->right_vbox, EINA_FALSE);
elm_box_homogeneous_set(ad->right_vbox, EINA_TRUE);
+
+elm_box_padding_set(ad->right_vbox, 0, BUTTON_PADDING_VALUE);
+evas_object_size_hint_weight_set(ad->right_vbox, EVAS_HINT_EXPAND, 0.0);
+evas_object_size_hint_align_set(ad->right_vbox, EVAS_HINT_FILL, 0.0);
+
evas_object_show(ad->right_vbox);
elm_box_pack_end(ad->hbox, ad->right_vbox);
</pre>
+
+<p>The following figure illustrates the UI components of the application.</p>
+
+<p class="figure">Figure: UI components of the application</p>
+<p align="center"><img alt="Elementary Animation Tutorial screen" src="../../images/elementary_animation_tutorial.png" /></p>
+
</li>
<li>
<p>Create the first action button for the resize effect.</p>
<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function defines the callback function that is to be called when the button is clicked. In this example, set a <span style="font-family: Courier New,Courier,monospace">_btn_resize_cb()</span> function and pass the application data <span style="font-family: Courier New,Courier,monospace">ad</span> to this callback function.</p>
<pre class="prettyprint">
// Create the button
-btn_resize = elm_button_add(ad->win);
+Evas_Object *btn_resize = elm_button_add(ad->win);
+
// Set the button text
elm_object_text_set(btn_resize, "Resize");
-// Set the hint weight policy
-evas_object_size_hint_weight_set(btn_resize, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+// Set the hint weight and align policy
+evas_object_size_hint_weight_set(btn_resize, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(btn_resize, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
// Show the button
evas_object_show(btn_resize);
+
// Set the "clicked" callback
evas_object_smart_callback_add(btn_resize, "clicked", _btn_resize_cb, ad);
+
// Add the button to the first column
elm_box_pack_end(ad->left_vbox, btn_resize);
</pre>
</pre>
<p>When the resize button is clicked, the animation target button grows.</p>
-<p>All the action buttons are created exactly the same way as the resize button, with a callback and an animation function.</p>
+<p>The following figure illustrates the Resize Effect screen.</p>
+
+<p class="figure">Figure: Elementary Animation Resize Effect screen: the object grows from 100×50 to 300×150</p>
+<p align="center"><img alt="Resize Effect screen" src="../../images/elementary_animation_resize.png" /></p>
</li>
</ol>
</li>
</ol>
+<p>All the action buttons are created exactly the same way as the resize button, with a callback and an animation function.</p>
+
<h2 id="rotate" name="rotate">Creating a Rotation Effect</h2>
<p>The rotation effect rotates the animation target button with an angle of 360°. This angle is stored in the application data as <span style="font-family: Courier New,Courier,monospace">ad->rt_angle</span>.</p>
<p>Create the button and add it to the center column in the <span style="font-family: Courier New,Courier,monospace">_create_btn_box()</span> function:</p>
<pre class="prettyprint">
// Rotation button
-btn_rotate = elm_button_add(ad->win);
+Evas_Object *btn_rotate = elm_button_add(ad->win);
elm_object_text_set(btn_rotate, "Rotate");
-evas_object_size_hint_weight_set(btn_rotate, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_size_hint_weight_set(btn_rotate, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(btn_rotate, EVAS_HINT_FILL, EVAS_HINT_FILL);
evas_object_show(btn_rotate);
evas_object_smart_callback_add(btn_rotate, "clicked", _btn_rotate_cb, ad);
elm_box_pack_end(ad->center_vbox, btn_rotate);
elm_transit_go(trans);
}
</pre>
+
+<p>The following figure illustrates the Rotate Effect screen.</p>
+
+<p class="figure">Figure: Elementary Animation Rotate Effect screen</p>
+<p align="center"><img alt="Rotate Effect screen" src="../../images/elementary_animation_rotate.png" /></p>
</li>
</ol>
<pre class="prettyprint">
// Zoom button
-btn_zoom = elm_button_add(ad->win);
+Evas_Object *btn_zoom = elm_button_add(ad->win);
elm_object_text_set(btn_zoom, "Zoom");
-evas_object_size_hint_weight_set(btn_zoom, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_size_hint_weight_set(btn_zoom, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(btn_zoom, EVAS_HINT_FILL, EVAS_HINT_FILL);
evas_object_show(btn_zoom);
evas_object_smart_callback_add(btn_zoom, "clicked", _btn_zoom_cb, ad);
elm_box_pack_end(ad->right_vbox, btn_zoom);
elm_transit_go(trans);
}
</pre>
+
+<p>The following figure illustrates the Zoom Effect screen.</p>
+
+<p class="figure">Figure: Elementary Animation Zoom Effect screen</p>
+<p align="center"><img alt="Zoom Effect screen" src="../../images/elementary_animation_zoom.png" /></p>
+
</li>
</ol>
<pre class="prettyprint">
// Flip button
-btn_flip = elm_button_add(ad->win);
+Evas_Object *btn_flip = elm_button_add(ad->win);
elm_object_text_set(btn_flip, "Flip x");
-evas_object_size_hint_weight_set(btn_flip, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_size_hint_weight_set(btn_flip, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(btn_flip, EVAS_HINT_FILL, EVAS_HINT_FILL);
evas_object_show(btn_flip);
evas_object_smart_callback_add(btn_flip, "clicked", _btn_flip_cb, ad);
elm_box_pack_end(ad->left_vbox, btn_flip);
elm_transit_go(trans);
}
</pre>
+
+<p>The following figure illustrates the Flip Effect screen.</p>
+
+<p class="figure">Figure: Elementary Animation Flip Effect screen : flip on X axis</p>
+<p align="center"><img alt="Flip Effect screen" src="../../images/elementary_animation_flip.png" /></p>
+
</li>
</ol>
<p>Create the blend effect button:</p>
<pre class="prettyprint">
// Blend button
-btn_blend = elm_button_add(ad->win);
+Evas_Object *btn_blend = elm_button_add(ad->win);
elm_object_text_set(btn_blend, "Blend");
-evas_object_size_hint_weight_set(btn_blend, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_size_hint_weight_set(btn_blend, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(btn_blend, EVAS_HINT_FILL, EVAS_HINT_FILL);
evas_object_show(btn_blend);
evas_object_smart_callback_add(btn_blend, "clicked", _btn_blend_cb, ad);
elm_box_pack_end(ad->center_vbox, btn_blend);
elm_transit_go(trans);
}
</pre>
+
+<p>The following figure illustrates the Blend Transition Effect screen.</p>
+
+<p class="figure">Figure: Elementary Animation Blend Transition Effect screen</p>
+<p align="center"><img alt="Blend Transition Effect screen" src="../../images/elementary_animation_blend.png" /></p>
+
</li>
</ol>
<p>Create the fade button:</p>
<pre class="prettyprint">
// Fade button
-btn_fade = elm_button_add(ad->win);
+Evas_Object *btn_fade = elm_button_add(ad->win);
elm_object_text_set(btn_fade, "Fade");
-evas_object_size_hint_weight_set(btn_fade, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_size_hint_weight_set(btn_fade, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(btn_fade, EVAS_HINT_FILL, EVAS_HINT_FILL);
evas_object_show(btn_fade);
evas_object_smart_callback_add(btn_fade, "clicked", _btn_fade_cb, ad);
elm_box_pack_end(ad->right_vbox, btn_fade);
elm_transit_go(trans);
}
</pre>
+
+<p>The following figure illustrates the Fade Effect screen.</p>
+
+<p class="figure">Figure: Elementary Animation Fade Transition Effect screen</p>
+<p align="center"><img alt="Fade Effect screen" src="../../images/elementary_animation_fade.png" /></p>
+
</li>
</ol>
<li>
<p>Create the flip y button:</p>
<pre class="prettyprint">// Flip y button
-btn_flip_y = elm_button_add(ad->win);
+Evas_Object *btn_flip_y = elm_button_add(ad->win);
elm_object_text_set(btn_flip_y, "Flip y");
-evas_object_size_hint_weight_set(btn_flip_y, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_size_hint_weight_set(btn_flip_y, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(btn_flip_y, EVAS_HINT_FILL, EVAS_HINT_FILL);
evas_object_show(btn_flip_y);
evas_object_smart_callback_add(btn_flip_y, "clicked", _btn_flip_y_cb, ad);
elm_box_pack_end(ad->left_vbox, btn_flip_y);
elm_transit_go(trans);
}
</pre>
+
+<p>The following figure illustrates the Flip on y Axis Effect screen.</p>
+
+<p class="figure">Figure: Elementary Animation Flip on y Axis Effect screen: flip on Y axis</p>
+<p align="center"><img alt="Flip on y Axis Effect screen" src="../../images/elementary_animation_flip2.png" /></p>
+
</li>
</ol>
<pre class="prettyprint">
// Wipe button
-btn_wipe = elm_button_add(ad->win);
+Evas_Object *btn_wipe = elm_button_add(ad->win);
elm_object_text_set(btn_wipe, "Wipe");
-evas_object_size_hint_weight_set(btn_wipe, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_size_hint_weight_set(btn_wipe, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(btn_wipe, EVAS_HINT_FILL, EVAS_HINT_FILL);
evas_object_show(btn_wipe);
evas_object_smart_callback_add(btn_wipe, "clicked", _btn_wipe_cb, ad);
elm_box_pack_end(ad->right_vbox, btn_wipe);
elm_transit_go(trans);
}
</pre>
+
+<p>The following figure illustrates the Wipe Effect screen.</p>
+
+<p class="figure">Figure: Elementary Animation Wipe Effect screen</p>
+<p align="center"><img alt="Wipe Effect screen" src="../../images/elementary_animation_wipe.png" /></p>
+
</li>
</ol>
projects / sdk / online-doc.git / commitdiff
