修改登录框

client/src/main/java/com/epri/fx/client/AppStartup.java

@@ -2,6 +2,7 @@ package com.epri.fx.client;
 
 import com.epri.fx.client.gui.uicomponents.control.LFXDecorator;
 import com.epri.fx.client.gui.uicomponents.login.LoginController;
+import com.epri.fx.client.gui.uicomponents.login.LoginControllerNew;
 import com.epri.fx.client.store.ApplicatonStore;
 import com.jfoenix.assets.JFoenixResources;
 import com.jfoenix.svg.SVGGlyph;
@@ -69,7 +70,7 @@ public class AppStartup extends Application {
 
         ApplicationContext.getInstance().register(stage, Stage.class);
 
-        Flow flow = new Flow(LoginController.class);
+        Flow flow = new Flow(LoginControllerNew.class);
         FlowHandler flowHandler = flow.createHandler();
         StackPane rootPane = flowHandler.start(new AnimatedFlowContainer(Duration.millis(320), ContainerAnimations.SWIPE_LEFT));
 
@@ -87,7 +88,7 @@ public class AppStartup extends Application {
         stage.show();
 
 
-        scene.getStylesheets().addAll(JFoenixResources.load("/css/app-fonts.css").toExternalForm(),AppStartup.class.getResource("/css/app.css").toExternalForm());
+        scene.getStylesheets().addAll(JFoenixResources.load("/css/app-fonts.css").toExternalForm(),AppStartup.class.getResource("/css/app.css").toExternalForm(),AppStartup.class.getResource("/css/login.css").toExternalForm());
 
     }
 

client/src/main/java/com/epri/fx/client/gui/uicomponents/login/LoginControllerNew.java

@@ -0,0 +1,478 @@
+package com.epri.fx.client.gui.uicomponents.login;
+
+import com.epri.fx.client.bean.MenuVoCell;
+import com.epri.fx.client.gui.uicomponents.main.MainController;
+import com.epri.fx.client.request.Request;
+import com.epri.fx.client.request.feign.admin.MenuFeign;
+import com.epri.fx.client.request.feign.login.LoginFeign;
+import com.epri.fx.client.store.ApplicatonStore;
+import com.epri.fx.client.utils.AlertUtil;
+import com.epri.fx.client.websocket.Session;
+import com.epri.fx.server.util.EncryptUtil;
+import com.epri.fx.server.util.user.JwtAuthenticationRequest;
+import com.epri.fx.server.vo.FrontUser;
+import com.epri.fx.server.vo.MenuVO;
+import com.epri.fx.server.vo.PermissionInfo;
+import com.jfoenix.controls.JFXButton;
+import com.jfoenix.controls.JFXPasswordField;
+import com.jfoenix.controls.JFXProgressBar;
+import com.jfoenix.controls.JFXTextField;
+import com.jfoenix.svg.SVGGlyph;
+import com.jfoenix.svg.SVGGlyphLoader;
+import io.datafx.controller.ViewController;
+import io.datafx.controller.flow.FlowException;
+import io.datafx.controller.flow.action.ActionMethod;
+import io.datafx.controller.flow.action.ActionTrigger;
+import io.datafx.controller.flow.context.ActionHandler;
+import io.datafx.controller.flow.context.FXMLViewFlowContext;
+import io.datafx.controller.flow.context.FlowActionHandler;
+import io.datafx.controller.flow.context.ViewFlowContext;
+import io.datafx.controller.util.VetoException;
+import io.datafx.core.concurrent.ProcessChain;
+import javafx.animation.*;
+import javafx.beans.binding.Bindings;
+import javafx.beans.property.DoubleProperty;
+import javafx.beans.property.SimpleDoubleProperty;
+import javafx.beans.value.ChangeListener;
+import javafx.beans.value.ObservableValue;
+import javafx.event.Event;
+import javafx.event.EventHandler;
+import javafx.fxml.FXML;
+import javafx.scene.control.Hyperlink;
+import javafx.scene.control.Label;
+import javafx.scene.effect.PerspectiveTransform;
+import javafx.scene.image.ImageView;
+import javafx.scene.input.KeyCode;
+import javafx.scene.layout.HBox;
+import javafx.scene.layout.Pane;
+import javafx.scene.layout.StackPane;
+import javafx.util.Duration;
+
+import javax.annotation.PostConstruct;
+import javax.annotation.PreDestroy;
+import javax.inject.Inject;
+import java.io.File;
+import java.util.Arrays;
+import java.util.Comparator;
+import java.util.List;
+import java.util.Map;
+import java.util.stream.Collectors;
+
+/**
+ * @description:
+ * @className: ConversationItemPresenter
+ * @author: liwen
+ * @date: 2019-09-25 16:51
+ */
+@ViewController("/fxml/login/Untitled.fxml")
+public class LoginControllerNew {
+
+    @FXML
+    private StackPane rootPane;
+    @FXML
+    private Pane imagePane;
+
+    @FXML
+    private StackPane centerPane;
+
+    //正面视图
+    @FXML
+    public HBox loginPane;
+    //反面视图
+    @FXML
+    public HBox registeredPane;
+    @FXML
+    public Hyperlink registeredLink;
+    @FXML
+    public Hyperlink loginLink;
+    @FXML
+    private Label errorLabel;
+    @FXML
+    private Label userIcon;
+    @FXML
+    private Label pwdIcon;
+    @FXML
+    private Label reuserIcon;
+    @FXML
+    private Label repwdIcon;
+    @FXML
+    private Label repwd2Icon;
+    @FXML
+    private JFXProgressBar lodingBar;
+    @FXML
+    private JFXTextField userNameTextField;
+    @FXML
+    private JFXPasswordField passWordTextField;
+    //翻转角度
+    private DoubleProperty angleProperty = new SimpleDoubleProperty(Math.PI / 2);
+    //正面翻转特效
+    private PerspectiveTransform frontEffect = new PerspectiveTransform();
+    //反面翻转特效
+    private PerspectiveTransform backEffect = new PerspectiveTransform();
+    private Timeline frontTimeLine = new Timeline();
+    private Timeline backTimeLine = new Timeline();
+
+    @ActionHandler
+    private FlowActionHandler actionHandler;
+
+    private SequentialTransition sequentialTransition = new SequentialTransition();
+
+    private DoubleProperty imageWidth = new SimpleDoubleProperty();
+    private DoubleProperty imageHeiht = new SimpleDoubleProperty();
+
+
+    @Inject
+    private Session session;
+
+    @FXML
+    @ActionTrigger("login")
+    private JFXButton loginBut;
+
+    @FXMLViewFlowContext
+    private ViewFlowContext flowContext;
+
+    @PostConstruct
+    public void init() {
+
+        try {
+            SVGGlyph userSvg = SVGGlyphLoader.getIcoMoonGlyph(ApplicatonStore.ICON_FONT_KEY + ".user-name");
+            SVGGlyph pwdSvg = SVGGlyphLoader.getIcoMoonGlyph(ApplicatonStore.ICON_FONT_KEY + ".password");
+            SVGGlyph reuserSvg = SVGGlyphLoader.getIcoMoonGlyph(ApplicatonStore.ICON_FONT_KEY + ".user-name");
+            SVGGlyph repwdSvg = SVGGlyphLoader.getIcoMoonGlyph(ApplicatonStore.ICON_FONT_KEY + ".password");
+            SVGGlyph repwd2Svg = SVGGlyphLoader.getIcoMoonGlyph(ApplicatonStore.ICON_FONT_KEY + ".querenmima");
+            userSvg.setId("login-svg-glyph");
+            pwdSvg.setId("login-svg-glyph");
+            reuserSvg.setId("login-svg-glyph");
+            repwdSvg.setId("login-svg-glyph");
+            repwd2Svg.setId("login-svg-glyph");
+
+            userIcon.setGraphic(userSvg);
+            pwdIcon.setGraphic(pwdSvg);
+            reuserIcon.setGraphic(reuserSvg);
+            repwdIcon.setGraphic(repwdSvg);
+            repwd2Icon.setGraphic(repwd2Svg);
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+
+        imagePane.widthProperty().addListener(new ChangeListener<Number>() {
+            @Override
+            public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
+                imageWidth.setValue(newValue);
+            }
+        });
+        imagePane.heightProperty().addListener(new ChangeListener<Number>() {
+            @Override
+            public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
+                imageHeiht.setValue(newValue);
+            }
+        });
+
+        registeredPane.visibleProperty().bind(
+                Bindings.when(angleProperty.lessThan(0)).then(true).otherwise(false));
+        loginPane.visibleProperty().bind(registeredPane.visibleProperty().not());
+
+        initAnimation();
+        loadingImage();
+        initAction();
+
+    }
+
+    private void initAnimation() {
+        FadeTransition fadeTransition = new FadeTransition(Duration.millis(500), centerPane);
+        fadeTransition.setFromValue(0f);
+        fadeTransition.setToValue(1f);
+
+        TranslateTransition translateTransition = new TranslateTransition(Duration.millis(500), centerPane);
+        translateTransition.setInterpolator(Interpolator.EASE_BOTH);
+        translateTransition.setFromY(400);
+        translateTransition.setToY(centerPane.getLayoutY());
+
+        ParallelTransition parallelTransition = new ParallelTransition();
+        parallelTransition.setDelay(Duration.millis(1500));
+        parallelTransition.getChildren().addAll(
+                fadeTransition,
+                translateTransition
+        );
+        parallelTransition.setCycleCount(1);
+        parallelTransition.play();
+
+
+        KeyFrame frame1 = new KeyFrame(Duration.ZERO, new KeyValue(angleProperty,
+                Math.PI / 2, Interpolator.LINEAR));
+        KeyFrame frame2 = new KeyFrame(Duration.seconds(0.5),
+                new EventHandler() {
+                    @Override
+                    public void handle(Event event) {
+                        loginPane.setEffect(null);
+                        registeredPane.setEffect(null);
+                    }
+
+                }, new KeyValue(angleProperty, -Math.PI / 2, Interpolator.LINEAR));
+
+        KeyFrame frame3 = new KeyFrame(Duration.seconds(0.5), new EventHandler() {
+            @Override
+            public void handle(Event event) {
+                loginPane.setEffect(null);
+                registeredPane.setEffect(null);
+            }
+
+        }, new KeyValue(angleProperty,
+                Math.PI / 2, Interpolator.LINEAR));
+        KeyFrame frame4 = new KeyFrame(Duration.ZERO, new KeyValue(angleProperty, -Math.PI / 2, Interpolator.LINEAR));
+
+
+        frontTimeLine.getKeyFrames().addAll(frame1, frame2);
+        backTimeLine.getKeyFrames().addAll(frame4, frame3);
+    }
+
+    private void setPT(PerspectiveTransform pt, double t) {
+        double width = 650;
+        double height = 450;
+        double radius = width / 2;
+        double back = height / 10;
+        pt.setUlx(radius - Math.sin(t) * radius);
+        pt.setUly(0 - Math.cos(t) * back);
+        pt.setUrx(radius + Math.sin(t) * radius);
+        pt.setUry(0 + Math.cos(t) * back);
+        pt.setLrx(radius + Math.sin(t) * radius);
+        pt.setLry(height - Math.cos(t) * back);
+        pt.setLlx(radius - Math.sin(t) * radius);
+        pt.setLly(height + Math.cos(t) * back);
+    }
+
+    private void loadingImage() {
+
+        ImageView logBack = new ImageView("/images/loginBack.jpg");
+        logBack.fitHeightProperty().bind(imageHeiht);
+        logBack.fitWidthProperty().bind(imageWidth);
+        imagePane.getChildren().add(new Label("", logBack));
+
+        List<File> files = Arrays.asList(new File(this.getClass().getResource("/images/login/").getPath()).listFiles());
+
+        sequentialTransition.setAutoReverse(true);
+        sequentialTransition.setCycleCount(Timeline.INDEFINITE);
+
+        ProcessChain.create().addPublishingTask(() -> imagePane.getChildren(), p -> {
+            for (int i = 0; i < files.size(); i++) {
+
+                File file = files.get(i);
+                if (!file.isDirectory()) {
+                    String url = "/images/login/" + file.getName();
+                    ImageView imageView = new ImageView(url);
+                    imageView.fitHeightProperty().bind(imageHeiht);
+                    imageView.fitWidthProperty().bind(imageWidth);
+                    Label label = new Label("", imageView);
+
+                    label.setOpacity(0d);
+                    FadeTransition fadeT = new FadeTransition(Duration.millis(500), label);
+                    fadeT.setDelay(Duration.millis(1500));
+                    fadeT.setFromValue(0f);
+                    fadeT.setToValue(1f);
+                    fadeT.setCycleCount(1);
+                    sequentialTransition.getChildren().add(fadeT);
+
+                    p.publish(label);
+
+                }
+
+            }
+        }).withFinal(() -> sequentialTransition.play()).run();
+
+    }
+
+    private void initAction() {
+        errorLabel.visibleProperty().bind(errorLabel.textProperty().isNotEmpty());
+        errorLabel.managedProperty().bind(errorLabel.visibleProperty());
+
+        lodingBar.visibleProperty().bind(centerPane.disableProperty());
+        lodingBar.managedProperty().bind(lodingBar.visibleProperty());
+
+        userNameTextField.focusedProperty().addListener((o, oldVal, newVal) -> {
+            if (!newVal) {
+                userNameTextField.validate();
+            }
+        });
+        passWordTextField.focusedProperty().addListener((o, oldVal, newVal) -> {
+            if (!newVal) {
+                passWordTextField.validate();
+            }
+        });
+
+        loginBut.disableProperty().bind(Bindings.or(
+                userNameTextField.textProperty().isEqualTo(""),
+                passWordTextField.textProperty().isEqualTo("")));
+
+        rootPane.setOnKeyPressed(event -> {
+            if (event.getCode() == KeyCode.ENTER) {
+                if (loginBut.isDisable() == false) {
+                    login();
+                }
+            }
+
+        });
+        angleProperty.addListener((observable, oldValue, newValue) -> {
+            setPT(frontEffect, angleProperty.get());
+            setPT(backEffect, angleProperty.get() - Math.PI);
+        });
+        registeredLink.setOnAction(event -> {
+            loginPane.setEffect(frontEffect);
+            registeredPane.setEffect(backEffect);
+            frontTimeLine.play();
+        });
+        loginLink.setOnAction(event -> {
+            loginPane.setEffect(frontEffect);
+            registeredPane.setEffect(backEffect);
+            backTimeLine.play();
+        });
+    }
+
+
+    /**
+     * @Description:登录
+     * @param: []
+     * @return: void
+     * @auther: liwen
+     * @date: 2020/11/6 9:56 上午
+     */
+    @ActionMethod("login")
+    private void login() {
+
+        JwtAuthenticationRequest jwtAuthenticationRequest = new JwtAuthenticationRequest();
+        jwtAuthenticationRequest.setUsername(userNameTextField.getText());
+        jwtAuthenticationRequest.setPassword(EncryptUtil.getInstance().Base64Encode(passWordTextField.getText()));
+        ProcessChain.create()
+                .addRunnableInPlatformThread(() -> {
+                    centerPane.setDisable(true);
+                    loginBut.setText("正在登录...");
+                })
+                .addSupplierInExecutor(() -> Request.connector(LoginFeign.class).login(jwtAuthenticationRequest))
+                .addConsumerInPlatformThread(rel -> {
+
+                    if (rel.getStatus() == 200) {
+                        errorLabel.setText("");
+                        ApplicatonStore.setToken(rel.getData());
+                        loadApplicatonStore();
+                    } else {
+                        lodingBar.requestFocus();
+                        errorLabel.setText(rel.getMessage());
+                    }
+
+                })
+                .onException(e -> {
+                    e.printStackTrace();
+                    errorLabel.setText("无法连接服务器，请检查服务器是否启动。");
+                    lodingBar.requestFocus();
+                })
+                .withFinal(() -> {
+                    centerPane.setDisable(false);
+                    loginBut.setText("登录");
+                }).run();
+
+
+    }
+
+    public void loadApplicatonStore() {
+        ProcessChain.create()
+                .addRunnableInPlatformThread(() -> {
+                    try {
+                        actionHandler.navigate(LoadingController.class);
+                    } catch (Exception e) {
+                        throw new RuntimeException(e);
+                    }
+                    ApplicatonStore.setName("");
+                    ApplicatonStore.getAllMenu().clear();
+                    ApplicatonStore.getMenus().clear();
+                    ApplicatonStore.getElements().clear();
+                    ApplicatonStore.getPermissionMenus().clear();
+                    ApplicatonStore.getRoles().clear();
+                })
+                .addSupplierInExecutor(() -> Request.connector(MenuFeign.class).getMenuAll())
+                .addConsumerInPlatformThread(rel -> ApplicatonStore.getAllMenu().addAll(rel))
+                .addSupplierInExecutor(() ->
+                        Request.connector(LoginFeign.class).getInfo(ApplicatonStore.getToken())
+                )
+                .addConsumerInPlatformThread(rel -> {
+                    if (rel.getStatus() == 200) {
+                        FrontUser frontUser = rel.getData();
+                        ApplicatonStore.setName(frontUser.name);
+                        ApplicatonStore.getMenus().addAll(frontUser.getMenus());
+                        ApplicatonStore.getRoles().addAll(frontUser.getRoles());
+                        ApplicatonStore.getElements().addAll(frontUser.getElements());
+                        ApplicatonStore.setIntroduction(frontUser.getDescription());
+
+                        for (PermissionInfo permissionInfo : frontUser.getElements()) {
+                            ApplicatonStore.getFeatureMap().put(permissionInfo.getCode(), permissionInfo.getName());
+                        }
+
+
+                    } else {
+                        AlertUtil.show(rel);
+                    }
+                })
+                .addSupplierInExecutor(() ->
+                        Request.connector(LoginFeign.class).getMenus(ApplicatonStore.getToken())
+                )
+                .addConsumerInPlatformThread(rel -> {
+                    ApplicatonStore.getPermissionMenus().addAll(rel);
+
+                })
+                .addSupplierInExecutor(() -> {
+
+                    List<MenuVO> allMenuList = ApplicatonStore.getAllMenu();
+                    Map<Integer, List<MenuVO>> allMap = allMenuList.stream().collect(Collectors.groupingBy(MenuVO::getParentId));
+                    MenuVO rootMenu = allMenuList.stream().min(Comparator.comparing(MenuVO::getParentId)).get();
+
+
+                    List<MenuVO> permissionInfoList = ApplicatonStore.getPermissionMenus();
+                    Map<Integer, List<MenuVO>> permissionInfoMap = permissionInfoList.stream().collect(Collectors.groupingBy(MenuVO::getParentId));
+                    Map<String, List<MenuVO>> permissonTitleMap = permissionInfoList.stream().collect(Collectors.groupingBy(MenuVO::getTitle));
+
+                    for (MenuVO menu : allMap.get(rootMenu.getId())) {
+
+                        List<MenuVO> childrenMenus = permissionInfoMap.get(menu.getId());
+
+                        List<MenuVO> partMenus = permissonTitleMap.get(menu.getTitle());
+                        if (childrenMenus == null && partMenus == null) {
+
+                            continue;
+                        }
+
+                        MenuVoCell menuVoCell = new MenuVoCell(menu, childrenMenus);
+
+                        ApplicatonStore.getMenuVoCells().add(menuVoCell);
+
+                    }
+                    return 0;
+
+                })
+                .addConsumerInPlatformThread(rel -> {
+
+                    try {
+                        actionHandler.navigate(MainController.class);
+                    } catch (Exception e) {
+                        throw new RuntimeException(e);
+                    }
+                })
+                .onException(e -> {
+                    e.printStackTrace();
+                    try {
+                        actionHandler.navigate(LoginController.class);
+                    } catch (VetoException vetoException) {
+                        vetoException.printStackTrace();
+                    } catch (FlowException flowException) {
+                        flowException.printStackTrace();
+                    }
+                })
+                .run();
+    }
+
+    @PreDestroy
+    private void destroy() {
+        sequentialTransition.stop();
+    }
+
+
+}
+
+

client/src/main/resources/css/app.css

@@ -38,7 +38,7 @@
 .card-pane {
     -fx-background-color: -fx-card-base;
     -fx-padding: 10;
-    -fx-background-radius: 14;
+    -fx-background-radius: 14px;
     -fx-border-color: #313D4F;
     -fx-border-width: 1px;
     -fx-border-radius: 14px;
@@ -50,11 +50,11 @@
 * text和label                                                                *
 *                                                                              *
 *******************************************************************************/
-.text, .label {
+ .label {
     -fx-text-fill: -fx-text-color;
     -fx-font-family: "Microsoft YaHei";
     -fx-font-weight: 100;
-    -fx-font-size: -fx-font-base14;
+    -fx-font-size: 14px;
 }
 
 /*******************************************************************************
@@ -218,7 +218,7 @@
 
 .lfx-decorator .lfx-decorator-title-container .lfx-decorator-text {
     -fx-fill: -fx-text-color;
-    -fx-font-size: 16;
+    -fx-font-size: 16px;
 }
 
 .lfx-decorator .lfx-decorator-title-container .jfx-svg-glyph {
@@ -574,7 +574,7 @@
     -fx-font-family: "Microsoft YaHei";
     -fx-font-weight: BOLD;
     -fx-text-fill: -fx-text-color;
-    -fx-font-size: -fx-font-base16;
+    -fx-font-size: 16px;
 }
 
 /**TableView列头展示隐藏列按钮*/
@@ -705,7 +705,7 @@
 }
 
 .jfx-text-field > .input-line,
-.jfx-password-fieldxt-field > .input-line,
+.jfx-password-field > .input-line,
 .jfx-text-area > .input-line,
 .jfx-combo-box > .input-line {
     -fx-background-color: -jfx-unfocus-color;
@@ -714,27 +714,14 @@
 }
 
 .jfx-text-field > .input-focused-line,
-.jfx-password-fieldxt-field > .input-focused-line,
+.jfx-password-field > .input-focused-line,
 .jfx-text-area > .input-focused-line,
-.jfx-tejfx-combo-box > .input-focused-line {
+.jfx-combo-box > .input-focused-line {
     -fx-background-color: -jfx-focus-color;
     -fx-pref-height: 1px;
 }
 
-.login-text {
-    -fx-background-color: transparent;
-    -fx-font-family: "Microsoft YaHei";
-    -fx-font-weight: 100;
-    -fx-text-fill: -fx-light-text-color;
-    -fx-prompt-text-fill: #70665e;
-    -fx-alignment: top-left;
-    -jfx-focus-color: #70665e;
-    -jfx-unfocus-color: -fx-light-text-color;
-}
 
-#login-glyph-icon {
-    -fx-fill: #70665e;
-}
 
 
 /*******************************************************************************

client/src/main/resources/css/login.css

@@ -0,0 +1,57 @@
+/*******************************************************************************
+ *                                                                             *
+ * login                                                    *
+ *                                                                             *
+ ******************************************************************************/
+
+#login-title {
+    -fx-font-family: "Microsoft YaHei";
+    -fx-text-fill: #3e3e3e;
+    -fx-font-size: 30px;
+
+}
+
+#login-error-label {
+    -fx-font-family: "Microsoft YaHei";
+    -fx-text-fill: #f56363;
+    -fx-font-size: 14px;
+
+}
+
+#login-welcome-title {
+    -fx-font-family: "Microsoft YaHei";
+    -fx-font-weight: 100;
+    -fx-text-fill: #ffffff;
+    -fx-font-size: 45px;
+}
+
+#login-prompt {
+    -fx-font-family: "Microsoft YaHei";
+    -fx-font-weight: 100;
+    -fx-text-fill: #7a7a7a;
+    -fx-font-size: 12px;
+}
+
+#login-welcome-text {
+    -fx-font-family: "Microsoft YaHei";
+    -fx-font-weight: 100;
+    -fx-text-fill: #ffffff;
+    -fx-font-size: 20px;
+}
+
+#login-text-field {
+    -fx-background-color: transparent;
+    -fx-font-family: "Microsoft YaHei";
+    -fx-font-weight: 100;
+    -fx-font-size: 18px;
+    -fx-text-fill: -fx-light-text-color;
+    -fx-prompt-text-fill: #70665e;
+    -fx-alignment: top-left;
+    -jfx-focus-color: #0355a7;
+    -jfx-unfocus-color: -fx-light-text-color;
+}
+
+#login-svg-glyph{
+    -jfx-size: 20px;
+    -fx-background-color: #70665e;
+}

client/src/main/resources/fonts/icon_font/iconfont.svg

@@ -20,6 +20,15 @@ Created by iconfont
   />
     <missing-glyph />
     
+    <glyph glyph-name="user-name" unicode="&#58882;" d="M652.3 333.29999999999995C741.6 382.70000000000005 802 477.8 802 587c0 160.2-129.8 290-290 290-160.2 0-290-129.8-290-290 0-109.2 60.4-204.3 149.7-253.7C184 273.79999999999995 48 98.29999999999995 48-109l58 0c0 224.2 181.8 406 406 406 224.2 0 406-181.8 406-406l58 0C976 98.29999999999995 840 273.79999999999995 652.3 333.29999999999995zM280 587c0 128.1 103.9 232 232 232 128.1 0 232-103.9 232-232 0-128.1-103.9-232-232-232C383.9 355 280 458.9 280 587z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="querenmima" unicode="&#58890;" d="M236.002113 497.084103c0 51.11072-4.088858 102.22144 0 151.287731C248.268686 795.570707 370.934413 901.881004 520.177715 895.747717 661.243302 889.614431 775.731314 771.037561 777.775743 625.883117v-130.843443c10.222144 0 20.444288-2.044429 28.622003-2.044428 83.82158-2.044429 149.243302-69.510579 149.243302-153.33216v-306.664319c0-87.910438-67.46615-157.421017-157.421017-159.465445-190.131878-2.044429-380.263755-2.044429-572.440062 0-89.954867 0-157.421017 71.555008-157.421017 161.509874 0 91.999296 4.088858 183.998591-2.044429 273.953458-4.088858 96.088153 49.066291 179.909734 169.68759 188.087449zM512-56.956099h257.598028c75.643865 0 118.57687 42.933005 118.57687 118.576869V304.907797c0 79.732723-40.888576 120.621299-120.621299 122.665727h-511.107198c-77.688294 0-118.57687-42.933005-120.621299-118.57687v-247.375884c0-71.555008 44.977433-114.488012 116.532441-114.488012 87.910438-4.088858 173.776447-4.088858 259.642457-4.088857z m-212.620594 551.995773h412.974616v126.754585c0 104.265868-77.688294 190.131878-179.909734 202.398451-104.265868 12.266573-204.442879-55.199577-222.842738-157.421017-12.266573-55.199577-8.177715-112.443584-10.222144-171.732019z m0 0M352.534554 229.263931c14.311002 14.311002 36.799718 14.311002 51.11072 0l96.088153-96.088153c14.311002-14.311002 14.311002-36.799718 0-51.11072s-36.799718-14.311002-51.11072 0l-96.088153 96.088154c-14.311002 14.311002-14.311002 36.799718 0 51.110719z m0 0M671.465446 304.907797c14.311002-14.311002 14.311002-36.799718 0-51.11072l-171.732019-171.732019c-14.311002-14.311002-36.799718-14.311002-51.11072 0s-14.311002 36.799718 0 51.11072l171.732019 171.732019c14.311002 12.266573 36.799718 12.266573 51.11072 0z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="password" unicode="&#58883;" d="M780.8 458.479c41.13 0 74.479-33.348 74.479-74.479v-347.546a74.479 74.479 0 0 0-74.479-74.479H234.667a74.479 74.479 0 0 0-74.48 74.48V384c0 41.13 33.349 74.479 74.48 74.479H780.8m0 74.479H234.667A148.958 148.958 0 0 1 85.709 384v-347.546a148.958 148.958 0 0 1 148.958-148.923H780.8a148.958 148.958 0 0 1 148.958 148.923V384A148.958 148.958 0 0 1 780.8 532.9580000000001zM507.733 806.025a173.739 173.739 0 0 0 173.739-173.773v-99.328H334.029v99.328A173.739 173.739 0 0 0 507.767 805.99m0 74.48a248.252 248.252 0 0 1-248.251-248.218v-173.773h496.503V632.2180000000001A248.252 248.252 0 0 1 507.733 880.503z m0-781.961a37.205 37.205 0 0 0-37.205 37.24V284.70500000000004a37.205 37.205 0 0 0 74.41 0v-148.958a37.205 37.205 0 0 0-37.205-37.205z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="skin" unicode="&#59039;" d="M694 743.2a59.72 59.72 0 0 0 45.37-20.87L900.7 534 841 414.63l-38.62 38.62a29.87 29.87 0 0 1-51-21.12v-375.94a29.87 29.87 0 0 0-29.87-29.87H333.17a29.87 29.87 0 0 0-29.87 29.87V432.13a29.86 29.86 0 0 1-51 21.12l-38.63-38.62-89.59 119.48 161.33 188.23a59.71 59.71 0 0 0 45.36 20.86h6.08a89.58 89.58 0 0 0 46.79-13.2q76-46.55 128.74-46.55T641.13 730a89.59 89.59 0 0 0 46.8 13.19H694m0 59.74h-6.07a149.24 149.24 0 0 1-78-22c-50.95-31.2-81.16-37.75-97.54-37.75s-46.59 6.58-97.55 37.82a149.25 149.25 0 0 1-78 22h-6.08a119.31 119.31 0 0 1-90.72-41.73L78.72 573a59.75 59.75 0 0 1-2.43-74.72L165.9 378.8a59.74 59.74 0 0 1 77.66-15.89v-306.7a89.71 89.71 0 0 1 89.61-89.61h388.3a89.71 89.71 0 0 1 89.61 89.61V362.9a59.74 59.74 0 0 1 83.3 25l59.74 119.35a59.74 59.74 0 0 1-8.06 65.6L784.73 761.19A119.31 119.31 0 0 1 694 802.94z m0 0"  horiz-adv-x="1024" />
 
     

client/src/main/resources/fxml/login/Untitled.fxml

@@ -0,0 +1,143 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import com.jfoenix.controls.JFXButton?>
+<?import com.jfoenix.controls.JFXPasswordField?>
+<?import com.jfoenix.controls.JFXProgressBar?>
+<?import com.jfoenix.controls.JFXTextField?>
+<?import com.jfoenix.controls.JFXToggleButton?>
+<?import javafx.scene.control.Hyperlink?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.effect.DropShadow?>
+<?import javafx.scene.layout.AnchorPane?>
+<?import javafx.scene.layout.HBox?>
+<?import javafx.scene.layout.Pane?>
+<?import javafx.scene.layout.StackPane?>
+<?import javafx.scene.layout.VBox?>
+<?import javafx.scene.text.Font?>
+
+<StackPane fx:id="rootPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="970.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1">
+   <children>
+      <Pane fx:id="imagePane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: #3F007F;" />
+      <StackPane fx:id="centerPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="450.0" prefWidth="650.0" style="-fx-background-radius: 14;">
+         <children>
+            <HBox fx:id="loginPane">
+               <children>
+                  <AnchorPane maxHeight="1.7976931348623157E308" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="450.0" prefWidth="251.0" style="-fx-background-radius: 14 0 0 14; -fx-background-color: linear-gradient(#e66465, #9198e5);">
+                     <children>
+                        <Label id="login-welcome-title" layoutX="70.0" layoutY="134.0" text="欢迎" textFill="WHITE">
+                           <font>
+                              <Font size="48.0" />
+                           </font>
+                        </Label>
+                        <Label id="login-welcome-text" layoutX="38.0" layoutY="213.0" text="登录访问您的帐户" textFill="WHITE">
+                           <font>
+                              <Font size="20.0" />
+                           </font>
+                        </Label>
+                        <Label layoutX="79.0" layoutY="419.0" text="©中国xxx∙xxx" textFill="#ffffffad" />
+                     </children>
+                     <effect>
+                        <DropShadow color="#0000009e" height="0.0" radius="19.17" width="78.68" />
+                     </effect>
+                  </AnchorPane>
+                  <AnchorPane prefHeight="450.0" prefWidth="352.0" style="-fx-background-color: #ffffff; -fx-background-radius: 0 14 14 0;" HBox.hgrow="ALWAYS">
+                     <children>
+                        <Label id="login-title" layoutX="168.0" layoutY="45.0" text="登录">
+                           <font>
+                              <Font name="System Bold" size="33.0" />
+                           </font>
+                        </Label>
+                        <JFXProgressBar fx:id="lodingBar" layoutX="66.0" layoutY="83.0" visible="false" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" />
+                        <JFXTextField id="login-text-field" fx:id="userNameTextField" labelFloat="true" layoutX="71.0" layoutY="126.0" prefHeight="45.0" prefWidth="260.0" promptText="用户名">
+                           <font>
+                              <Font size="18.0" />
+                           </font>
+                        </JFXTextField>
+                        <JFXPasswordField id="login-text-field" fx:id="passWordTextField" labelFloat="true" layoutX="71.0" layoutY="210.0" prefHeight="45.0" prefWidth="260.0" promptText="密码">
+                           <font>
+                              <Font size="18.0" />
+                           </font>
+                        </JFXPasswordField>
+                        <JFXToggleButton alignment="CENTER_LEFT" layoutX="66.0" layoutY="265.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="45.0" prefWidth="260.0" text="记住密码" />
+                        <JFXButton fx:id="loginBut" layoutX="71.0" layoutY="326.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="50.0" prefWidth="260.0" style="-fx-background-color: linear-gradient(#e66465, #9198e5); -fx-background-radius: 25;" text="登录" textFill="#fffefe">
+                           <font>
+                              <Font size="18.0" />
+                           </font>
+                        </JFXButton>
+                        <Hyperlink fx:id="registeredLink" layoutX="226.0" layoutY="404.0" text="注册" />
+                        <Label id="login-prompt" layoutX="141.0" layoutY="408.0" text="还没有帐号?去" />
+                        <VBox alignment="CENTER" layoutY="302.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
+                           <children>
+                              <Label id="login-error-label" fx:id="errorLabel" alignment="CENTER" contentDisplay="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" VBox.vgrow="ALWAYS" />
+                           </children>
+                        </VBox>
+                        <Label id="icon-label" fx:id="userIcon" alignment="CENTER" contentDisplay="CENTER" layoutX="296.0" layoutY="131.0" maxHeight="-Infinity" maxWidth="-Infinity" prefHeight="35.0" prefWidth="35.0" />
+                        <Label id="icon-label" fx:id="pwdIcon" alignment="CENTER" contentDisplay="CENTER" layoutX="296.0" layoutY="215.0" maxHeight="-Infinity" maxWidth="-Infinity" prefHeight="35.0" prefWidth="35.0" />
+                     </children>
+                  </AnchorPane>
+               </children>
+            </HBox>
+            <HBox fx:id="registeredPane" visible="false">
+               <children>
+                  <AnchorPane maxHeight="1.7976931348623157E308" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="450.0" prefWidth="251.0" style="-fx-background-radius: 14 0 0 14; -fx-background-color: linear-gradient(#3F007F, #7226A5);">
+                     <children>
+                        <Label id="login-welcome-title" layoutX="70.0" layoutY="134.0" text="欢迎" textFill="WHITE">
+                           <font>
+                              <Font size="48.0" />
+                           </font>
+                        </Label>
+                        <Label id="login-welcome-text" layoutX="38.0" layoutY="213.0" text="注册访问您的帐户" textFill="WHITE">
+                           <font>
+                              <Font size="20.0" />
+                           </font>
+                        </Label>
+                        <Label layoutX="79.0" layoutY="419.0" text="©中国xxx∙xxx" textFill="#ffffffad" />
+                     </children>
+                     <effect>
+                        <DropShadow color="#0000009e" height="0.0" radius="19.17" width="78.68" />
+                     </effect>
+                  </AnchorPane>
+                  <AnchorPane prefHeight="450.0" prefWidth="352.0" style="-fx-background-color: #ffffff; -fx-background-radius: 0 14 14 0;" HBox.hgrow="ALWAYS">
+                     <children>
+                        <Label id="login-title" layoutX="166.0" layoutY="45.0" text="注册">
+                           <font>
+                              <Font name="System Bold" size="33.0" />
+                           </font>
+                        </Label>
+                        <JFXProgressBar layoutX="66.0" layoutY="83.0" visible="false" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" />
+                        <JFXTextField id="login-text-field" labelFloat="true" layoutX="71.0" layoutY="122.0" prefHeight="45.0" prefWidth="260.0" promptText="用户名" AnchorPane.topAnchor="122.0">
+                           <font>
+                              <Font size="18.0" />
+                           </font>
+                        </JFXTextField>
+                        <JFXPasswordField id="login-text-field" labelFloat="true" layoutX="69.0" layoutY="197.0" prefHeight="45.0" prefWidth="260.0" promptText="密码" AnchorPane.topAnchor="197.0">
+                           <font>
+                              <Font size="18.0" />
+                           </font>
+                        </JFXPasswordField>
+                        <JFXButton layoutX="71.0" layoutY="340.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="50.0" prefWidth="260.0" style="-fx-background-color: linear-gradient(#3F007F, #7226A5); -fx-background-radius: 25;" text="注册" textFill="#fffefe">
+                           <font>
+                              <Font size="18.0" />
+                           </font>
+                        </JFXButton>
+                        <Hyperlink fx:id="loginLink" layoutX="212.0" layoutY="402.0" text="登录" />
+                        <Label id="login-prompt" layoutX="147.0" layoutY="406.0" text="已有帐号去" />
+                        <JFXPasswordField id="login-text-field" labelFloat="true" layoutX="67.0" layoutY="270.0" prefHeight="45.0" prefWidth="260.0" promptText="确认密码" AnchorPane.topAnchor="270.0">
+                           <font>
+                              <Font size="18.0" />
+                           </font>
+                        </JFXPasswordField>
+                        <Label id="icon-label" fx:id="reuserIcon" alignment="CENTER" contentDisplay="CENTER" layoutX="292.0" layoutY="127.0" maxHeight="-Infinity" maxWidth="-Infinity" prefHeight="35.0" prefWidth="35.0" />
+                        <Label id="icon-label" fx:id="repwdIcon" alignment="CENTER" contentDisplay="CENTER" layoutX="292.0" layoutY="202.0" maxHeight="-Infinity" maxWidth="-Infinity" prefHeight="35.0" prefWidth="35.0" />
+                        <Label id="icon-label" fx:id="repwd2Icon" alignment="CENTER" contentDisplay="CENTER" layoutX="292.0" layoutY="275.0" maxHeight="-Infinity" maxWidth="-Infinity" prefHeight="35.0" prefWidth="35.0" />
+                     </children>
+                  </AnchorPane>
+               </children>
+            </HBox>
+         </children>
+         <effect>
+            <DropShadow color="#0000009e" height="0.0" offsetY="10.0" radius="44.9725" width="181.89" />
+         </effect>
+      </StackPane>
+   </children>
+</StackPane>

client/src/test/java/TestFx.java

@@ -5,74 +5,139 @@
  * @date: 2020/9/11 10:53
  */
 
-import com.epri.fx.client.AppStartup;
-import com.epri.fx.client.store.ApplicatonStore;
-import com.jfoenix.controls.JFXButton;
-import com.jfoenix.svg.SVGGlyph;
-import com.jfoenix.svg.SVGGlyphLoader;
 import javafx.animation.Interpolator;
-import javafx.animation.RotateTransition;
-import javafx.animation.SequentialTransition;
+import javafx.animation.KeyFrame;
+import javafx.animation.KeyValue;
+import javafx.animation.Timeline;
 import javafx.application.Application;
+import javafx.beans.binding.Bindings;
+import javafx.beans.property.DoubleProperty;
+import javafx.beans.property.SimpleDoubleProperty;
+import javafx.event.Event;
+import javafx.event.EventHandler;
 import javafx.geometry.Point3D;
-import javafx.scene.DepthTest;
 import javafx.scene.Scene;
+import javafx.scene.control.Button;
+import javafx.scene.effect.PerspectiveTransform;
 import javafx.scene.layout.StackPane;
-import javafx.scene.paint.Color;
+import javafx.scene.layout.VBox;
 import javafx.stage.Stage;
 import javafx.util.Duration;
 
-import java.io.IOException;
 
 public class TestFx extends Application {
 
 
+    //正面视图
+    public StackPane frontNode;
+    //反面视图
+    public StackPane backNode;
+    //是否翻转
+    boolean flipped = false;
+    //翻转角度
+    DoubleProperty time = new SimpleDoubleProperty(Math.PI / 2);
+    //正面翻转特效
+    PerspectiveTransform frontEffect = new PerspectiveTransform();
+    //反面翻转特效
+    PerspectiveTransform backEffect = new PerspectiveTransform();
+    Timeline anim = new Timeline();
+    Timeline anim1 = new Timeline();
+
     @Override
     public void start(Stage primaryStage) throws Exception {
 
-        new Thread(() -> {
-            try {
-                SVGGlyphLoader.loadGlyphsFont(AppStartup.class.getResourceAsStream("/fonts/icon_font/iconfont.svg"),
-                        ApplicatonStore.ICON_FONT_KEY);
-//                SVGGlyphLoader.loadGlyphsFont(AppStartup.class.getResourceAsStream("/fonts/icon_font/icon-font-solid.svg"),
-//                        "IconFontSolid.svg");
-            } catch (IOException ioExc) {
-                ioExc.printStackTrace();
-            }
-        }).start();
 
-        JFXButton button = new JFXButton("");
-        button.setPrefHeight(100);
-        button.setPrefWidth(200);
-        button.setRipplerFill(Color.RED);
-        SVGGlyph materialIconView = SVGGlyphLoader.getIcoMoonGlyph(ApplicatonStore.ICON_FONT_KEY + ".home-outline");
-//        materialIconView.setDepthTest(DepthTest.DISABLE);
-        materialIconView.setRotationAxis(new Point3D(0, 1, 0));
-        materialIconView.setSize(80);
-        button.setGraphic(materialIconView);
-        StackPane stackPane = new StackPane();
-        stackPane.getChildren().add(button);
+        StackPane rootPane = new StackPane();
 
-        RotateTransition transition1 = new RotateTransition(Duration.millis(500), materialIconView);
-        transition1.setByAngle(180);
-        transition1.setInterpolator(Interpolator.EASE_BOTH);
-        transition1.setOnFinished(event -> {
-        });
-
-
-        button.setOnMouseEntered(event -> {
-            transition1.play();
-        });
-        button.setOnMouseExited(event -> {
-            transition1.play();
-        });
-
-        Scene scene = new Scene(stackPane, 1000, 700);
+        rootPane.getChildren().addAll(create());
+        Scene scene = new Scene(rootPane, 1000, 700);
         primaryStage.setScene(scene);
         primaryStage.setTitle("JavaFX Welcome");
         primaryStage.show();
     }
 
+    private StackPane create() {
+
+        Button a=   new Button("正面视图");
+        Button b=   new Button("反面视图");
+        a.setOnAction(event -> {
+
+            frontNode.setEffect(frontEffect);
+            backNode.setEffect(backEffect);
+            anim.play();
+        });
+        b.setOnAction(event -> {
+
+            frontNode.setEffect(frontEffect);
+            backNode.setEffect(backEffect);
+            anim1.play();
+        });
+        frontNode = new StackPane();
+        frontNode.getChildren().add(a);
+        frontNode.setStyle("-fx-background-color: #11aa55");
+        backNode = new StackPane();
+        backNode.getChildren().add(b);
+
+        backNode.setStyle("-fx-background-color: #88bb55");
+        KeyFrame frame1 = new KeyFrame(Duration.ZERO, new KeyValue(time,
+                Math.PI / 2, Interpolator.LINEAR));
+        KeyFrame frame2 = new KeyFrame(Duration.seconds(1),
+                new EventHandler() {
+                    @Override
+                    public void handle(Event event) {
+                        frontNode.setEffect(null);
+                        backNode.setEffect(null);
+                    }
+
+                }, new KeyValue(time, -Math.PI / 2, Interpolator.LINEAR));
+
+        KeyFrame frame3 = new KeyFrame(Duration.seconds(1), new EventHandler() {
+            @Override
+            public void handle(Event event) {
+                frontNode.setEffect(null);
+                backNode.setEffect(null);
+            }
+
+        }, new KeyValue(time,
+                Math.PI / 2, Interpolator.LINEAR));
+        KeyFrame frame4 = new KeyFrame(Duration.ZERO, new KeyValue(time, -Math.PI / 2, Interpolator.LINEAR));
+
+        time.addListener((observable, oldValue, newValue) -> {
+            setPT(frontEffect, time.get());
+            setPT(backEffect, time.get() - Math.PI);
+        });
+        anim.getKeyFrames().addAll(frame1, frame2);
+
+        anim1.getKeyFrames().addAll(frame4, frame3);
+
+
+        backNode.visibleProperty().bind(
+                Bindings.when(time.lessThan(0)).then(true).otherwise(false));
+        frontNode.visibleProperty().bind(backNode.visibleProperty().not());
+
+
+        StackPane stackPane = new StackPane();
+        stackPane.setPrefSize(460, 450);
+        stackPane.setMaxSize(460, 450);
+        stackPane.getChildren().addAll(backNode, frontNode);
+        return stackPane;
+    }
+
+    private void setPT(PerspectiveTransform pt, double t) {
+        double width = 450;
+        double height = 450;
+        double radius = width / 2;
+        double back = height / 10;
+        pt.setUlx(radius - Math.sin(t) * radius);
+        pt.setUly(0 - Math.cos(t) * back);
+        pt.setUrx(radius + Math.sin(t) * radius);
+        pt.setUry(0 + Math.cos(t) * back);
+        pt.setLrx(radius + Math.sin(t) * radius);
+        pt.setLry(height - Math.cos(t) * back);
+        pt.setLlx(radius - Math.sin(t) * radius);
+        pt.setLly(height + Math.cos(t) * back);
+    }
+
     public static void main(String[] args) {
         launch(args);
     }

client/src/test/java/TimelineEvents.java

@@ -0,0 +1,94 @@
+import javafx.application.Application;
+import javafx.stage.Stage;
+import javafx.animation.AnimationTimer;
+import javafx.animation.KeyFrame;
+import javafx.animation.KeyValue;
+import javafx.animation.Timeline;
+import javafx.event.ActionEvent;
+import javafx.event.EventHandler;
+import javafx.scene.Group;
+import javafx.scene.Scene;
+import javafx.scene.effect.Lighting;
+import javafx.scene.layout.StackPane;
+import javafx.scene.paint.Color;
+import javafx.scene.shape.Circle;
+import javafx.scene.text.Text;
+import javafx.util.Duration;
+ 
+public class TimelineEvents extends Application {
+    
+    //主时间轴
+    private Timeline timeline;
+    private AnimationTimer timer;
+ 
+    //用于指定实际帧的变量
+    private Integer i=0;
+ 
+    @Override public void start(Stage stage) {
+        Group p = new Group();
+        Scene scene = new Scene(p);
+        stage.setScene(scene);
+        stage.setWidth(500);
+        stage.setHeight(500);
+        p.setTranslateX(80);
+        p.setTranslateY(80);
+ 
+        //创建一个带有特效的圆
+        final Circle circle = new Circle(20,  Color.rgb(156,216,255));
+        circle.setEffect(new Lighting());
+        //在圆内部创建一个文本
+        final Text text = new Text (i.toString());
+        text.setStroke(Color.BLACK);
+        //为带有文本的圆创建一个布局
+        final StackPane stack = new StackPane();
+        stack.getChildren().addAll(circle, text);
+        stack.setLayoutX(30);
+        stack.setLayoutY(30);
+ 
+        p.getChildren().add(stack);
+        stage.show();
+ 
+        //为了移动圆创建一个时间轴
+        timeline = new Timeline();
+        timeline.setCycleCount(1);
+        timeline.setAutoReverse(true);
+ 
+        //在每个帧开始时你可以添加一个特定的动作
+        timer = new AnimationTimer() {
+            @Override
+            public void handle(long l) {
+                text.setText(i.toString());
+                i++;
+            }
+ 
+        };
+ 
+        //创建一个带有缩放因子的keyValue:将圆缩放2倍
+        KeyValue keyValueX = new KeyValue(stack.scaleXProperty(), 2);
+        KeyValue keyValueY = new KeyValue(stack.scaleYProperty(), 2);
+ 
+        //创建一个KeyFrame, keyValue会在2秒钟时抵达
+        Duration duration = Duration.millis(2000);
+        //当抵达关键帧时可以指定一个特定的动作
+        EventHandler onFinished = new EventHandler<ActionEvent>() {
+            public void handle(ActionEvent t) {
+                 stack.setTranslateX(java.lang.Math.random()*200-100);
+                 //复位计数器 
+                 i = 0;
+            }
+        };
+ 
+        KeyFrame keyFrame = new KeyFrame(duration, onFinished , keyValueX, keyValueY);
+ 
+        //将关键帧添加到时间轴中
+        timeline.getKeyFrames().add(keyFrame);
+ 
+        timeline.play();
+        timer.start();
+    }
+        
+        
+    public static void main(String[] args) {
+        Application.launch(args);
+    }
+  }