[java] JavaFX 애니메이션 효과 구현하기

15 Nov 2023

java

JavaFX는 Java 기반의 GUI 라이브러리로, 다양한 애니메이션 효과를 구현할 수 있는 기능을 제공합니다. 이번 튜토리얼에서는 JavaFX를 사용하여 애니메이션 효과를 구현하는 방법을 알아보겠습니다.

애니메이션 클래스

JavaFX에서 애니메이션을 구현하기 위해서는 Animation 클래스를 사용해야 합니다. Animation 클래스는 Transition 또는 Timeline 으로 상속될 수 있으며, 각각의 구현은 다양한 애니메이션 효과를 제공합니다.

Transition

Transition 클래스는 애니메이션의 시작과 끝으로 애니메이션을 제어하는 기능을 제공합니다. 예를 들어, FadeTransition 을 사용하면 페이드 인/아웃 효과를 구현할 수 있습니다.

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

public class FadeAnimation {
    public static void fade(Node node) {
        FadeTransition fadeTransition = new FadeTransition(Duration.seconds(2), node);
        fadeTransition.setFromValue(1.0);
        fadeTransition.setToValue(0.0);
        fadeTransition.setAutoReverse(true);
        fadeTransition.setCycleCount(Animation.INDEFINITE);
        
        fadeTransition.play();
    }
}

위의 예제에서는 FadeTransition 클래스를 사용하여 2초 동안 노드를 페이드 아웃하도록 구현했습니다. AutoReverse 속성을 true 로 설정하면 애니메이션이 재생된 후 반대로 역으로 재생되도록 할 수 있습니다. CycleCount 속성을 Animation.INDEFINITE 로 설정하면 애니메이션을 무한히 반복하도록 설정할 수 있습니다.

Timeline

Timeline 클래스는 애니메이션의 시작과 끝을 정밀하게 제어하는 기능을 제공합니다. 예를 들어, TranslateTransition 을 사용하면 이동하는 애니메이션 효과를 구현할 수 있습니다.

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

public class TranslateAnimation {
    public static void translate(Node node) {
        TranslateTransition translateTransition = new TranslateTransition(Duration.seconds(2), node);
        translateTransition.setFromX(0.0);
        translateTransition.setToX(200.0);
        translateTransition.setAutoReverse(true);
        translateTransition.setCycleCount(Animation.INDEFINITE);

        translateTransition.play();
    }
}

위의 예제에서는 TranslateTransition 클래스를 사용하여 2초 동안 노드를 x축으로 이동하도록 구현했습니다.

애니메이션 사용하기

애니메이션 클래스를 사용하여 효과를 구현한 후, 이를 원하는 노드에 적용할 수 있습니다. 예를 들어, 버튼을 클릭했을 때 페이드 아웃 애니메이션 효과를 적용하고 싶다면 다음과 같이 코드를 작성할 수 있습니다.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) {
        Button button = new Button("Click me");
        button.setOnAction(event -> {
            FadeAnimation.fade(button);
        });

        StackPane root = new StackPane(button);
        Scene scene = new Scene(root, 300, 200);

        primaryStage.setTitle("Animation Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

위의 예제에서는 버튼을 클릭하면 FadeAnimation 클래스의 fade 메소드를 호출하여 버튼에 페이드 아웃 애니메이션 효과를 적용합니다.

마치며

이번 튜토리얼에서는 JavaFX를 사용하여 간단한 애니메이션 효과를 구현하는 방법을 알아보았습니다. JavaFX는 다양한 애니메이션 클래스를 제공하므로, 필요에 따라 적절한 애니메이션 클래스를 선택하여 원하는 효과를 만들어내실 수 있습니다. 추가적인 자세한 내용은 JavaFX 공식 문서를 참고해 주세요.