Эта страница является переводом страницы Animation API. Перевод выполнен на 100%.

Other languages:

Содержание

1 API iRidium. Анимация
2 Библиотека анимации
3 Методы
- 3.1 IR.CreateEffect
- 3.2 IR.Tween
  - 3.2.1 Формулы вычислений

API iRidium. Анимация

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

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

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

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

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

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

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

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

Скачайте библиотеку (файл с расширением *.js) и добавьте её в проект iRidium (JavaScript Editor >> Add from file).
Создайте новый файл скрипта (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.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)
});

На базе этого метода создана готовая библиотека анимации
Если вы используете эффект 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, 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 первым параметром:

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

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