API iRidium. Анимация
функции, методы, свойства объектов, используемых для анимации перемещения попапов и графических элементов в проекте с помощью библиотеки анимации. Использование библиотеки анимации является устаревшим способом создания анимации, вы также можете воспользоваться новыми нативными методами создания анимации (описание по ссылке).
Библиотека анимации
посетить бесплатный обучающий вебинар
Библиотека анимации - это готовый JavaScript файл, который содержит набор функций и методов для анимации элементов в вашем проекте.
Стандартные методы основаны на использовании по кадровой анимации и смены состояний элемента. Библиотека анимации iRidium позволяет создать сложные эффекты для отдельных элементов и групп.
Актуальная версия библиотеки хранится по ссылке:
Не редактируйте библиотеку и не пишите свой код в файле библиотеки, чтобы не потерять совместимость.
Использование библиотеки
- Скачайте библиотеку (файл с расширением *.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)
Пример
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).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