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

В этом разделе мы постараемся максимально подробно рассказать о всех классах DevelNext
Ответить
Аватара пользователя
SheeZe
Администратор
Сообщения: 152
Зарегистрирован: 03 апр 2022, 12:01
Откуда: Планета Земля
Поблагодарили: 2 раза
Контактная информация:

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);
Делаем все быстро, качественно, не дорого - выбирай любые два.
Ответить