Animation - Анимирование визуальных компонентов.

[SheeZe]

Code: Select all

use action\Animation;


Утилитный класс только со статичными методами, для анимирования визуальных компонентов. Класс поддерживает следующие типы анимаций:

• Затухание, изменение прозрачности.

• Изменение масштаба, размеров.

• Изменение позиции, смещение.

Code: Select all

Animation::fadeTo(); // анимация изменения прозрачности
Animation::fadeIn(); // анимация появления
Animation::fadeOut(); // анимация затухания
Animation::scaleTo(); // анимация изменения масштаба
Animation::stopScale(); // остановить анимацию изменения масштаба
Animation::moveTo(); // анимация перемещения к точке
Animation::stopMove(); // остановить анимацию перемещения
Animation::displace(); // анимация смещения


Код: Выделить всё

fadeTo();

// анимировать кнопку, длительность анимации 3 сек, конечный уровень непрозрачности 70%.

Code: Select all

Animation::fadeTo($button, 3000, 0.7);


// с коллбэком.

Code: Select all

Animation::fadeTo($button, 3000, 0.7, function () {
alert('Анимация окончена.');
});


Код: Выделить всё

fadeIn();

Упрощенный метод для fadeTo(), метод доводит уровень непрозрачности компонента до 1, т.е. до 100%. Анимация появления, объект становится плавно видимым. Однако, чтобы она работала, объект должен быть хотя бы немного прозрачным изначально.

Code: Select all

Animation::fadeIn($button, 5000);


// это аналогично fadeTo с параметром $value = 1.0

Code: Select all

Animation::fadeTo($button, 5000, 1.0);


Код: Выделить всё

fadeOut();

Упрощенный метод для fadeTo(), метод доводит уровень непрозрачности компонента до 0, т.е. до 0%. Анимация исчезания, объект становится плавно невидимым.

Code: Select all

Animation::fadeOut($button, 5000);


// это аналогично fadeTo с параметром $value = 0

Code: Select all

Animation::fadeTo($button, 5000, 0);


Код: Выделить всё

scaleTo();

Анимация изменения масштаба объекта, уменьшение или увеличение. Обратите внимание, что свойства height и width у объекта не меняются, меняются другие свойства scaleX и scaleY.

// анимировать масштаб кнопки, длительность анимации 3 сек, уменьшает кнопку в 2 раза - 0.5 от изначального размера.

Code: Select all

Animation::scaleTo($button, 3000, 0.5);


// с коллбэком.

Code: Select all

Animation::scaleTo($button, 3000, 0.5, function () {
alert('Анимация окончена.');
});


Код: Выделить всё

stopScale();

Метод прерывает анимацию масштабирования. Необходимо передать один параметр, это сам объект анимации - визуальный компонент UXNode.

Code: Select all

Animation::stopScale($button);


Код: Выделить всё

moveTo();

Метод плавно перемещает объект к точке $x, $y за отведенное время анимации $duration, которое указывается в мл. секундах (1 сек. = 1000 мл.сек.). Объектом анимации $object может быть любой визуальный компонент UXNode или окно UXWindow.

Координаты (x, y) указываются в абсолютных значениях, если вам нужно сместить объект от начальной точки попробуйте метод displace().

// переместить объект к точке X:100, Y:100 за 3 секунды.

Code: Select all

Animation::moveTo($button, 3000, 100, 100);


Код: Выделить всё

stopMove();

Останавливает анимацию перемещения или смещения объекта.

Code: Select all

Animation::stopMove($button);


Смещает объект по оси X, Y от начальной позиции. Метод аналогичен moveTo(), только вместо абсолютной точки использует параметры смещения.

// сместить объект за 3 секунды, по x на 100 пикселей вправо, по y на 300 пикселей вверх.

Code: Select all

Animation::displace($button, 3000, 100, -300);