ВизуальныеэффектыианимациявJavaFX

Наша следующая тема – это продолжение того развлечения, что мы с вами делали. Это добавление в программу каких-то трансформаций и каких-то анимаций, каких-то движений. Современный пользовательский интерфейс предполагает, что это есть. Пользователь что-то нажимает, а ему там показывают, как это должно происходить.

Или где начинается первое применение подобных вариантов программ? Это какой-то объект на экране и вы его можете вращать, смотреть с разных сторон, но там уже будет 3D соответственно использовано. А какая разница? Легко сделать, чтобы что-то поворачивалось и сдвигалось? Вот в Swingнам бы пришлось взять плоскую систему координат, делать трансформацию. Конечно, там есть какие-то готовые элементы. Здесь пошли следующим образом. У нас есть варианты преобразований, которые скажем понятны и они их закодировали сразу в полный объект. Есть некий суперкласс, есть от него наследники. Я думаю вам понятно, что делает класс Rotate? И точно также здесь есть несколько классов. Конечно, некоторые названия бывают непонятны, но это надо запрограммировать и посмотреть.

Также здесь реализованы «аффинные преобразования» в плоской системе – это значит, что прямые линии остаются прямыми на удалении. Т.е. они не сходятся в одну точку. Перспективы здесь нет, но если вам хочется, я думаю вы сможете, что-то аналогичное реализовать, но чуть по другому.

Вы скажете: «классы преобразований есть. И???». Что с ними делать? А вот смотрите. У любого node(а в дереве JavaFX– это все node) есть готовые методы, где вы можете сказать: «хочу вот это или хочу поворот». И за счет того, что любой элемент позволяет задать преобразования, а преобразования, как классы, а это значит, что в любой момент можно создать необходимый объект. Все это существует. То для того чтобы повернуть, сдвинуть, переместить или изменить масштаб нужно вызвать одну функцию. Любая существующая трансформация – это вызов одной функции. Ну давайте вызовем.

Кого я буду трансформировать? Ну давайте кнопочку «Say 'Hello World'».

Что-то она выглядит там бледно. Повернемка мы её на 27 градусов. Значит надо добраться до кнопочки. Она у нас на самом верху. И сразу после создания, я пишу:

setTranslateX() – параллельный перенос по оси X.

setRotate() – вращает объект.

Дизайн необычный – согласен. Но кнопочка-то работает. И пользователю нечего возмущаться. Но сама идея трансформаций – видите, как это реализовано легко и просто? Любой nodeможно повернуть – любой!

Давайте что-нибудь еще повернем? Вот у нас есть root. Я беру и набираю root.setRotate(27);

Понимаете. Она поворачивает node. А если это дерево – значит дерево. Поворачивается node. В этом-то и есть сила данной архитектуры, основанной на деревьях. Вы можете создать такое дерево, потом в одном месте просто ткнул его, а у тебя повернулся целый огромный массив данных. Все очень просто. Главное ветви дерева правильно разложить, чтобы они были …

И не забывайте, что в JavaFXвсё является node. Здесь нет Graphicsкоторый мы видели раньше. Я взял с помощью Graphicsнарисовал какой-то четырехугольник. И что с ним делать? Да ничего вы с ним не сделаете! А здесь это node! И вот такая универсальность позволяет вытворять в этом интерфейсе практически любые чудеса.

Трансформации

Чего не хватает в трансформации? Движения. Это конечное состояние. Я говорю: «27 градусов!» и она раз и делает 27 градусов. А я хочу видеть, как она туда пришла. Мне нужна анимация, чтобы я мог это наблюдать, поэтому в принципе понятно, что можно сейчас написать программу, которая делает трансформацию как бы последовательно. Т.е. сделать «много-много-много-много-много переходов» и если это сделать с определенной частотой за определенное время постараться, то я думаю мы увидим, что она раз и пришла в положение 27 градусов. Но с другой стороны – это же стандартная задача. Что я буду это писать руками? Вот! Пожалуйста! Они все готовы!

Есть класс «Transition»из пакета animation. Для этого класса создали штук 20 разных готовых анимаций. Вот! Пожалуйста! На сколько нужно, настолько и повернется. Вы спросите: «а за какое время?». За какое скажете. Здесь сделали абсолютно все! Параллельный перенос! Изменение масштаба! Только оно будет происходить плавно. Человек будет это видеть. TranslateTransition– это параллельный перенос. Fill – это закрашивание. Fade – это когда прозрачность меняется. Вы можете задать какой-то сложный путь и оно будет двигаться не как Translate, а можно задать объект «СложныйПуть» и она будет по нему сдвигаться. Может возникнуть необходимость выполнить несколько анимаций друг за дружкой – SequentialTransition. Вы в него набиваете. Такая, такая, такая позиция и они будут друг за другом. А если хотите, то можно параллельно. А можно в этот контейнер SequentialTransition положить несколько параллельных и положить несколько последовательных. И так далее до бесконечности. И вы сделаете любую сложную анимацию. Как угодно. Главное, чтобы художник это нарисовал. Вообще, по-хорошему, лучше это делать в каком-то визуальном дизайнере, где можно тут же посмотреть, параметры во времени подправить, чтобы это было естественно и красиво.

Кстати, наш поворот на 27 надо теперь сделать нормальным, чтобы он поворачивался на 27. Давайте попробуем это сделать. Здесь и подход немного другой, естественно. Так! Кого я последний раз поворачивал? root.setRotate(27);. Эту строчку комментируем.

Значит, что нам нужно делать? Нужно создать объект RotateTransition. У него есть удобный конструктор, где можно задать время.