animateWait()

The parameter "object" is the shape or group (PanelRef or ShapeGroup) to animate (same as in setValue/getValue) or a "shape" datatype variable pointing to a shape.

Examples:

animateWait("RECTANGLE1", "backCol", "{54,132,15}", "{248,28,120}");

-----------------------------------------------------------------------------------------

animateWait("", "backCol", "{54,132,15}", "{248,28,120}");

The notation "" is used for the current object. If you, for example, add a script to the "clicked" event of a circle. You can refer to the circle by using "".

-----------------------------------------------------------------------------------------

RootPanelOnModule("flyIn", "flyIn", flyInModule .ModuleName, "");

The code opens the panel "flyIn" in the module "flyInModule.ModuleName

animateWait( "flyInModule", "sizeAsDyn", makeDynInt(0, 0), makeDynInt(581, 341), makeMapping("duration", 600));

The module name "flyInModule" is used for the function "animate".

The graphic attribute that is changed, for example, "backCol" or "font".

The function animateWait() changes attributes of the following types:

• int, float, color, font (animates only the size of the font),

  point (e.g. position),

  size, bool

startValue

endValue

Start value: for example, the start position or the color for an animation

End Value: for example, the end position or the color for an animation

The following data types can be used for the parameters start and end values:

int, float, color, font (animates only the size),

point (e.g. position),

size, bool.

Since the data types point and size are not available in CTRL, they are represented as dyn_int (x, y)/(width, height) - see examples below. In order to pass these data types to the function animateWait(), the following attributes are available for a shape:

• sizeAsDyn same as "size" specified as a dyn_int

• positionAsDyn ... same as position specified as a dyn_int.

• origSizeAsDyn ... same as origSize specified as a dyn_int

In the following, examples for the parameters are shown:

• int- For example, to round off the corners of a rectangle:("", "cornerRadius", 0, 60);

• float -For example, rotation of an object: animateWait("", "rotation", 0.0, 180.0, makeMapping("duration", 2000));

• color - Color of an object, for example: "{54,132,15}", "{248,28,120}");

• font - Animates only the size of the font : this.sizeAsDyn, makeDynInt(200, 300));

• point - For example, position of an object: this.positionAsDyn, makeDynInt(300, 200));

• bool - For example, visibility of an object: animateWait( "", "visible", true, false);

• size - For example, the size of an object: this.sizeAsDyn, makeDynInt(200, 300));

You can also use intermediate values for the size. The intermediate values are of the same data type as the start and the end values:

For example,

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

Intermediate values: from 0.0 to 1.0, correspond to percentages 0% to 100%. Specify when an animated value should accept a value.

0.0 (0%) the start value applies

1.0 (100%) the end value applies

In the example above: makeMapping(0.5, makeDynInt(150, 150))

the code makeDynInt(150, 150) applies to the value 0.5 (50%) . In other words the "key" (the percentage) must be specified as a float value.

The optional "options" mapping can contain the following key(string)/value(attribute type) pairs:

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

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

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

"easingCurve"/string ... how the values are changed over time. default="Linear";

The following table contains the possible values for the "easingCurve":

	Linear
	InQuad
	OutQuad
	InOutQuad
	OutInQuad
	InCubic
	OutCubic
	InOutCubic
	OutInCubic
	InQuart
	OutQuart
	InOutQuart
	OutInQuart
	InQuint
	OutQuint
	InOutQuint
	OutInQuint
	InSine
	OutSine
	InOutSine
	OutInSine
	InExpo
	OutExpo
	InOutExpo
	OutInExpo
	InCirc
	OutCirc
	InOutCirc
	OutInCirc
	InElastic
	OutElastic
	InOutElastic
	OutInElastic
	InBack
	OutBack
	InOutBack
	OutInBack
	InBounce
	OutBounce
	InOutBounce
	OutInBounce

For more information see the QT documentation : Qt Documentation - enum QEasingCurve::Type

Examples:

animateWait("", "rotation", 0.0, 180.0, makeMapping("duration", 2000));

animateWait("", "rotation", 0.0, 180.0, makeMapping("loopCount", 3));

animateWait("", "rotation", 0.0, 180.0, makeMapping("direction", "Forward"));

animateWait("RECTANGLE1", "position", makeDynInt(450, 500), makeDynInt(200, 160), makeMapping("duration", 720, "easingCurve", "OutBack"));