This page is a translated version of the page Native Animation API and the translation is 99% complete.

---

iRidium API. Animation

Native methods to create animation of objects in iRidium Studio.

documentation was updated on 15.12.2020

Example: Animation

Description

New native animation methods allow to create exactly the same animation as with the help of JS solutions. But projects where native methods are used demand fewer resources of a control panel.

Methods

Methods to create, edit and delete animation

IR.AddAnimation()

Creation of animation

Syntax:

IR.AddAnimation( 

    [ in_oAnimation1, in_oAnimation2, … , in_oAnimationN ] 

    [ in_rItem1, in_rItem2, …  , in_rItemN ] 

    in_nDuration,  

    in_nDelay,  

    in_bRepeat, 

    in_bAutostart, 

    in_rStartCallBack, 

    in_rEndCallBack, 

    in_oContext

);

На входе	Значение	Описание
[ in_oAnimation1, in_oAnimation2, … , in_oAnimationN ]	Type: IR.ANIMATION_MOVE_HORIZONTAL, Tween: IR.LINEAR, Duration : 1000, From : 421, To: 300, Return: true, Repeat: true	type: Object Массив анимаций, либо единичный объект в виде JSON объекта, вида: Type: тип анимации из списка, Tween: тип твинера из списка (дополнительный), Delay: задержка запуска анимации (дополнительный), Duration: длительность анимации (дополнительный), Repeat: повторяемость анимации (дополнительный), Return: переворот анимации в обратную сторону после конца (дополнительный), Parameter1 : Value1, … ParameterN : ValueN
[ in_rItem1, in_rItem2, … , in_rItemN ]	["UI.Page 2.Item 21"], IR.GetPage("Page 2").GetItem("Item 1").	type: Object Массив элементов, либо единичный элемент, в виде ссылки на графический элемент.
in_nDuration	1000	type: Number Длительность анимации (массива анимаций) (мс).
in_nDelay	0	type: Number Задержка при старте анимации (массива анимаций) (мс).
in_bRepeat	false	type: Boolean Зацикливание анимации (массива анимаций).
in_bAutostart	false	type: Boolean Флаг автоматического старта анимации при создании.
in_rStartCallBack	function onStart() { IR.Log(this.OnStart); }	type: Object Колбек начала - активирует функцию при старте анимации.
in_rEndCallBack	function onEnd() { IR.Log(this.OnEnd); }	type: Object Колбек окончания - активирует функцию по окончанию анимации.
in_oContext	{ OnStart : "Animation started", OnEnd : "Animation ended" )	type: Object Вызываемый контекст колбеков - функция (this), которую можно вызвать по колбеку начала или окончания анимации.
На выходе
in_oAnimation	animation	type: Object Объект анимации.

Parameters of animation depend on the type of animation. You can see a full list of parameters here.

X and Y coordinates of an item are described in the General folder and on the dynamic panel of iRidium Studio. The start of coordinates is located in the bottom left corner.

Example

//example 1: (horizontal movement of an item from X = 421 coordinate to X = 300 coordinate and back 
// within 1 second):
 
var animation; 
//create an object of animation
  animation = IR.AddAnimation({
         Type: IR.ANIMATION_MOVE_HORIZONTAL, // type of animation: horizontal movement
         Tween: IR.LINEAR, // linear function
         Duration : 1000, //duration of animation: 1 sec.
         From : 421, // starting point: X=421
         To: 300, // end point Х = 300
         Return: true, // repetition of animation in the reverse order after the end
         Repeat: false // do not loop animation
      },
      IR.GetPage("Page 2").GetItem("Item 1"), // assign animation to an item
      1000, // duration of animation (array of animations)
      0, // delay of animation = 0 (an array of animations)
      false, // animation (an array of animations) is not looped
      false, // animation does not start with the app launch
)
 
//example 2: (horizontal movement of an item from X = 421 coordinate to X = 300 coordinate and back 
// within 1 second calling functions of animation start and animation end):
 
//create an object of animation:
var animation = IR.AddAnimation({
      Type: IR.ANIMATION_MOVE_HORIZONTAL, // type of animation: horizontal movement
      Tween: IR.LINEAR,  // linear function
      Duration : 1000, //duration of animation 1 sec.
      From : 421, // starting point X=421
      To: 300, // end point Х = 300
      Return: true, // repetition of animation in the reverse order after the end
      Repeat: false // do not loop animation
   },
   IR.GetPage("Page 2").GetItem("Item 1"), // assign animation to an item
   1000, // duration of animation (array of animations)
   0, // delay of animation = 0 (an array of animations)
   false, // animation (an array of animations) is not looped
   false, // animation does not start with the app launch
   function() { // activation of a function by the start of animation (start callback)
      IR.Log(this.OnStart);   
   },
   function() { // activation of a function by the end of animation (end callback)
      IR.Log(this.OnEnd);   
   },
   { OnStart : "Animation started", OnEnd : "Animation ended" } // description of functions (a context of callbacks that is called)
)

IR.RemoveAnimation()

Deletion of animation

Syntax:

IR.RemoveAnimation(in_oAnimation);

On input	Value	Description
in_oAnimation	animation	type: Object Animation object.

Example

animation = IR.AddAnimation({
         Type: IR.ANIMATION_SIZE_HORIZONTAL,
         Tween: IR.TWEEN_SINE_IN,
         Duration : 1000,
         From: 96,
         To: 189,
         Return: true,
         Repeat: true
      },
      ["UI.Page 2.Item 21"],
      1000,
      0,
      true,
      false,
    )
 
IR.RemoveAnimation(animation)

IR.StartAllAnimations()

Start of all animations.
Syntax:

IR.StartAllAnimations();

On input	Value	Description
-

Sample

function doStartAll() 
{
    IR.StartAllAnimations();
}

IR.StopAllAnimations()

Stop of all animations.
Syntax:

IR.StopAllAnimations();

On input	Value	Description
-

Example

function doStopAll() {
    IR.StopAllAnimations();
 }

.Start()

Start of animation.

Syntax:

in_oAnimation.Start();

On input	Value	Description
in_oAnimation	animation	type: Object Animation object.

Example

function doStart() {
   animation.Start();
}

.Stop()

Stop of animation

Syntax:

in_oAnimation.Stop();

On input	Value	Description
in_oAnimation	animation	type: Object Animation object.

Example

function doStop() {
   animation.Stop();
}

.AddItem()

Adding a graphic item to animation

Syntax:

in_oAnimation.AddItem(Item)

On input	Value	Description
in_oAnimation	animation	type: Object Animation object.
Item	IR.GetPage("Page 2").GetItem("Item 21")	type: Object Object of graphic item.

Example

function doAddItem() {
   animation.AddItem(IR.GetPage("Page 2").GetItem("Item 21"));   
}

.RemoveItem()

Deleting a graphic item from animation.

Syntax:

in_oAnimation.RemoveItem(Item)

On input	Value	Description
in_oAnimation	animation	type: Object Animation object.
Item	IR.GetPage("Page 2").GetItem("Item 21")	type: Object Object of graphic item.

Example

function doRemoveItem() {
   animation.RemoveItem(IR.GetPage("Page 2").GetItem("Item 21"));   
}

.AddParameter()

Adding a parameter to animation.

Syntax:

in_oAnimation.AddParameter(Parameter)

On input	Value	Description
in_oAnimation	animation	type: Object Animation object.
Parameter	Type: IR.ANIMATION_SIZE_HORIZONTAL, Tween: IR.TWEEN_SINE_IN, Duration : 1000, From: 96, To: 189, Return: true, Repeat: true	type: Object Animation parameter.

Example

animation.AddParameter({
         Type: IR.ANIMATION_SIZE_HORIZONTAL,
         Tween: IR.TWEEN_SINE_IN,
         Duration : 1000,
         From: 96,
         To: 189,
         Return: true,
         Repeat: true
      })

.GetParameter()

Get a parameter by index.

Syntax:

in_oAnimation.GetParameter(Index)

In input	Value	Description
in_oAnimation	animation	type: Object Animation object.
Index	0-n	type: Number The ordinal number of a parameter.
На выходе
Parameter	Type: IR.ANIMATION_SIZE_HORIZONTAL, Tween: IR.TWEEN_SINE_IN, Duration : 1000, From: 96, To: 189, Return: true, Repeat: true	type: Object Animation parameter.

Example

animation.GetParameter(0);

.GetParametersCount()

Get the number of parameters.

Syntax:

in_oAnimation.GetParametersCount()

On input	'Value	Description
in_oAnimation	animation	type: Object Animatio object.
On output
num	4	type: Number The number of parameters.

Example

animation.GetParametersCount() //4

.RemoveParameter()

Delete a parameter by index.

Syntax:

in_oAnimation.RemoveParameter(Index)

On input	Value	Description
in_oAnimation	animation	type: Object Animation object.
Index	0-n	type: Number The ordinal number of a parameter.

Example

animation.RemoveParameter(0)

Type of Animation

A type of animation is a se direction of movement, rotation, hiding and other animation capabilities of items.

• IR.ANIMATION_MOVE_HORIZONTAL - horizontal movement of an item from a point to a point;
• IR.ANIMATION_MOVE_VERTICAL - vertical movement of an item from a point to a point;
• IR.ANIMATION_MOVE - diagonal movement of an item from a point to a point;
• IR.ANIMATION_SHIFT_HORIZONTAL - a horizontal item shift at a definite number of pixels;
• IR.ANIMATION_SHIFT_VERTICAL - a vertical item shift at a definite number of pixels;
• IR.ANIMATION_SHIFT - a diagonal item shift at a definite number of pixels;
• IR.ANIMATION_SIZE_HORIZONTAL - change of horizontal sizes of an item;
• IR.ANIMATION_SIZE_VERTICAL - change of vertical sizes of an item;
• IR.ANIMATION_SIZE - change of diagonal sizes of an item;
• IR.ANIMATION_SCALE_HORIZONTAL - horizontal scaling of a item;
• IR.ANIMATION_SCALE_VERTICAL - vertical scaling of a item;
• IR.ANIMATION_SCALE - diagonal scaling of a item;
• IR.ANIMATION_ROTATE - item rotation;
• IR.ANIMATION_OPACITY - show/hide item;
• IR.ANIMATION_VALUE - change of the Value of an item.

Parameters of Animation

Each type of animation has its unique parameters:

IR.ANIMATION_MOVE_HORIZONTAL

• From - the initial point of movement along the X axis (default = the current position);
• To - the end point of movement along the X axis (default = the current position).

IR.ANIMATION_MOVE_VERTICAL

• From - the initial point of movement along the Y axis (default = the current position);
• To - the end point of movement along the Y axis (default = the current position).

IR.ANIMATION_MOVE

• From - the initial point of movement along the X and Y axes (default = the current position);
• To - the end point of movement along the X and Y axes (default = the current position);
• FromX - the X coordinate of the initial point of movement (default = the current position);
• FromY - the Y coordinate of the initial point of movement (default = the current position);
• ToX - the X coordinate of the end point of movement (default = the current position);
• ToY - the Y coordinate of the end point of movement (default = the current position)

If there are FromX, FromY, ToX, ToY parameters, they are used differently from From and To.

IR.ANIMATION_SHIFT_HORIZONTAL

• From - the initial horizontal shift of an item in pixels (0 - the current position, -100 - 100px to the left, 200 - 200px to the right etc.) (default = 0);
• To - the number of pixels by which in item will be moved horizontally (default = 0).

IR.ANIMATION_SHIFT_VERTICAL

• From - the initial vertical shift of an item in pixels (0 - the current position, -100 - 100px to the left, 200 - 200px to the right etc.) (default = 0);
• To - the number of pixels by which in item will be moved vertically (default = 0).

IR.ANIMATION_SHIFT

• From - the initial diagonal shift of an item in pixels (0 - the current position, -100 - 100px to the left, 200 - 200px to the right etc.) (default = 0);
• To - the number of pixels by which an item will be moved diagonally (default = 0);
• FromHorizontal - the initial horizontal shift of an item in pixels (0 - the current position, -100 - 100px to the left, 200 - 200px to the right etc.) (default = 0);
• FromVertical - the initial vertical shift of an item in pixels (0 - the current position, -100 - 100px to the left, 200 - 200px to the right etc.) (default = 0);
• ToHorizontal - the number of pixels by which an item will be moved horizontally (default = 0);
• ToVertical - the number of pixels by which an item will be moved vertically (default = 0);

If there are FromHorizontal, FromVertical, ToHorizontal, ToVertical parameters, they are used differently from From and To accordingly.

IR.ANIMATION_SIZE_HORIZONTAL

• From - the initial width of an item (default = the current width);
• To - the end width of an item (default = the current width).

IR.ANIMATION_SIZE_VERTICAL

• From - the initial height of an item (default = the current height);
• To - the end height of an item (default = the current height).

IR.ANIMATION_SIZE

• From - the initial width and height of an item (default = current values);
• To - the end width and height of an item (default = current values);
• FromWidth - the initial width of an item (default = the current width);
• FromHeight - the initial height of an item (default = the current width);
• ToWidth - the end width of an item (default = the current width);
• ToHeight - the end height of an item (default = the current height);

If there are FromWidth, FromHeight, ToWidth, ToHeight parameters, they are used differently from From and To accordingly.

IR.ANIMATION_SCALE_HORIZONTAL

• From - the initial width quotient (if there is none, use 1);
• To - the end width quotient (if there is none, use 1);

IR.ANIMATION_SCALE_VERTICAL

• From - the initial height quotient (if there is none, use 1);
• To - the end height quotient (if there is none, use 1).

IR.ANIMATION_SCALE

• From - the initial size quotient (if there is none, use 1);
• To - the end size quotient (if there is none, use 1);
• FromHorizontal - the initial width quotient (if there is none, use 1);
• FromVertical - the initial height quotient (if there is none, use 1);
• ToHorizontal - the end width quotient (if there is none, use 1);
• ToVertical - the end height quotient (if there is none, use 1).

If there are FromHorizontal, FromVertical, ToHorizontal, ToVertical parameters, they are used differently from From and To accordingly.

IR.ANIMATION_ROTATE

• From - the initial rotation angle (if there is none, then rotation from the current angle position);
• To - the end rotation angle

IR.ANIMATION_OPACITY

• From - the initial transparency of an item (default = the current transparency);
• To - the end transparency of an item (default = the current transparency).

IR.ANIMATION_VALUE

• From - the initial value (default = the current value);
• To - the end value (default = the current value).

Type of Tweener

Tweener is a type of animation calculation. A formula defines how an intermediate value on a selected interval will be calculated. Each formula has its number that must be sent to a function when animation is created.

Names and numbers of formulae

• IR.TWEEN_LINEAR = 0;
• IR.TWEEN_SINE_IN = 1;
• IR.TWEEN_SINE_OUT = 2;
• IR.TWEEN_SINE_IN_OUT = 3;
• IR.TWEEN_QUINT_IN = 4;
• IR.TWEEN_QUINT_OUT = 5;
• IR.TWEEN_QUINT_IN_OUT = 6;
• IR.TWEEN_QUART_IN = 7;
• IR.TWEEN_QUART_OUT = 8;
• IR.TWEEN_QUART_IN_OUT = 9;
• IR.TWEEN_QUAD_IN = 10;
• IR.TWEEN_QUAD_OUT = 11;
• IR.TWEEN_QUAD_IN_OUT = 12;
• IR.TWEEN_EXPO_IN = 13;
• IR.TWEEN_EXPO_OUT = 14;
• IR.TWEEN_EXPO_IN_OUT = 15;
• IR.TWEEN_ELASTIC_IN = 16;
• IR.TWEEN_ELASTIC_OUT = 17;
• IR.TWEEN_ELASTIC_IN_OUT = 18;
• IR.TWEEN_CUBIC_IN = 19;
• IR.TWEEN_CUBIC_OUT = 20;
• IR.TWEEN_CUBIC_IN_OUT = 21;
• IR.TWEEN_CIRC_IN = 22;
• IR.TWEEN_CIRC_OUT = 23;
• IR.TWEEN_CIRC_IN_OUT = 24;
• IR.TWEEN_BOUNCE_IN = 25;
• IR.TWEEN_BOUNCE_OUT = 26;
• IR.TWEEN_BOUNCE_IN_OUT = 27;
• IR.TWEEN_BACK_IN = 28;
• IR.TWEEN_BACK_OUT = 29;
• IR.TWEEN_BACK_IN_OUT = 30.