Skip to content

Animation

Jump to bottom
Dmitriy Zayceff edited this page Feb 4, 2017 · 22 revisions
  • class Animation (action\Animation)

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

  • Затухание, изменение прозрачности.
  • Изменение масштаба, размеров.
  • Изменение позиции, смещение.

У класса приватный конструктор, невозможно создать объект данного класса.

Статичные методы

fadeTo()

fadeTo(UXNode|UXWindow $object, int $duration, double $value, callable $callback = null)

Анимирует уровень прозрачности объекта, объектом может быть любой визуальный компонент UXNode или окно UXWindow. Метод принимает следующие параметры:

  • $object объект, который надо анимировать.
  • $duration длительность анимации в мл. секундах, 1 сек = 1000 млсек.
  • $value уровень конечной непрозрачности объекта, от 0 до 1, где 0 это 0%, а 1 это 100%, 0.5 - 50%.
  • $callback необязательный параметр, коллбэк функция, которая будет вызвана после окончания анимации.
// анимировать кнопку, длительность анимации 3 сек, конечный уровень непрозрачности 70%.
Animation::fadeTo($button, 3000, 0.7);

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

fadeIn()

fadeIn(UXNode|UXWindow $object, int $duration, callable $callback = null)

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

  • $object объект, который надо анимировать, любой визуальный компонент UXNode или окно UXWindow.
  • $duration длительность анимации в мл. секундах, 1 сек = 1000 млсек.
  • $callback необязательный параметр, коллбэк функция, которая будет вызвана после окончания анимации.
Animation::fadeIn($button, 5000);

// это аналогично fadeTo с параметром $value = 1.0
Animation::fadeTo($button, 5000, 1.0);

fadeOut()

fadeOut(UXNode|UXWindow $object, int $duration, callable $callback = null)

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

  • $object объект, который надо анимировать, любой визуальный компонент UXNode или окно UXWindow.
  • $duration длительность анимации в мл. секундах, 1 сек = 1000 млсек.
  • $callback необязательный параметр, коллбэк функция, которая будет вызвана после окончания анимации.
Animation::fadeOut($button, 5000);

// это аналогично fadeTo с параметром $value = 0
Animation::fadeTo($button, 5000, 0);

scaleTo()

scaleTo(UXNode $object, int $duration, double $value, callable $callback = null)

Метод появился в DevelNext 16 RC-2.

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

Метод принимает следующие параметры:

  • $object объект, который надо анимировать, любой визуальный компонент UXNode.
  • $duration длительность анимации в мл. секундах, 1 сек = 1000 млсек.
  • $value во сколько раз изменить масштаб объекта от начального размера, 1 - оригинальный размер, 1.5 - в полтора раза, 2 - в 2 раза увеличить, 0.5 - уменьшить в 2 раза, и т.д.
  • $callback необязательный параметр, коллбэк функция, которая будет вызвана после окончания анимации.
// анимировать масштаб кнопки, длительность анимации 3 сек, уменьшает кнопку в 2 раза - 0.5 от изначального размера.
Animation::scaleTo($button, 3000, 0.5);

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

stopScale()

stopScale(UXNode $object)

Метод появился в DevelNext 16 RC-2.

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

Animation::stopScale($button);

moveTo()

moveTo(UXNode|UXWindow $object, int $duration, double $x, double $y, callable $callback = null)

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

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

// переместить объект к точке X:100, Y:100 за 3 секунды.
Animation::moveTo($button, 3000, 100, 100);

Вернуться в начало

develnext.org (c) 2017

Clone this wiki locally