使用贝塞尔曲线制作一个简单的加载动画

Author: icuxika

demo/src/main/kotlin/com/icuxika/bittersweet/demo/controller/MainController.kt

@@ -203,6 +203,13 @@ class MainController : Initializable {
                     )
                 }
             },
+            Button("启动画面").apply {
+                styleClass.add("test-button")
+                onAction {
+                    AppView(SplashScreenController::class).show()
+                    (container.scene.window as Stage).close()
+                }
+            },
             ComboBox(FXCollections.observableArrayList(Theme.entries)).apply {
                 valueProperty().bindBidirectional(AppResource.themeProperty())
                 cellFactory = Callback<ListView<Theme>, ListCell<Theme>> {

demo/src/main/kotlin/com/icuxika/bittersweet/demo/controller/SplashScreenController.kt

@@ -0,0 +1,77 @@
+package com.icuxika.bittersweet.demo.controller
+
+import com.icuxika.bittersweet.demo.annotation.AppFXML
+import javafx.animation.PathTransition
+import javafx.animation.PauseTransition
+import javafx.fxml.FXML
+import javafx.fxml.Initializable
+import javafx.scene.layout.BorderPane
+import javafx.scene.layout.Pane
+import javafx.scene.layout.StackPane
+import javafx.scene.paint.Color
+import javafx.scene.shape.*
+import javafx.util.Duration
+import java.net.URL
+import java.util.*
+
+@AppFXML(fxml = "fxml/splash-screen.fxml")
+class SplashScreenController : Initializable {
+
+    @FXML
+    private lateinit var rootContainer: StackPane
+
+    @FXML
+    private lateinit var container: BorderPane
+
+    private val circle = Circle(8.0, Color.DODGERBLUE)
+    private val path = Path().apply {
+        stroke = Color.BLACK
+        strokeLineCap = StrokeLineCap.ROUND
+        strokeDashArray.addAll(4.0, 4.0)
+        strokeWidth = 2.0
+        fill = null
+    }
+
+    override fun initialize(location: URL?, resources: ResourceBundle?) {
+        val pane = Pane()
+        container.center = pane.apply {
+            children.addAll(circle, path)
+        }
+
+        val pathTransition = PathTransition().apply {
+            node = circle
+            duration = Duration.seconds(3.0)
+            cycleCount = PathTransition.INDEFINITE
+            isAutoReverse = false
+            orientation = PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT
+        }
+
+        val pauseTransition = PauseTransition()
+        pauseTransition.setOnFinished {
+            pathTransition.path = path
+            pathTransition.play()
+        }
+
+        pane.layoutBoundsProperty().addListener { _, _, newValue ->
+            if (newValue.width > 0 && newValue.height > 0) {
+                pathTransition.stop()
+                path.elements.clear()
+                path.elements.addAll(
+                    MoveTo(newValue.width / 2, newValue.height / 2),
+                    CubicCurveTo(
+                        0.0, 0.0,
+                        0.0, newValue.height,
+                        newValue.width / 2, newValue.height / 2
+                    ),
+                    CubicCurveTo(
+                        newValue.width, 0.0,
+                        newValue.width, newValue.height,
+                        newValue.width / 2, newValue.height / 2
+                    ),
+                )
+                pauseTransition.playFromStart()
+            }
+        }
+    }
+
+}

demo/src/main/resources/com/icuxika/bittersweet/demo/fxml/splash-screen.fxml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.scene.layout.BorderPane?>
+<?import javafx.scene.layout.StackPane?>
+<StackPane fx:id="rootContainer" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity"
+           prefHeight="800.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1"
+           fx:controller="com.icuxika.bittersweet.demo.controller.SplashScreenController">
+    <children>
+        <BorderPane fx:id="container"/>
+    </children>
+</StackPane>