Introduction

The article will demonstrate how to make animations in the Tizen Native Applications. The aim of the article is to present the possibilities offered by the EFL library which is responsible for building the GUI of Tizen native applications. We would like to present the subject in a concise way and using lots of sample code. The knowledge gained after reading this article can be used both for game development as well, as to implement interesting effects in the user interface.

The article was created for developers who have basic knowledge of the C programming language. Developers reading this article should have basic knowledge about the Tizen native application life cycle as well. However, it is not necessary to have the knowledge to understand the examples presented here.

In the sample application attached to the article, you can see animations which were made ​​using the described method. The animations were made using a variety of easing functions to modify motion of the animated object.

Implementation

There are many opportunities to make an animation in a Tizen Native Application. All ways to achieve the animation which was described in this article are based on performing the animation step inside a callback function. In many games, the control is performed using readings from sensors such as an accelerometer or gyroscope. This approach was described in the following article. You have to remember that callbacks ought to be invoked with appropriate frequency or the animation between the calls should be smoothed. To create smooth animations you can use a subset of the EFL library called the Ecore Animator. You will learn more about it later in this article. A good practice is to use delta timing techniques in order to eliminate fluctuations in speed of the displayed animation, associated with changes in the current frame rate. This is particularly important if we want to get high precision of the motion in our animation.

Another way to animate an object is to set a timer which will trigger the animation update function at a specified interval of time. It may be a good solution in a case where we want the animation to be slower than the current frame rate. This type of animation can be useful when you want to make for example a sprite animation in your game. The following code shows how to register the callback:

    #define INTERVAL_IN_SECONDS 0.5

     /* callback function */
    static Eina_Bool
    cb_function(void *data)
    {
        /* do the animation step */
    
        return ECORE_CALLBACK_RENEW;
    }

    […]

    /* register the timer */
    ecore_timer_add(INTERVAL_IN_SECONDS, cb_function, data);

To invoke the animation infinitely the callback function must return ECORE_CALLBACK_RENEW. You can also cancel the animation at any time by returning the value ECORE_CALLBACK_CANCEL.

The EFL library, on which is based the GUI of the Tizen native application, contains a subset called Ecore Animator, developed to create animations. With this tool you can create a callback which will be invoked each time when your program renders a frame. The following code shows how to register the Ecore Animator callback:

    /* callback function */
    static Eina_Bool
    cb_function(void *data)
    {
        /* do the animation step */
    
        return ECORE_CALLBACK_RENEW;
    }

    […]

    /* register the callback */
    ecore_animator_add(cb_function, data);

As in the case of the ecore_timer, the animation can be stopped at any time when a callback function returns the value from ECORE_CALLBACK_CANCEL. The Ecore animator gives you the ability to freeze the animation at any time by calling ecore_animator_freeze(). After that, you can continue the animation by calling the ecore_animator_thaw ().

    /* register the callback */
    Ecore_Animator *animator = ecore_animator_add(cb_function, data);
    
    […]
    
    /* Stop animation */
    Ecore_animator_freeze(animator); 
    
    /* Play animation after freeze */
    Ecore_animator_thaw(animator); 

There is also the possibility to set the time of our animation. In that case in one of the arguments for the callback function, we received the information about the position in the animation. The received value is a floating point number from 0.0 to 1.0. The sample application attached to this article uses the described method.

    /* animation time in seconds */
    #define ANIM_TIME 1.2
     
    […]

    /* callback function */
    static Eina_Bool
    cb_function (void *data, double position)
    {
    	/* do the animation step */

     	return EINA_TRUE;
    }

    […]

    /* register the timer */
    ecore_animator_timeline_add(ANIM_TIME, cb_function, data);

The Ecore Animator also offers a set of easing functions used to map the position in the animation, based on the position of the animated object inside the ecore_animator_pos_map() function. You can easily perform the animation in which for example the object accelerates or bounces. A detailed description of this topic can be found here. In the sample program it has been implemented in the following way:

    /* animation time in seconds */
    #define ANIM_TIME 1.2
    
    […]
    
    int screen_width;
    int screen_height;  
    
    […]
    
    static void
    evas_object_rotate(Evas_Object *object, double degree){
        Evas_Map *m;
        Evas_Coord x, y, w, h;
        m = evas_map_new(4);
        evas_object_geometry_get(object, &x, &y, &w, &h);
        evas_map_util_points_populate_from_object(m, object);
        evas_map_util_rotate(m, degree, x + (w / 2), y + (h / 2));
        evas_object_map_set(object, m);
        evas_object_map_enable_set(object, EINA_TRUE);
    }
    
    […]
    
    /* callback function */
    static Eina_Bool
    _do_animation(void *data, double pos)
    {
         double frame = pos;
         int x, y;
         frame = ecore_animator_pos_map(pos, animation_type, 0.0, 0.0);
         
          /* some mathematical calculations of new X and Y position
          X = …;
          Y = …;
          Double rotation_angle = …; 
           */
    
          […]
    
         evas_object_rotate(data, rotation_angle );
    
         evas_object_move(data, x, y);
    
         return EINA_TRUE;
    }

    […]

    /* register the timer */
    ecore_animator_timeline_add(ANIM_TIME, _do_animation, data);

This animation changed both the position of the object and its rotation. The animated space ship moves according to a tangent trajectory. Depending on the value of the variable animation_type, a different position is being mapped each time and the animated object speeds up, slows down or moves uniformly.

Summary

In this article we have presented how to create an animation in which the steps are invoked at specific time intervals. We have also described an animation in which steps are performed along the rendering of each frame using the ecore_animator.  In addition, the article shows how to stop and resume the animation and how to implement easing functions which are built-in the EFL library. If you want to explore more on EFL, you should check out the documentation.