Анимация в Java: Эффект тряски для UI

Этот урок посвящен созданию простой анимации в Java для обратной связи с пользователем при вводе некорректных данных. Речь пойдет о создании эффекта «тряски» для элементов интерфейса.

Создание класса анимации

Создадим класс Shake в пакете animation. Этот класс будет отвечать за анимацию «тряски» элементов интерфейса. Переменная translateTransition типа TranslateTransition из библиотеки javafx.animation хранит параметры анимации.

package animation;

import javafx.animation.TranslateTransition;
import javafx.scene.Node;
import javafx.util.Duration;

public class Shake {

    private TranslateTransition translateTransition;

    public Shake(Node node) {
        translateTransition = new TranslateTransition();
        translateTransition.setDuration(Duration.millis(70));
        translateTransition.setNode(node);
        translateTransition.setFromX(0f);
        translateTransition.setByX(10);
        translateTransition.setCycleCount(3);
        translateTransition.setAutoReverse(true);
    }

    public void play() {
        translateTransition.playFromStart();
    }
}

Использование класса анимации в контроллере

Добавим использование класса Shake в контроллер. При некорректном вводе логина или пароля запустим анимацию «тряски» для соответствующих полей ввода.

Предположим, есть поля ввода логина (loginField) и пароля (passwordField). Добавим в контроллер следующий код:

// ... другой код контроллера ...

Shake userLoginShake = new Shake(loginField);
Shake userPassShake = new Shake(passwordField);

if (/* условие проверки данных */) {
    // ... обработка успешного входа ...
} else {
    userLoginShake.play();
    userPassShake.play();
}
// ... другой код контроллера ...

Создаем объекты класса Shake для каждого поля ввода и запускаем анимацию play() при неудачной проверке.

Расширение анимации: добавление вертикального движения

Добавим анимацию по оси Y, изменив код в классе Shake:

// ... другой код класса Shake ...
translateTransition.setFromY(0f);
translateTransition.setByY(3f);
// ... другой код класса Shake ...

Это добавит вертикальное движение. Значение setFromY(0f) необходимо для корректной работы.

Мы рассмотрели создание простой анимации в Java с помощью TranslateTransition. Этот подход повышает интерактивность приложения и улучшает пользовательский опыт, предоставляя визуальную обратную связь при некорректном вводе данных. Возможности анимации в JavaFX значительно шире, и этот пример – лишь начало.