3.3.4 Створення анімації кнопок
Незмінні малюнки в ролі кнопок — це не є добрим рішенням для інтерфейсу користувачів, тому потрібно зробити їх більш інтерактивними за допомогою ефектів та анімації. Всі ці дії потрібно зробити в методі, який створює кнопки інтерфейсу — createButton з класу ButtonCreator:
public abstract class ButtonCreator {
private static final double SCALE = 1.2; // коеффіцієнт збільшення
private static final double DURATION = 300; // час анімації в мс
public static Node createButton(String iconPath, final Runnable action) {
final ImageView node = new ImageView(new Image(iconPath));
node.setFitWidth(100);
node.setPreserveRatio(true);
final ScaleTransition animationGrow = new ScaleTransition(Duration.millis(DURATION), node);
animationGrow.setToX(SCALE);
animationGrow.setToY(SCALE);
final ScaleTransition animationShrink = new ScaleTransition(Duration.millis(DURATION), node);
animationShrink.setToX(1);
animationShrink.setToY(1);
final Reflection effect = new Reflection();
node.setEffect(effect);
node.setOnMouseEntered(new EventHandler<MouseEvent>() {
public void handle(MouseEvent event) {
node.toFront();
animationShrink.stop();
animationGrow.playFromStart();
}
});
node.setOnMouseExited(new EventHandler<MouseEvent>() {
public void handle(MouseEvent event) {
animationGrow.stop();
animationShrink.playFromStart();
}
});
final ColorAdjust effectPressed = new ColorAdjust(0, 0, -0.5, 0);
node.setOnMouseClicked(new EventHandler<MouseEvent>() {
public void handle(MouseEvent event) {
action.run();
effect.setInput(effectPressed);
Timeline tl = new Timeline(new KeyFrame(Duration.millis(300), new EventHandler<ActionEvent>() {
public void handle(ActionEvent event) {
effect.setInput(null);
}
}));
tl.play();
}
});
return node;
}
}
Отже тепер метод виконує такі дії:
Завантажує зображення кнопки;
Створює анімацію зростання зображення;
Створює анімацію зменшення зображення;
Додається ефект віддзеркалення;
Пов’язуються події вказівника миші зі збільшенням та зменшенням зображення;
При натисканні на зображення воно затемнюється на 300 мілісекунд.
Потрібно відмітити, що додавання ефектів до елементу, який вже має ефект (в даному випадку — віддзеркалення), потрібно робити через метод setInput.
Через те, що тепер елементи зростають при наведенні, потрібно збільшити ширину акордеону. Ширина зображень 100 пікселей, коефіцієнт зростання 1.2, тобто потрібно в методі getAccordion() взяти трохи більше, ніж 120:
accordion.setPrefWidth(130);
Запустивши додаток, можна подивитись на результат (рис. 3.28).
Рис. 3.28. Збільшена кнопка з віддзеркаленням
Практичне завдання
Додати до панелі інструментів і до акордеону кнопку зміни користувача (переходу до вікна авторизації).
Додати до LineChart третій графік.
Додати в кожній країні до BarChart власні популяційні прогнози на 2020 рік.
При наведенні на кнопку меню створити анімацію обертання навколо осі. Перед початком обертання прибрати ефект віддзеркалення, по закінченню обертання додати віддзеркалення.
Контрольні питання
Які класи реалізують веб-браузер?
Скільки типів графіків існує в JavaFX? Назвіть класи, які їх презентують.
З яких елементів створюється Accordion?
Які види створення анімації ви знаєте?
Які існують типи переходів (Transition)?