Материал из for iRidium developers
Перейти к: навигация, поиск
Other languages:
English • ‎русский

API iRidium. Анимация

функции, методы, свойства объектов, используемых для анимации перемещения попапов и графических элементов в проекте

Библиотека анимации

посетить бесплатный обучающий вебинар

Библиотека анимации - это готовый JavaScript файл, который содержит набор функций и методов для анимации элементов в вашем проекте.

Стандартные методы основаны на использовании по кадровой анимации и смены состояний элемента. Библиотека анимации iRidium позволяет создать сложные эффекты для отдельных элементов и групп.


Актуальная версия библиотеки хранится по ссылке:

Не редактируйте библиотеку и не пишите свой код в файле библиотеки, чтобы не потерять совместимость.

Использование библиотеки

  1. Скачайте библиотеку (файл с расширением *.js) и добавьте её в проект iRidium (JavaScript Editor >> Add from file).
  2. Создайте новый файл скрипта (JavaScript Editor >> New file), напишите в нем слово ANIMATION - это библиотечная функция.


У функции есть параметры:

var Player1 = ANIMATION(
	[effect_1, effect_2], 
	[item_1, item_2], 
	duration, 
	delay, 
	repeat, 
	type, 
	startCallBack, 
	endCallBack, 
	context
);
  • [effect_1, effect_2] - {Array | Effect} в массиве эффекты, которые нужно применить к элементам. Список эффектов:
    • MoveHorizontal(0, 100) - горизонтальный сдвиг, параметры: начальная позиция и сдвиг по Х, в пикселях
    • MoveVertical(0, 100) - вертикальный сдвиг, параметры: начальная позиция и сдвиг по Y, в пикселях
    • MoveDiagonal(0, 100) - диагональный сдвиг, параметры: начальная позиция и сдвиг по Х и Y, в пикселях
    • Rotate(360) - поворот, параметр: угол поворота в градусах
    • Show() - показать
    • Hide() - скрыть
    • ScaleXY(0.0, 1.1) - растянуть, параметры: начальный размер и коэффициент растяжения по X и Y
    • ScaleX(0.0, 1.1) - растянуть, параметры: начальный размер и коэффициент растяжения по X
    • ScaleY(0.0, 1.1) - растянуть, параметры: начальный размер и коэффициент растяжения по Y
    • Value(0, 100) - плавно меняет Value элемента, параметры: начальное значение, конечное значение
    • ValueToText(0, 100) - плавно меняет Text элемента, параметры: начальное значение, конечное значение
  • [item_1, item_2] - {Array | IridiumItem} в массиве ссылки на элементы, к которым нужно применить анимацию
  • duration - {Number} длительность выполнения анимации (мс) >= 0; ключевое словоANIMATION.DEFAULT_TIME = 300 мс, длительность по-умолчанию
  • delay - {Number} задержка анимации, >= 0; Если задержки нет, укажите ключевое слово ANIMATION.NO_DELAY
  • repeat - {Number} повторение анимации (да/нет). Ключевые слова: LOOP - повторять, ANIMATION.NO_LOOP - не повторять
  • type - {Number} твиннер, тип вычисления анимации. Список типов вычисления:
    • IR.LINEAR = 0;
    • IR.SINE_IN = 1;
    • IR.SINE_OUT = 2;
    • IR.SINE_IN_OUT = 3;
    • IR.QUINT_IN = 4;
    • IR.QUINT_OUT = 5;
    • IR.QUINT_IN_OUT = 6;
    • IR.QUART_IN = 7;
    • IR.QUART_OUT = 8;
    • IR.QUART_IN_OUT = 9;
    • IR.QUAD_IN = 10;
    • IR.QUAD_OUT = 11;
    • IR.QUAD_IN_OUT = 12;
    • IR.EXPO_IN = 13;
    • IR.EXPO_OUT = 14;
    • IR.EXPO_IN_OUT = 15;
    • IR.ELASTIC_IN = 16;
    • IR.ELASTIC_OUT = 17;
    • IR.ELASTIC_IN_OUT = 18;
    • IR.CUBIC_IN = 19;
    • IR.CUBIC_OUT = 20;
    • IR.CUBIC_IN_OUT = 21;
    • IR.CIRC_IN = 22;
    • IR.CIRC_OUT = 23;
    • IR.CIRC_IN_OUT = 24;
    • IR.BOUNCE_IN = 25;
    • IR.BOUNCE_OUT = 26;
    • IR.BOUNCE_IN_OUT = 27;
    • IR.IR.BACK_IN = 28;
    • IR.BACK_OUT = 29;
    • IR.BACK_IN_OUT = 30;
  • startCallBack - {Function} функция обратного вызова, которая вызовется при старте анимации
  • endCallBack - {Function} функция обратного вызова, которая вызовется при завершении анимации
  • context - {Object} контекст исполнения функций обратного вызова

Управление плеером

  • Player.stop() – завершает анимацию и отключает повторения loop до перезапуска
  • Player.pause() – прерывает анимацию
  • Player.restart() – перезапускает анимацию, после (stop)
  • Player.play() – восстанавливает анимацию после прерывания (pause)
  • Player.nextFrame() – переходит на следующий кадр ( в режиме pause)
  • Player.prevFrame() – переходит на предыдущий кадр ( в режиме pause)

Групповое управление всеми анимациями

  • ANIMATION.stopAll() – завершает все анимации и отключает повторения loop до перезапуска
  • ANIMATION.pauseAll() – прерывает все анимации
  • ANIMATION.restartAll() – перезапускает все анимации, после (stop)
  • ANIMATION.playAll() – восстаналивает все анимации после прерывания (pause)
  • ANIMATION.nextFrameAll() – переходит на следующий кадр ( в режиме pause)
  • ANIMATION.prevFrameAll() – переходит на предыдущий кадр ( в режиме pause)

Пример

var Home_main = IR.GetItem("Home Page");
 
function Open_Home()
{
	ANIMATION(
		[ANIMATION.Show(), ANIMATION.ScaleXY(0.8, 0.2)], 
		[Home_main.GetItem("B1")], 
		200, 
		ANIMATION.NO_DELAY, 
		ANIMATION.NO_LOOP, 
		IR.CIRC_OUT
	); 
 
	ANIMATION(
		[ANIMATION.Show(), ANIMATION.MoveVertical(1164, 980)], 
		[Home_main.GetItem("Item 3")], 
		400,
		ANIMATION.NO_DELAY,
		ANIMATION.NO_LOOP, 
		IR.QUART_OUT
	);
 
	ANIMATION(
		[ANIMATION.Show(), ANIMATION.MoveHorrizontal(360, -220)], 
		Home_main.GetItem("t1"), 
		200, 
		ANIMATION.NO_DELAY, 
		ANIMATION.NO_LOOP, 
		IR.QUART_OUT
	);
 
	ANIMATION(
		ANIMATION.Show(), 
		Home_main.GetItem("i1"), 
		200, 
		ANIMATION.NO_DELAY, 
		ANIMATION.NO_LOOP,
		IR.CIRC_OUT
	);
 
	ANIMATION(
		[ANIMATION.Value(0, 78)], 
		[Home_main.GetItem("v1")], 
		500, 
		ANIMATION.NO_DELAY, 
		ANIMATION.NOT_LOOP, 
		IR.CIRC_OUT
	);
 
	ANIMATION(
		[ANIMATION.MoveHorrizontal(116, -100)], 
		[Home_main.GetItem("Zone Name")], 
		700, 
		ANIMATION.NO_DELAY, 
		ANIMATION.NO_LOOP, 
		IR.CIRC_OUT
	);  
 
	function animationStartCallBack(){
	  IR.Log("Start " + this.Name);
	}
 
	function animationEndCallBack(){
	  IR.Log("End " + this.Name);
	}
 
	var Player1 = ANIMATION(
	  ANIMATION.Rotate(360),
	  [IR.GetItem("Page 1").GetItem(0), IR.GetItem("Page 1").GetItem(1)],
	  1000,
	  1000,
	  ANIMATION.LOOP,
	  IR.LINEAR,
	  animationStartCallBack,
	  animationEndCallBack,
	  {
		 Name: "Animation 1"
	  }     
	);
}  
IR.AddListener(IR.EVENT_START, 0, Open_Home);


Методы

IR.CreateEffect

создать эффект и применить его в группе эффектов при показе и скрытии попапа.
На базе этого метода создана готовая библиотека анимации, которую можно применить к попапам и графическим элементом вашего проекта.

Синтаксис

IR.CreateEffect(effect).property

на входе значение описание
effect type: object
тип эффекта
  • IR.EFFECT_FADE - плавное появление / исчезновение
  • IR.EFFECT_ROTATE - вращение вокруг центральной оси
  • IR.EFFECT_SCALE - увеличение / уменьшение
  • IR.EFFECT_SLIDE - движение в (из) стороны
  • IR.EFFECT_TVSCAN - сжатие по горизонтали
property type: object
свойства эффекта
  • Group - номер группы эффектов, куда будет помещен эффект. Рекомендуется использовать номера начиная с 1000, чтобы не затронуть группы эффектов, которые создает редактор
  • Delay (мс) - задержка перед выполнением эффекта
  • Duration (мс) - продолжительность эффекта
  • Tween - формула вычисления, см. список формул
на выходе
effect type: object
ссылка на эффект, которую нужно сохранить в переменную


Пример

IR.AddListener(IR.EVENT_START, 0, function()
{
	// create effect, add in variable
	var Fade = IR.CreateEffect(IR.EFFECT_FADE);
	Fade.Group = 1000;	// assign number of group
	Fade.Delay = 0;		// choose delay
	Fade.Duration = 400;  	// choose duration of effect
	Fade.Tween = 0; 		// choose tweener
	// show popup with created effect
	IR.ShowPopup("Popup 1", 1000)
});

На базе этого метода создана готовая библиотека анимации


IR.Tween

уточняет значение переменной, вычисленное по формуле на указанном отрезке. Позволяет построить кривую анимации появления попапа

Синтаксис

IR.Tween(formula, step_number, begin, end, steps)

на входе значение описание
formula IR.TWEEN_LINEAR type: object
имя формулы вычисления из списка формул
step_number 126 type: number
номер шага вычисления, значение в котором нужно вернуть
begin 0 type: number
начало диапазона вычисления
end 100 type: number
конец диапазона вычисления
steps 255 type: number
на сколько частей (шагов вычисления) разделить указанный диапазон
на выходе
number 50 type: number
возвращенное значение


Пример

IR.AddListener(IR.EVENT_START, 0, function()
{
    var value1 = IR.Tween(IR.TWEEN_LINEAR, 126, 0, 100, 255);  
    IR.Log(value1); // 50
    var value2 = IR.Tween(IR.TWEEN_LINEAR, 50, 0, 255, 100); 
    IR.Log(value2); // 126
});
var timer = 0;
LeftTween("Popup 1", 20, 852, 400);   //  popup, X, Y, moving range
function LeftTween(popup, X, Y, range)
{
   IR.ShowPopup(popup);          // show popup
   IR.GetItem(popup).Y = Y;          // position by Y
   var Tm = IR.SetInterval(1, function(){    // change coordinate X in interval of 1 ms          
      var speed = 20;    // showing speed
      timer++;
      var Tween = IR.Tween(IR.TWEEN_LINEAR, timer, 0, range, speed);      // calculate Tweener 
      IR.GetItem(popup).X = X+Tween;            // set coordinate by X 
      if (timer > speed) {IR.ClearInterval(Tm); timer = 0;}      // delete interval when finished   
   });
}

визуальное представление пересчета значений:
IR TWEEN.png


Формулы вычислений

Формула определяет, как будет вычисляться промежуточное значение на выбранном отрезке. Каждая формула имеет свой номер, который следует передать в функцию IR.Tween первым параметром:

TypeOfTween.png

Имена и номера формул:

  • 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