Mobile native Wearable native

Edje Animations

One of the greatest strengths of EFL and Edje is the ability to create animations. This tutorial demonstrates how Elm_Transit can create predefined animations, but you can also use the Edje library to create your own animations.

The Edje animations are based on a very simple principle: going from one state to another. If you want to animate something with Edje, you must define two states and move from the first state to the second.

Animating a Rectangle

This example shows how to animate a rectangle. It is positioned in the top left corner of the window and is moved to the bottom right corner in five seconds. To do that with Edje, define a part called "rectangle" with the type RECT: this part has two descriptions (or states). In the first state, the rectangle is in is the top left corner. In the second state, it is in is the bottom right corner. To create the transition, set this EDC code for Edje to switch the object from its current state to another.

collections 
{
   group 
   { 
      name: "main";
      parts 
      {
         part 
         { 
            name: "rectangle";
            type: RECT;
            description 
            { 
               state: "default" 0.0;
               align: 0.0 0.0;
               rel1 {relative: 0.0 0.0;}
               rel2 {relative: 0.3 0.1;}
               color: 0 0 255 255;
            }
            description 
            { 
               state: "default" 0.5;
               align: 0.0 0.0;
               rel1 {relative: 0.7 0.9;}
               rel2 {relative: 1.0 1.0;}
               color: 0 0 255 255;
            }
         }
      }
      programs 
      {
         program 
         { 
            name: "animation,state1";
            source: "";
            signal: "load";
            action: STATE_SET "default" 0.5;
            target: "rectangle";
            transition: LINEAR 5;
         }
      }
   }
}

The "rectangle" part has two descriptions that share the same name, but have a different "version".

part 
{ 
   name: "rectangle";
   type: RECT;
   description 
   { 
      state: "default" 0.0;
   }
   description 
   { 
      state: "default" 0.5;
   }
}

The program defines when and how to move from one state to another. A program is called upon reception of a signal from a source. Here the program is called when the signal load is received from any source.

program 
{ 
   name: "animation,state1";
   source: "";
   signal: "load";
}

An action is performed upon the signal reception. In this example, the state is changed.

action: STATE_SET "default" 0.5;

The program has a target, here the "rectangle".

target: "rectangle";

The program uses a transition to perform the action.

transition: LINEAR 5;

This example produces a blue rectangle that moves from the upper left to the lower right corner with a linear transition in five seconds.

Actions

The Edje programs are not only for animations. There are different actions, for example STATE_SET and ACTION_STOP. You may also send signals with SIGNAL_EMIT.

The STATE_SET action changes the state of the "target".

In the following example, the state of the part named "image" changes to "default" "0.0".

program 
{
   name: "animate";
   signal: "animate";
   action: STATE_SET "default" 0.0;
   transition: LINEAR 3.0;
   target: "image";
}

The ACTION_STOP stops the program specified by "target".

program 
{
   name: "animate_stop";
   signal: "animate_stop";
   action: ACTION_STOP;
   target: "animate_loop";
}

The previous example stops the program defined as "target" named animate_loop. This program runs on the animate_stop signal.

The SIGNAL_EMIT emits a signal that is used to communicate with the application directly from the theme.

The following example emits a signal frame_move "start" when it receives the signal mouse,down,* from the video_over part. In other words, it sends the signal frame_move "start" when the mouse is pressed in the video_over part.

program 
{ 
   name: "video_move_start";
   signal: "mouse,down,*";
   source: "video_mover";
   action: SIGNAL_EMIT "frame_move" "start";
}

Transitions

The transitions available are:

  • LIN or LINEAR: makes a linear transition and takes the duration in seconds as the parameter
  • SIN or SINUSOIDAL: makes a sinusoidal transition and takes the duration in seconds as the parameter
  • ACCEL or ACCELERATE: makes an accelerated transition and takes the duration in seconds as the parameter
  • DECEL or DECELERATE: makes a decelerated transition and takes the duration in seconds as the parameter
  • ACCEL_FAC or ACCELERATE_FACTOR: makes an accelerated transition and takes the duration and the factor as the parameters
  • DECEL_FAC or DECELERATE_FACTOR: makes a decelerated transition and takes the duration and the factor as the parameters
  • SIN_FAC or SINUSOIDAL_FACTOR: makes a sinusoidal transition and takes the duration and the factor as the parameters
  • DIVIS or DIVISOR_INTERP: takes 3 parameters:
    • the duration
    • the initial gradient start (0.0 is horizontal, 1.0 is diagonal (linear), 2.0 is twice the gradient of linear, and so on)
    • an integer factor that defines how much the value swings outside the gradient to come back to the final resting spot at the end. 0.0 for the third parameter is equivalent to linear interpolation. Note that DIVIS may exceed 1.0.
  • BOUNCE: makes a bounce transition and takes 3 parameters:
    • the duration
    • how much the bounce decays, with 0.0 giving linear decay per bounce, and higher values giving more decay
    • the number of bounces (rounded down to the nearest integer value)
  • SPRING: makes a spring transition and takes 3 parameters:
    • the duration
    • the decay, with the level exceeding 1.0 on the outer swings
    • the number of spring swings

There are graphical representations of these effects in the Ecore_Evas section above.

Chaining Edje Programs

To define a couple of Edje programs and chain them, we can, for example, create a program to make the rectangle return to its initial state with another transition (such as BOUNCE).

Use the statement after in the first program. after takes the name of the transition to run when the program is done.

after: "animation,state0";

This is how to add the bounce animation. To return the blue rectangle to its initial position with a BOUNCE transition: it bounces with a factor of 1.8, six times. This program is only to be used at the end of the first one, so it does not have any signal statement.

program 
{ 
   name: "animation,state0";
   source: "";
   signal: "";
   action: STATE_SET "default" 0.0;
   target: "rectangle";
   transition: BOUNCE 5 1.8 6;
}

Playing on Signals

The programs start when they receive a signal from a source. Edje handles many kind of signals, including mouse events.

Note
To show the signals, use edje_player -p myfile.edj.

For example, in another transition the rectangle is left clicked. The corresponding signal name is mouse,clicked,1.

For this transition, define a new state. This state changes the color and the position of the rectangle.

// To be placed in the "part" definition
description 
{ 
   state: "color" 0.0;
   rel1 {relative: 0.3 0.3;}
   rel2 {relative: 0.7 0.4;}
   color: 255 0 0 255;
}

The program is as follows:

program 
{ 
   name: "animation,color";
   source: "rectangle";
   signal: "mouse,clicked,1";
   action: STATE_SET "color" 0.0;
   target: "rectangle";
   transition: SIN 2;
}

This starts when the rectangle is left clicked.

If you want to send a signal from your application when you use signals to start transitions, create a program waiting for your own special signal. For example:

program 
{ 
   name: "animation,menu_side,hide";
   source: "MenuButton";
   signal: "hide,sidemenu";
   action: STATE_SET "default" 1.0;
   target: "menu/side";
   transition: LINEAR 0.2;
}

This program changes the state of the target named animation,menu_side,hide to "default" 1.0. It waits for the hide,sidemenu signal emitted by a source called MenuButton.

edje_object_signal_emit(layout, "hide,sidemenu", "MenuButton");

This statement sends a signal named hide,sidemenu with a source named MenuButton to the object called layout.

The edje_object_signal_emit function emits a signal on an Evas_Object part of the application.

edje_object_signal_emit(Evas_Object *obj,
                        const char *emission,
                        const char *source)
  • The first parameter is the Evas_Object, which emits the signal (layout in the example).
  • The second parameter is the emission string (the name of the signal hide,sidemenu in the example).
  • The third parameter is the source of the signal (the name of the source, MenuButton in the example).

If you use the Elementary in the application, you can use elm_object_signal_emit. It functions exactly the same way as edje_object_signal_emit and takes the same parameters.

Note
To find a complete example, use elm_object_signal_emit in Creating Mobile Menus.

Rotating with Edje

The Edje library allows you to rotate objects, using the map statement. For example, if you want to rotate the blue rectangle on a right click, you must define a new rotate state. To enable the map on you object you must add a map part to your default state.

map 
{
   on: 1;
   smooth: 1;
   perspective_on: 1;
   rotation.x: 0;
   rotation.y: 0;
   rotation.z: 0;
}
  • on: 1; enables the map on the object
  • perspective_on: 1, enables the perspective when rotating, even without a perspective point object
  • smooth: 1; enables a smooth map rendering
  • The rotation statements define the default rotation of the object on x, y, and z axes.

To add a new rotate state with a rotation around any axis, do the following.

description 
{ 
   state: "rotate" 0.0;
   inherit: "default" 0.0;
   map.rotation.z: 120;
}

This rotate state inherits all the default state properties, but changes the value of map.rotation.z from 0° to 120°.

To set a program to run the rotate state, do the following.

program 
{ 
   name: "animation,rotate";
   source: "rectangle";
   signal: "mouse,clicked,3";
   action: STATE_SET "rotate" 0.0;
   target: "rectangle";
   transition: LIN 5;
}

This program runs on a right click on the rectangle object.

The complete code of this example is as follows.

collections 
{
   group 
   { 
      name: "main";
      parts 
      {
         part 
         { 
            name: "rectangle";
            type: RECT;
            description 
            { 
               state: "default" 0.0;
               align: 0.0 0.0;
               rel1 {relative: 0.0 0.0;}
               rel2 {relative: 0.3 0.1;}
               map 
               {
                  on: 1;
                  smooth: 1;
                  perspective_on: 1;
                  rotation 
                  {
                     z: 0;
                     x: 0;
                     y: 0;
                  }
               }
               color: 0 0 255 255;
            }
            description 
            { 
               state: "default" 0.5;
               align: 0.0 0.0;
               rel1 {relative: 0.7 0.9;}
               rel2 {relative: 1.0 1.0;}
               color: 0 0 255 255;
            }
            description 
            { 
               state: "color" 0.0;
               rel1 {relative: 0.3 0.3;}
               rel2 {relative: 0.7 0.4;}
               color: 255 0 0 255;
            }
            description 
            { 
               state: "rotate" 0.0;
               inherit: "default" 0.0;
               map.rotation.z: 120;
            }
         }
      }
      programs 
      {
         program 
         { 
            name: "animation,state1";
            source: "";
            signal: "load";
            action: STATE_SET "default" 0.5;
            target: "rectangle";
            transition: LINEAR 1;
            after: "animation,state0";
         }
         program 
         { 
            name: "animation,state0";
            source: "";
            signal: "";
            action: STATE_SET "default" 0.0;
            target: "rectangle";
            transition: BOUNCE 2 1.8 26;
         }
         program 
         { 
            name: "animation,color";
            source: "rectangle";
            signal: "mouse,clicked,1";
            action: STATE_SET "color" 0.0;
            target: "rectangle";
            transition: SIN 2;
         }
         program 
         { 
            name: "animation,rotate";
            source: "rectangle";
            signal: "mouse,clicked,3";
            action: STATE_SET "rotate" 0.0;
            target: "rectangle";
            transition: LIN 5;
         }
      }
   }
}
Note
Except as noted, this content is licensed under LGPLv2.1+.
Go to top