• Справочник
• Анимация

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

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

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

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

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

скачать:
библиотека анимации iRidium (*.js)

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

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

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)

Пример​

скачать:
пример использования библиотеки (*.irpz)

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.MoveHorizontal(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.MoveHorizontal(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](#ircreateeffect)).[property](#ircreateeffect)

Пример

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)
});

Примечания

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

Если вы используете эффект EFFECT_SLIDE, то вам необходимо настроить дополнительный параметр SlideType. Возможные значения и их соответствие значениям в редакторе:

• SLIDE_TYPE_LEFT - 0 - Left
• SLIDE_TYPE_RIGHT - 1 - Right
• SLIDE_TYPE_TOP - 2 - Top
• SLIDE_TYPE_BOTTOM - 3 - Bottom
• SLIDE_TYPE_CROP_LEFT - 4 - Left out
• SLIDE_TYPE_CROP_RIGHT - 5 - Right out
• SLIDE_TYPE_CROP_TOP - 6 - top out
• SLIDE_TYPE_CROP_BOTTOM - 7 - bottom out
  Пример:
  

IR.AddListener(IR.EVENT_START, 0, function()
{
// create effect, add in variable
var slideEffect = IR.CreateEffect(IR.EFFECT_SLIDE);
slideEffect.Group = 1000;
slideEffect.Delay = 0;
slideEffect.Duration = 400;
slideEffect.Tween = IR.TWEEN_SINE_IN_OUT;
slideEffect.SlideType = 0;
});

IR.Tween​

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

Синтаксис

IR.Tween([formula](#irtween), [step_number](#irtween), [begin](#irtween), [end](#irtween), [steps](#irtween))

Пример

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 первым параметром:

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

• 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