샘플 소개

하노이 타워라는 수수께끼가 있어요.위키백과 페이지의 설명은 간단하고 알기 쉽다.3개의 디스크를 사용한 애니메이션 이미지가 있습니다.
자바 FX로 하노이 타워 샘플을 만들었어요.원반을 움직이는 애니메이션을 실현했다.그러나 측면에서 보는 그림이라고 가정하면 직사각형으로 표시됩니다.
하노이타 알고리즘 참고 사이트는 다음과 같다.
제작된 프로그램은 아래 GiitHub 창고에 원본 파일과jar 파일을 넣었습니다.
다음은 부팅 후의 화면입니다.

콤보 상자에서 디스크 수를 선택할 수 있습니다.2, 3, 4만 선택할 수 있습니다.

선택한 수의 디스크를 맨 왼쪽에 설정합니다.검은색 사각형은 받침대를 나타낸다.

디스크를 이동하려면 '이동' 단추를 누르십시오.애니메이션.

[초기화] 버튼을 누르거나 콤보 상자에서 다른 값을 선택하면 모두 원래 위치로 돌아갑니다.

애니메이션의 실현 방법

나는 단지 애니메이션의 실제 조립 부분만 설명하고 싶다.
설치 시 Sequential Transition 클래스가 사용됩니다.Animation 순서대로 목록을 재생하는 반입니다.샘플에서 이 클래스를 사용하여 디스크를 위로, 오른쪽, 아래로 이동합니다.세 개의 TranslateTransition 클래스 실례를 생성하고 좌표를 설정하여 위, 오른쪽, 아래로 이동하고 Sequential Transition 클래스 실례에 로그인합니다.플레이 방법으로 조작할 수 있습니다.
다음은 Sequential Transition 클래스를 사용한 예입니다.

setByX, setByY 메서드

다음은 사각형을 위, 오른쪽, 아래, 왼쪽으로 이동하고 원래 위치로 되돌리는 예입니다.
예제

    @FXML Rectangle targetRectangle;

    @FXML
    private void move1(ActionEvent event) {

        Duration duration = new Duration(500);

        TranslateTransition t1 = new TranslateTransition(duration, targetRectangle);
        t1.setByY(-100);

        TranslateTransition t2 = new TranslateTransition(duration, targetRectangle);
        t2.setByX(200);

        TranslateTransition t3 = new TranslateTransition(duration, targetRectangle);
        t3.setByY(100);

        TranslateTransition t4 = new TranslateTransition(duration, targetRectangle);
        t4.setByX(-200);

        SequentialTransition sequentialTransition = new SequentialTransition();
        sequentialTransition.getChildren().addAll(t1, t2, t3, t4);
        sequentialTransition.play();

    }

컨스트럭터 TranslateTransition(Duration duration, Node node)을 사용하여 TranslateTransition 인스턴스를 생성합니다.Duration 클래스는 시간을 정의하는 클래스입니다.두 번째 매개변수는 Rectangle일 수 있습니다.Rectangle은 Shape을, Shape은 Node를 상속받았다.
Sequential Transition 클래스 애니메이션 인스턴스를 생성합니다.getChildren().addAll()에서 TranslateTransition 클래스의 인스턴스를 순서대로 지정합니다.재생 방법을 호출하면 애니메이션이 시작됩니다.
상기 예에서 TranslateTransition류의 다음과 같은 방법을 통해 이동 방법을 설정하였다.

void setByX(double value)

void setByY(double value)

는 각각 속성 byX, byY를 지정하는 방법입니다.처음부터 증가된 중지 X 및 Y 값의 속성을 지정합니다.

setToX, setToY 메서드

다음 예에서는 사각형을 위, 오른쪽, 아래, 왼쪽으로 이동하고 원래 위치로 돌아갑니다.
예제

    @FXML Rectangle targetRectangle;

    @FXML
    private void move2(ActionEvent event) {

        Duration duration = new Duration(500);

        TranslateTransition t1 = new TranslateTransition(duration, targetRectangle);
        t1.setToY(-100);

        TranslateTransition t2 = new TranslateTransition(duration, targetRectangle);
        t2.setToX(200);

        TranslateTransition t3 = new TranslateTransition(duration, targetRectangle);
        t3.setToY(0);

        TranslateTransition t4 = new TranslateTransition(duration, targetRectangle);
        t4.setToX(0);

        SequentialTransition sequentialTransition = new SequentialTransition();
        sequentialTransition.getChildren().addAll(t1, t2, t3, t4);
        sequentialTransition.play();

    }

TranslateTransition 클래스의 다음 방법을 사용하여 이동을 설정합니다.

void setToX(double value)

void setToY(double value)

각각 속성 toX, toY의 값을 설정합니다.이 속성들은 정지 좌표 값을 지정합니다.동작 판단에 따라 매개변수에 지정된 좌표 값은 상대 좌표입니다.

setOn Finished 메서드

Sequential Transition 클래스는 Transition 클래스를, Transition 클래스는 Animation 클래스를 상속합니다.따라서 Animation의 setOn Finished 메서드를 사용할 수 있습니다.이 방법을 사용하여 애니메이션의 마지막 동작을 설정할 수 있습니다.하노이타워의 샘플은 버튼류의 활성을 제어하기 위해 설정된 것이다.
다음과 같은 사용 방법.
예제

    @FXML Button button1;

    private void move1(ActionEvent event) {

        button1.setDisable(true);
        ・
        ・
        ・
        SequentialTransition sequentialTransition = new SequentialTransition();
        sequentialTransition.getChildren().addAll(t1, t2, t3, t4);
        sequentialTransition.onFinishedProperty().set(e -> {
            button1.setDisable(false);
        });

        sequentialTransition.play();

애니메이션의 마지막 "button1.setDisable;", 버튼이 활성 상태입니다.