With the function you can create more complex animations. To create an animation group, call this function.


int createAnimation([int parent] [, string type] [, mapping options]);


Parameters Description

The parameter "parent" is an integer value to be used to create an animation group:


int g;

g = createAnimation("sequential");

createAnimation(g, "pause");


The type is one of "parallel" (default), "sequential" or "pause". Pause can only be inserted into a "sequential" group. The "pause" animation in a sequential group can be used to delay the start of the following animation. The default is 600 msecs.


int g = createAnimation("sequential");

createAnimation(g, "pause");


The options for an animation group (parallel, sequential) - see above, can use the options duration"/int, "loopCount" and "direction"

The group defines the direction. Mixing directions in the single added animations is not supported.

"duration"/int ... duration of animation in msecs, default=600 msecs

"loopCount"/int ... number of times the animation is run. default=1. (0=don't run; -1=run endlessly)

"direction"/string ... "Forward" or "Backward", default "Forward". "Backward" reverses and runs from the endValue to the startValue

Three different examples:

int g = createAnimation("sequential", makeMapping("duration",500));

int g = createAnimation("sequential", makeMapping("loopCount",3));

int g = createAnimation("sequential", makeMapping("direction", "Forward"));

If you want to create an animation with several options, you can add several options to a mapping as follows:

i nt g = createAnimation("sequential", makeMapping("duration", 500, "loopCount", 3, "direction", "Forward"));

Return value

When creating a parallel or sequential group, the function returns an identifier > 0. Use this ID in the next animate() call as first argument to fill the group with separate animations and for the startAnimation() function to start the function.


With the function you can create more complex animations. Single animations can be grouped to run either parallel or sequentially. To create a group, call the function createAnimation(). An animation group can contain other animation groups, making it possible to create a tree of animations. Use the function startAnimation() to start an animation group.

Anmerkung: Note that animations need a lot of CPU. When animations run for a longer period of time, this might be noticeable!

This example shows how to animate a position and color parallel. Add the script to the "clicked" event of a graphic object, for example, rectangle or circle. The script moves the graphic object and changes the background color.

  int g = createAnimation(); /* creates an animation group without passing any parameters */
  animate(g, "", "position", this.positionAsDyn, makeDynInt(300, 200));
  animate(g, "", "backCol", "{54,132,15}", "{248,28,120}");
  /* the script moves a graphic object and changes the background color. */

The following example specifies an animation group via the createAnimation() function and specifies the attribute for the animation ("visible") via the animate() function. Add the script to the "clicked" event of a graphic object, for example, a circle or a rectangle. The script sets the graphics object to invisible.

    int g = createAnimation("sequential"); /* creates an animation group of type "sequential" */
    animate(g, "", "visible", true, false);
    animate(g, "", "visible", false, true);

The following example creates a sequential animation group via the createAnimation() function. The function animate() is used to add animations to the animation group. The function is called via the main() function.

Add the setup function call to the "Initialize" event of a panel.


Add the following script to the "ScopeLib" of a panel. Note that you need a rectangle called "RECTANGLE1".

int g;

    g = createAnimation("sequential"); /* Create a sequential animation group */
    animate(g, "RECTANGLE1", "backCol", "{23,60,241}", "{245,76,9,10}",makeMapping("duration", 900, "easingCurve", "Linear"));
    /* creates an animation that changes the background color of a rectangle */

    animate(g, "RECTANGLE1", "position", makeDynInt(200, 160), makeDynInt(450, 500), makeMapping("duration", 1200, "easingCurve", "OutBounce"));
    /* several animations are created for the RECTANGLE1 via the function animate(). The easing curve specifies how the values are changed over time.
      The default value is linear. See */

    createAnimation(g, "pause");
    /* creates an animation with delay, see the description of the parameter "type" at the beginning of this chapter */
    animate(g, "RECTANGLE1", "position", makeDynInt(450, 500), makeDynInt(200, 160), makeMapping("duration", 720, "easingCurve", "OutBack"));
    /* The easing curve specifies how the values are changed over time. The default value is linear.

    int g2 = createAnimation(g);
    animate(g2, "RECTANGLE1", "size", makeDynInt(30, 30), makeDynInt(100, 100), makeMapping("duration", 900, "easingCurve", "OutElastic"));

When you open the panel, the rectangle is placed and the color is set as coded in the script above. You can now animate the rectangle to move, change the color etc. Add, for example, the following code to the "clicked" script of the "RECTANGLE1". The code scales the rectangle up for 700 milliseconds and scales it down to the original size again.

  animate("", "sizeAsDyn", this.sizeAsDyn, this.sizeAsDyn, makeMapping("keyValues", makeMapping(0.5, makeDynInt(150, 150)),"easingCurve", "OutBack", "duration", 700));


Graphic functions



See also

startAnimation(), animate(), stopAnimation()