JavaFX 用fxml+controller實現輪播

首先感謝Aimls老師的教程

整個內容大體來說是參考的老師的寫法，不過老師不是用的fxml，而是直接生成的

視頻地址

https://www.bilibili.com/video/BV19t41177ds?t=279

這裏只做了下一張的功能用作演示，不過上一張也是類似的，大家類比一下應該沒啥障礙

好了，廢話就不多說了，直接上代碼

• fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.*?>

<AnchorPane xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2"
            fx:controller="com.***.Controller">

    <Button onAction="#next" AnchorPane.leftAnchor="500.0">next-》</Button>

    <StackPane fx:id="stackPane" prefHeight="400" prefWidth="400" AnchorPane.topAnchor="200.0" AnchorPane.leftAnchor="500.0"
               style="-fx-border-color: red;-fx-border-style: solid;-fx-border-image-width: 2px">
        <HBox fx:id="hBox1" prefWidth="400" prefHeight="400" alignment="CENTER" style="-fx-background-color: #28fff5">
            <Button>hBox1</Button>
        </HBox>
        <HBox fx:id="hBox2" prefWidth="400" prefHeight="400" alignment="CENTER" style="-fx-background-color: #c1ff9a">
            <Button>hBox2</Button>
        </HBox>
    </StackPane>


</AnchorPane>

• controller

package com.***.controller;

import javafx.animation.Interpolator;
import javafx.animation.TranslateTransition;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.scene.effect.DisplacementMap;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.util.Duration;

public class Controller {

    @FXML
    private StackPane stackPane;

    //圖片寬度
    private Double width = 400.0;

    public void next(){

        HBox topHBox = (HBox) stackPane.getChildren().get(1);
        HBox bottomHBox = (HBox) stackPane.getChildren().get(0);
        Pane pane = new Pane();

        TranslateTransition translateTransition = new TranslateTransition();
        translateTransition.setDuration(Duration.seconds(1));//切換時間
        translateTransition.setNode(pane);
        translateTransition.setFromX(0);
        translateTransition.setToX(width);
        translateTransition.setInterpolator(Interpolator.LINEAR);//切換方式，這裏是線性
//        translateTransition.setCycleCount(Animation.INDEFINITE);//自動循環

        DisplacementMap displacementMapTop = new DisplacementMap();
        DisplacementMap displacementMapBottom = new DisplacementMap();
        topHBox.setEffect(displacementMapTop);
        bottomHBox.setEffect(displacementMapBottom);

        //控制HBox的顯示
        pane.translateXProperty().addListener(new ChangeListener<Number>() {
            @Override
            public void changed(ObservableValue<? extends Number> observableValue, Number oldNumber, Number newNumber) {
                displacementMapTop.setOffsetX(- (newNumber.doubleValue() / width));
                displacementMapBottom.setOffsetX(1 - (newNumber.doubleValue() / width));
            }
        });

        //完成移動動畫後將底部一層的HBox置top
        translateTransition.setOnFinished(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent actionEvent) {
                bottomHBox.toFront();
            }
        });
        translateTransition.play();
    }

}

• main

package com.***.byClient;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

/**
 * 程序入口
 *
 * @author ww
 * @date 2020/4/2 11:04
 */
public class Main extends Application {

    public static Stage stage;

    @Override
    public void start(Stage primaryStage) throws Exception {
        stage = primaryStage;
        Parent root = FXMLLoader.load(getClass().getResource("../fxml/sample.fxml"));

        stage.setScene(new Scene(root));

        stage.setWidth(1500);
        stage.setHeight(900);
        stage.centerOnScreen();
//        stage.setFullScreen(true);
//        stage.setAlwaysOnTop(true);
        stage.show();
    }

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

}