[JavaFX] Control 슬라이드 애니메이션 구현 방법

들어가며

• JavaFX로 간단하게 컨트롤에 슬라이드 애니메이션을 적용하는 방법을 알아보겠습니다.
• 예제 프로그램은 아래 이미지 처럼 'Animate!' 버튼을 클릭하면 슬라이드 애니메이션으로 오른쪽, 왼쪽 화면으로 좌우 전환이 되는 프로그램 입니다.
• 원본 소스는 아래 위치에 있습니다.

rlawlstjd0077/JavaFxPlayGround

---

구현방법

SimpleAnimation.fxml

<fx:root style="-fx-background-color: white;" type="BorderPane" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" prefWidth="350" prefHeight="250">
    <top>
        <HBox alignment="CENTER" spacing="30">
            <Button fx:id="button" text="Animate!"/>
        </HBox>
    </top>
    <center>
        <Pane prefHeight="250" prefWidth="350">
            <HBox fx:id="container">
                <AnchorPane prefHeight="250" prefWidth="350">
                    <HBox AnchorPane.bottomAnchor="0" AnchorPane.topAnchor="0" AnchorPane.leftAnchor="0" AnchorPane.rightAnchor="0" alignment="CENTER">
                        <Label text="왼쪽 화면" alignment="CENTER" prefHeight="35" prefWidth="180">
                            <font>
                                <Font name="Roboto Regular" size="30.0" />
                            </font>
                        </Label>
                    </HBox>
                </AnchorPane>
                <AnchorPane layoutX="350" prefHeight="250" prefWidth="350">
                    <HBox AnchorPane.bottomAnchor="0" AnchorPane.topAnchor="0" AnchorPane.leftAnchor="0" AnchorPane.rightAnchor="0" alignment="CENTER">
                        <Label text="오른쪽 화면" alignment="CENTER" prefHeight="35" prefWidth="180" >
                            <font>
                                <Font name="Roboto Regular" size="30.0" />
                            </font>
                        </Label>
                    </HBox>
                </AnchorPane>
            </HBox>
        </Pane>
    </center>
</fx:root>

• 대략적으로 보면 Pane 안에 왼쪽 화면 (AnchorPane), 오른쪽 화면 (AnchorPane) 이 나란히 들어가 있는 구조 입니다.

---

SimpleAnimationController.java

public class SimpleAnimationController extends BorderPane {
    @FXML
    private HBox container;
    @FXML
    private Button button;

    boolean flag;

    public SimpleAnimationController() {
        FxUiUtil.initializeFont();
        FxUiUtil.loadFxml(this);
        initUI();
    }

    private void initUI() {
        button.setOnAction(event -> {
            if (flag) {
                toLeft();
            } else {
                toRight();
            }
            flag = !flag;
        } );
    }

    private void toRight() {
        final Timeline timeline = new Timeline();
        timeline.setCycleCount(1);
        final KeyValue kv = new KeyValue(container.layoutXProperty(), -350);
        final KeyFrame kf = new KeyFrame(Duration.millis(500), kv);
        timeline.getKeyFrames().add(kf);
        timeline.play();
    }

    private void toLeft() {
        final Timeline timeline = new Timeline();
        timeline.setCycleCount(1);
        final KeyValue kv = new KeyValue(container.layoutXProperty(), 0);
        final KeyFrame kf = new KeyFrame(Duration.millis(500), kv);
        timeline.getKeyFrames().add(kf);
        timeline.play();
    }
}

• JavaFX에서 Animation을 적용하기 위해서는 Timeline 이라는 클래스를 이용합니다.
  • JavaFX Animation 구현방법에 대한 자세한 내용은 아래 포스트 참고

(JavaFX) JavaFX 애니메이션 사용법

• KeyValue로 이동할 시작, 종료 Posision 정보를 KeyFrame으로 속도를 조절한다고 생각하면 됩니다.

---

SimpleAnimationControllerTest.java

public class SimpleAnimationControllerTest extends Application {

  @Override
  public void start(Stage primaryStage) throws Exception {
    SimpleAnimationController animationController = new SimpleAnimationController();
    primaryStage.setScene(new Scene(animationController));
    primaryStage.setTitle("Animation Test");
    primaryStage.show();
  }

  @Test
  public void test() {
    launch();
  }
}

• 테스트 코드를 만들어 전시해주도록 합시다.

---

관련글

(JavaFX) JavaFX TableView 사용법 ver.2

[JavaFx] Tray Icon 전시 방법

(JavaFX) JavaFX ImageView 사용법 (이미지 전시 방법)