createAnimation()

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.

main()
{
  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. */
  startAnimation(g);
}

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.

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

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.

main()
{
    setup();
}

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

int g;

setup()
{
    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. SeeQt Documentation - enum QEasingCurve::Type */

    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.
    SeeQt Documentation - enum QEasingCurve::Type*/

    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.

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