From 44dd5800f80ec3c343c0b13cdf5c24359dedbea4 Mon Sep 17 00:00:00 2001
From: mine_ <mine_yaoym@outlook.com>
Date: Mon, 27 Oct 2025 16:00:19 +0800
Subject: [PATCH 01/12] =?UTF-8?q?feat:=20=E4=B8=BAtwoLineListItem=E5=8A=A0?=
 =?UTF-8?q?=E5=85=A5=E6=88=AA=E6=96=AD=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../org/jackhuang/hmcl/ui/construct/TwoLineListItem.java    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
index 0405202e3f..72bf52788a 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
@@ -26,6 +26,7 @@
 import javafx.scene.Node;
 import javafx.scene.control.Label;
 import javafx.scene.layout.HBox;
+import javafx.scene.layout.Region;
 import javafx.scene.layout.VBox;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.util.AggregatedObservableList;
@@ -34,7 +35,7 @@ public class TwoLineListItem extends VBox {
     private static final String DEFAULT_STYLE_CLASS = "two-line-list-item";
 
     private static Label createTagLabel(String tag) {
-        Label tagLabel = new Label();
+        Label tagLabel = FXUtils.newSafeTruncatedLabel(tag);
         tagLabel.setText(tag);
         HBox.setMargin(tagLabel, new Insets(0, 8, 0, 0));
         return tagLabel;
@@ -54,7 +55,6 @@ public TwoLineListItem(String titleString, String subtitleString) {
     }
 
     public TwoLineListItem() {
-        setMouseTransparent(true);
 
         HBox firstLine = new HBox();
         firstLine.getStyleClass().add("first-line");
@@ -62,6 +62,7 @@ public TwoLineListItem() {
         Label lblTitle = new Label();
         lblTitle.getStyleClass().add("title");
         lblTitle.textProperty().bind(title);
+        FXUtils.showTooltipWhenTruncated(lblTitle);
 
         firstLineChildren = new AggregatedObservableList<>();
         firstLineChildren.appendList(FXCollections.singletonObservableList(lblTitle));
@@ -71,6 +72,7 @@ public TwoLineListItem() {
         Label lblSubtitle = new Label();
         lblSubtitle.getStyleClass().add("subtitle");
         lblSubtitle.textProperty().bind(subtitle);
+        FXUtils.showTooltipWhenTruncated(lblSubtitle);
 
         HBox secondLine = new HBox();
         secondLine.getChildren().setAll(lblSubtitle);

From 853f28eaf2b7c94345df841bec8714b6f98b195c Mon Sep 17 00:00:00 2001
From: mine_ <mine_yaoym@outlook.com>
Date: Mon, 3 Nov 2025 21:21:42 +0800
Subject: [PATCH 02/12] =?UTF-8?q?feat:=20=E6=9B=B4=E6=94=B9twoLineListItem?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/construct/IconedTwoLineListItem.java   |  1 +
 .../hmcl/ui/construct/TwoLineListItem.java    | 65 +++++++++++++++----
 .../hmcl/ui/download/VersionsPage.java        |  2 +-
 .../hmcl/ui/versions/DownloadListPage.java    |  3 +-
 .../hmcl/ui/versions/DownloadPage.java        |  1 +
 .../hmcl/ui/versions/GameItemSkin.java        |  2 +-
 .../hmcl/ui/versions/ModListPageSkin.java     |  2 +-
 HMCL/src/main/resources/assets/css/root.css   | 10 ++-
 .../resources/assets/lang/I18N.properties     |  2 +
 .../resources/assets/lang/I18N_zh.properties  |  2 +
 .../assets/lang/I18N_zh_CN.properties         |  2 +
 11 files changed, 74 insertions(+), 18 deletions(-)

diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/IconedTwoLineListItem.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/IconedTwoLineListItem.java
index 3687dfea7a..9b77925e77 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/IconedTwoLineListItem.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/IconedTwoLineListItem.java
@@ -18,6 +18,7 @@
 import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
+import org.jackhuang.hmcl.util.Pair;
 import org.jackhuang.hmcl.util.StringUtils;
 
 public class IconedTwoLineListItem extends HBox {
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
index 72bf52788a..fffe57e7ad 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
@@ -17,7 +17,10 @@
  */
 package org.jackhuang.hmcl.ui.construct;
 
+import javafx.beans.InvalidationListener;
 import javafx.beans.binding.Bindings;
+import javafx.beans.property.IntegerProperty;
+import javafx.beans.property.SimpleIntegerProperty;
 import javafx.beans.property.SimpleStringProperty;
 import javafx.beans.property.StringProperty;
 import javafx.collections.FXCollections;
@@ -26,27 +29,37 @@
 import javafx.scene.Node;
 import javafx.scene.control.Label;
 import javafx.scene.layout.HBox;
-import javafx.scene.layout.Region;
 import javafx.scene.layout.VBox;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.util.AggregatedObservableList;
 
+import java.util.stream.Collectors;
+
+import static org.jackhuang.hmcl.util.i18n.I18n.i18n;
+
 public class TwoLineListItem extends VBox {
     private static final String DEFAULT_STYLE_CLASS = "two-line-list-item";
+    private static final int UNLIMITED_TAGS = -1;
 
-    private static Label createTagLabel(String tag) {
+    private static Label createTagLabel(String tag, String StyleClass) {
         Label tagLabel = FXUtils.newSafeTruncatedLabel(tag);
-        tagLabel.setText(tag);
-        HBox.setMargin(tagLabel, new Insets(0, 8, 0, 0));
+        HBox.setMargin(tagLabel, new Insets(0, 6, 0, 0));
+        tagLabel.getStyleClass().add(StyleClass);
         return tagLabel;
     }
 
     private final StringProperty title = new SimpleStringProperty(this, "title");
-    private final ObservableList<Label> tags = FXCollections.observableArrayList();
+    private final ObservableList<Label> allTags = FXCollections.observableArrayList();
+    private final ObservableList<Label> shownTags = FXCollections.observableArrayList();
     private final StringProperty subtitle = new SimpleStringProperty(this, "subtitle");
 
+    private IntegerProperty maxShownTags = new SimpleIntegerProperty(UNLIMITED_TAGS);
+    private boolean updateScheduled = false;
+
     private final AggregatedObservableList<Node> firstLineChildren;
 
+    private final Label overflowLabel = createTagLabel("", "tag-overflow");
+
     public TwoLineListItem(String titleString, String subtitleString) {
         this();
 
@@ -66,7 +79,10 @@ public TwoLineListItem() {
 
         firstLineChildren = new AggregatedObservableList<>();
         firstLineChildren.appendList(FXCollections.singletonObservableList(lblTitle));
-        firstLineChildren.appendList(tags);
+        firstLineChildren.appendList(shownTags);
+        allTags.addListener((InvalidationListener) observable -> updateShownTags());
+        maxShownTags.addListener(observable -> updateShownTags());
+
         Bindings.bindContent(firstLine.getChildren(), firstLineChildren.getAggregatedList());
 
         Label lblSubtitle = new Label();
@@ -87,6 +103,19 @@ public TwoLineListItem() {
         getStyleClass().add(DEFAULT_STYLE_CLASS);
     }
 
+    private void updateShownTags() {
+        shownTags.clear();
+        if (maxShownTags.get() == UNLIMITED_TAGS || allTags.size() <= maxShownTags.get()) {
+            shownTags.addAll(allTags);
+        } else {
+            shownTags.addAll(allTags.subList(0, maxShownTags.get()));
+            FXUtils.installFastTooltip(overflowLabel, allTags.stream().skip(maxShownTags.get())
+                    .map(Label::getText).collect(Collectors.joining("\n")));
+            overflowLabel.setText(i18n("tag.overflow", (allTags.size() - maxShownTags.get())));
+            shownTags.add(overflowLabel);
+        }
+    }
+
     public String getTitle() {
         return title.get();
     }
@@ -112,19 +141,29 @@ public void setSubtitle(String subtitle) {
     }
 
     public void addTag(String tag) {
-        Label tagLabel = createTagLabel(tag);
-        tagLabel.getStyleClass().add("tag");
-        getTags().add(tagLabel);
+        getTags().add(createTagLabel(tag, "tag"));
     }
 
     public void addTagWarning(String tag) {
-        Label tagLabel = createTagLabel(tag);
-        tagLabel.getStyleClass().add("tag-warning");
-        getTags().add(tagLabel);
+        getTags().add(createTagLabel(tag, "tag-warning"));
     }
 
     public ObservableList<Label> getTags() {
-        return tags;
+        return allTags;
+    }
+
+    public void setMaxShownTags(int maxShownTags) {
+        if (maxShownTags >= 0) {
+            this.maxShownTags.set(maxShownTags);
+        }
+    }
+
+    public IntegerProperty getMaxShownTags() {
+        return maxShownTags;
+    }
+
+    public void clearTags() {
+        allTags.clear();
     }
 
     @Override
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/download/VersionsPage.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/download/VersionsPage.java
index b10b4d251b..1b370b065a 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/download/VersionsPage.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/download/VersionsPage.java
@@ -239,7 +239,7 @@ public void updateItem(RemoteVersion remoteVersion, boolean empty) {
             } else {
                 twoLineListItem.setSubtitle(null);
             }
-            twoLineListItem.getTags().clear();
+            twoLineListItem.clearTags();
 
             if (remoteVersion instanceof GameRemoteVersion) {
                 RemoteVersion.Type versionType = remoteVersion.getVersionType();
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/DownloadListPage.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/DownloadListPage.java
index 4a679ed301..ac2bbd790c 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/DownloadListPage.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/DownloadListPage.java
@@ -545,7 +545,8 @@ protected void updateControl(RemoteMod dataItem, boolean empty) {
                         ModTranslations.Mod mod = ModTranslations.getTranslationsByRepositoryType(getSkinnable().repository.getType()).getModByCurseForgeId(dataItem.getSlug());
                         content.setTitle(mod != null && I18n.isUseChinese() ? mod.getDisplayName() : dataItem.getTitle());
                         content.setSubtitle(dataItem.getDescription());
-                        content.getTags().clear();
+                        content.setMaxShownTags(4);
+                        content.clearTags();
                         dataItem.getCategories().stream()
                                 .map(category -> getSkinnable().getLocalizedCategory(category))
                                 .forEach(content::addTag);
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/DownloadPage.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/DownloadPage.java
index c62da41ee1..645686a5d2 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/DownloadPage.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/DownloadPage.java
@@ -231,6 +231,7 @@ protected ModDownloadPageSkin(DownloadPage control) {
                 ModTranslations.Mod mod = getSkinnable().translations.getModByCurseForgeId(getSkinnable().addon.getSlug());
                 content.setTitle(mod != null && I18n.isUseChinese() ? mod.getDisplayName() : getSkinnable().addon.getTitle());
                 content.setSubtitle(getSkinnable().addon.getDescription());
+                content.setMaxShownTags(4);
                 getSkinnable().addon.getCategories().stream()
                         .map(category -> getSkinnable().page.getLocalizedCategory(category))
                         .forEach(content::addTag);
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/GameItemSkin.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/GameItemSkin.java
index b7b79f6213..c62bb3fd8b 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/GameItemSkin.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/GameItemSkin.java
@@ -47,7 +47,7 @@ public GameItemSkin(GameItem skinnable) {
         TwoLineListItem item = new TwoLineListItem();
         item.titleProperty().bind(skinnable.titleProperty());
         FXUtils.onChangeAndOperate(skinnable.tagProperty(), tag -> {
-            item.getTags().clear();
+            item.clearTags();
             if (StringUtils.isNotBlank(tag))
                 item.addTag(tag);
         });
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/ModListPageSkin.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/ModListPageSkin.java
index 8d1a3d34fb..06f8504e97 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/ModListPageSkin.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/ModListPageSkin.java
@@ -618,7 +618,7 @@ protected void updateControl(ModInfoObject dataItem, boolean empty) {
 
             List<String> warning = new ArrayList<>();
 
-            content.getTags().clear();
+            content.clearTags();
 
             LocalModFile modInfo = dataItem.getModInfo();
             ModTranslations.Mod modTranslations = dataItem.getModTranslations();
diff --git a/HMCL/src/main/resources/assets/css/root.css b/HMCL/src/main/resources/assets/css/root.css
index 8352572acc..be9c9a4b76 100644
--- a/HMCL/src/main/resources/assets/css/root.css
+++ b/HMCL/src/main/resources/assets/css/root.css
@@ -294,13 +294,21 @@
 }
 
 .two-line-list-item > .first-line > .tag-warning {
-    -fx-text-fill: #d34336;;
+    -fx-text-fill: #d34336;
     -fx-background-color: #f1aeb5;
     -fx-padding: 2;
     -fx-font-weight: normal;
     -fx-font-size: 12px;
 }
 
+.two-line-list-item > .first-line > .tag-overflow {
+    -fx-text-fill: -fx-base-color;
+    -fx-background-color: rgba(202, 227, 244, 0.3);
+    -fx-padding: 2;
+    -fx-font-weight: normal;
+    -fx-font-size: 12px;
+}
+
 .two-line-item-second-large {
 
 }
diff --git a/HMCL/src/main/resources/assets/lang/I18N.properties b/HMCL/src/main/resources/assets/lang/I18N.properties
index cfcad01c2c..5c2d20f33d 100644
--- a/HMCL/src/main/resources/assets/lang/I18N.properties
+++ b/HMCL/src/main/resources/assets/lang/I18N.properties
@@ -1109,6 +1109,8 @@ datapack.choose_datapack=Choose datapack to import
 datapack.extension=Datapack
 datapack.title=World [%s] - Datapacks
 
+tag.overflow=+%d more
+
 web.failed=Failed to load page
 web.open_in_browser=Do you want to open this address in a browser:\n%s
 web.view_in_browser=View all in browser
diff --git a/HMCL/src/main/resources/assets/lang/I18N_zh.properties b/HMCL/src/main/resources/assets/lang/I18N_zh.properties
index 64414ae54f..f08a1568e4 100644
--- a/HMCL/src/main/resources/assets/lang/I18N_zh.properties
+++ b/HMCL/src/main/resources/assets/lang/I18N_zh.properties
@@ -906,6 +906,8 @@ datapack.choose_datapack=選取要匯入的資料包壓縮檔
 datapack.extension=資料包
 datapack.title=世界 [%s] - 資料包
 
+tag.overflow=+%d 更多
+
 web.failed=載入頁面失敗
 web.open_in_browser=是否要在瀏覽器中開啟此連結：\n%s
 web.view_in_browser=在瀏覽器中查看完整日誌
diff --git a/HMCL/src/main/resources/assets/lang/I18N_zh_CN.properties b/HMCL/src/main/resources/assets/lang/I18N_zh_CN.properties
index efdf78959d..c7743f4473 100644
--- a/HMCL/src/main/resources/assets/lang/I18N_zh_CN.properties
+++ b/HMCL/src/main/resources/assets/lang/I18N_zh_CN.properties
@@ -916,6 +916,8 @@ datapack.choose_datapack=选择要导入的数据包压缩包
 datapack.extension=数据包
 datapack.title=世界 [%s] - 数据包
 
+tag.overflow=+%d 更多
+
 web.failed=加载页面失败
 web.open_in_browser=是否要在浏览器中打开此链接：\n%s
 web.view_in_browser=在浏览器中查看完整日志

From 336923c773ff322a3eeb6d210520af66d6a29f46 Mon Sep 17 00:00:00 2001
From: mine_ <mine_yaoym@outlook.com>
Date: Mon, 3 Nov 2025 21:36:06 +0800
Subject: [PATCH 03/12] fix style

---
 .../org/jackhuang/hmcl/ui/construct/IconedTwoLineListItem.java   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/IconedTwoLineListItem.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/IconedTwoLineListItem.java
index 9b77925e77..3687dfea7a 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/IconedTwoLineListItem.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/IconedTwoLineListItem.java
@@ -18,7 +18,6 @@
 import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
-import org.jackhuang.hmcl.util.Pair;
 import org.jackhuang.hmcl.util.StringUtils;
 
 public class IconedTwoLineListItem extends HBox {

From 6f1f117fc98df43b764bef01b5b24beead529787 Mon Sep 17 00:00:00 2001
From: Glavo <zjx001202@gmail.com>
Date: Fri, 14 Nov 2025 16:06:26 +0800
Subject: [PATCH 04/12] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=AF=B9=2026w45a=5Fun?=
 =?UTF-8?q?obfuscated=20=E7=9A=84=E6=94=AF=E6=8C=81=20(#4782)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/assets/game/unlisted-versions.json    | 13 ++++++++++---
 .../src/main/resources/assets/game/versions.txt     |  4 +++-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/HMCLCore/src/main/resources/assets/game/unlisted-versions.json b/HMCLCore/src/main/resources/assets/game/unlisted-versions.json
index af06e5d2c9..2086ead2c3 100644
--- a/HMCLCore/src/main/resources/assets/game/unlisted-versions.json
+++ b/HMCLCore/src/main/resources/assets/game/unlisted-versions.json
@@ -1,11 +1,18 @@
 {
   "versions": [
+    {
+      "id": "25w46a_unobfuscated",
+      "type": "unobfuscated",
+      "url": "https://piston-meta.mojang.com/v1/packages/314ade2afeada364047798e163ef8e82427c69e1/25w46a_unobfuscated.json",
+      "time": "2025-11-11T13:20:54+00:00",
+      "releaseTime": "2025-11-11T13:20:54+00:00"
+    },
     {
       "id": "25w45a_unobfuscated",
-      "type" : "unobfuscated",
+      "type": "unobfuscated",
       "url": "https://piston-meta.mojang.com/v1/packages/7a3c149f148b6aa5ac3af48c4f701adea7e5b615/25w45a_unobfuscated.json",
-      "time" : "2025-11-04T14:07:08+00:00",
-      "releaseTime" : "2025-11-04T14:07:08+00:00"
+      "time": "2025-11-04T14:07:08+00:00",
+      "releaseTime": "2025-11-04T14:07:08+00:00"
     },
     {
       "id": "1.19_deep_dark_experimental_snapshot-1",
diff --git a/HMCLCore/src/main/resources/assets/game/versions.txt b/HMCLCore/src/main/resources/assets/game/versions.txt
index 646c3c923f..6f1e2d319a 100644
--- a/HMCLCore/src/main/resources/assets/game/versions.txt
+++ b/HMCLCore/src/main/resources/assets/game/versions.txt
@@ -854,4 +854,6 @@
 25w43a
 25w44a
 25w45a
-25w45a_unobfuscated
\ No newline at end of file
+25w45a_unobfuscated
+25w46a
+25w46a_unobfuscated
\ No newline at end of file

From cae8f65729b8bdd5aa316938cd7ae00dea050d0b Mon Sep 17 00:00:00 2001
From: Glavo <zjx001202@gmail.com>
Date: Fri, 14 Nov 2025 16:17:14 +0800
Subject: [PATCH 05/12] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C=20(#4780)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/com/jfoenix/controls/JFXDialog.java  | 562 +++++++++++++
 .../org/jackhuang/hmcl/ui/Controllers.java    |  17 +-
 .../java/org/jackhuang/hmcl/ui/FXUtils.java   |  30 +-
 .../hmcl/ui/animation/AnimationHandler.java   |  32 -
 .../hmcl/ui/animation/AnimationProducer.java  |  31 -
 .../ui/animation/ContainerAnimations.java     | 355 +++-----
 .../jackhuang/hmcl/ui/animation/Motion.java   | 781 ++++++++++++++++++
 .../hmcl/ui/animation/TransitionPane.java     | 103 ++-
 .../hmcl/ui/construct/Navigator.java          |  34 +-
 .../hmcl/ui/construct/RipplerContainer.java   |   6 +-
 .../hmcl/ui/construct/TabHeader.java          |  35 +-
 .../hmcl/ui/decorator/Decorator.java          |  49 +-
 .../decorator/DecoratorAnimationProducer.java |  90 --
 .../ui/decorator/DecoratorController.java     |  75 +-
 .../ui/decorator/DecoratorNavigatorPage.java  |  57 --
 .../hmcl/ui/decorator/DecoratorSkin.java      |  96 ++-
 .../hmcl/ui/decorator/DecoratorTabPage.java   |  73 --
 .../ui/decorator/DecoratorTransitionPage.java |   7 +-
 .../decorator/DecoratorWizardDisplayer.java   |   3 +-
 .../ui/download/AbstractInstallersPage.java   |  12 +-
 .../hmcl/ui/download/DownloadPage.java        |   5 +-
 .../hmcl/ui/main/LauncherSettingsPage.java    |   6 +-
 .../terracotta/TerracottaControllerPage.java  |   4 +-
 .../hmcl/ui/terracotta/TerracottaPage.java    |   7 +-
 .../hmcl/ui/versions/VersionPage.java         |   6 +-
 .../hmcl/ui/versions/WorldManagePage.java     |   6 +-
 .../jackhuang/hmcl/ui/wizard/Navigation.java  |   8 +-
 .../hmcl/ui/wizard/WizardController.java      |  12 +-
 28 files changed, 1797 insertions(+), 705 deletions(-)
 create mode 100644 HMCL/src/main/java/com/jfoenix/controls/JFXDialog.java
 delete mode 100644 HMCL/src/main/java/org/jackhuang/hmcl/ui/animation/AnimationHandler.java
 delete mode 100644 HMCL/src/main/java/org/jackhuang/hmcl/ui/animation/AnimationProducer.java
 create mode 100644 HMCL/src/main/java/org/jackhuang/hmcl/ui/animation/Motion.java
 delete mode 100644 HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorAnimationProducer.java
 delete mode 100644 HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorNavigatorPage.java
 delete mode 100644 HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorTabPage.java

diff --git a/HMCL/src/main/java/com/jfoenix/controls/JFXDialog.java b/HMCL/src/main/java/com/jfoenix/controls/JFXDialog.java
new file mode 100644
index 0000000000..151cefe61b
--- /dev/null
+++ b/HMCL/src/main/java/com/jfoenix/controls/JFXDialog.java
@@ -0,0 +1,562 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package com.jfoenix.controls;
+
+import com.jfoenix.controls.events.JFXDialogEvent;
+import com.jfoenix.converters.DialogTransitionConverter;
+import com.jfoenix.effects.JFXDepthManager;
+import com.jfoenix.transitions.CachedTransition;
+import javafx.animation.*;
+import javafx.beans.DefaultProperty;
+import javafx.beans.property.BooleanProperty;
+import javafx.beans.property.ObjectProperty;
+import javafx.beans.property.ObjectPropertyBase;
+import javafx.beans.property.SimpleBooleanProperty;
+import javafx.css.*;
+import javafx.event.Event;
+import javafx.event.EventHandler;
+import javafx.geometry.Pos;
+import javafx.scene.CacheHint;
+import javafx.scene.Node;
+import javafx.scene.SnapshotParameters;
+import javafx.scene.image.ImageView;
+import javafx.scene.image.WritableImage;
+import javafx.scene.input.MouseEvent;
+import javafx.scene.layout.*;
+import javafx.scene.paint.Color;
+import javafx.util.Duration;
+import org.jackhuang.hmcl.ui.animation.Motion;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+/// Note: for JFXDialog to work properly, the root node **MUST**
+/// be of type [StackPane]
+///
+/// @author Shadi Shaheen
+/// @version 1.0
+/// @since 2016-03-09
+@DefaultProperty(value = "content")
+public class JFXDialog extends StackPane {
+
+    private static final double INITIAL_SCALE = 0.8;
+
+    // public static enum JFXDialogLayout{PLAIN, HEADING, ACTIONS, BACKDROP};
+    public enum DialogTransition {
+        CENTER, NONE
+    }
+
+    private StackPane contentHolder;
+
+    private double offsetX = 0;
+    private double offsetY = 0;
+
+    private StackPane dialogContainer;
+    private Region content;
+    private Transition showAnimation;
+    private Transition hideAnimation;
+
+    private final EventHandler<? super MouseEvent> closeHandler = e -> close();
+
+    /// creates empty JFXDialog control with CENTER animation type
+    public JFXDialog() {
+        this(null, null, DialogTransition.CENTER);
+    }
+
+    /// creates empty JFXDialog control with a specified animation type
+    public JFXDialog(DialogTransition transition) {
+        this(null, null, transition);
+    }
+
+    /// creates JFXDialog control with a specified animation type, the animation type
+    /// can be one of the following:
+    ///
+    ///   - CENTER
+    ///   - TOP
+    ///   - RIGHT
+    ///   - BOTTOM
+    ///   - LEFT
+    ///
+    /// @param dialogContainer is the parent of the dialog, it
+    /// @param content         the content of dialog
+    /// @param transitionType  the animation type
+    public JFXDialog(StackPane dialogContainer, Region content, DialogTransition transitionType) {
+        initialize();
+        setContent(content);
+        setDialogContainer(dialogContainer);
+        this.transitionType.set(transitionType);
+        // init change listeners
+        initChangeListeners();
+    }
+
+    /// creates JFXDialog control with a specified animation type that
+    /// is closed when clicking on the overlay, the animation type
+    /// can be one of the following:
+    ///
+    ///   - CENTER
+    ///   - TOP
+    ///   - RIGHT
+    ///   - BOTTOM
+    ///   - LEFT
+    ///
+    public JFXDialog(StackPane dialogContainer, Region content, DialogTransition transitionType, boolean overlayClose) {
+        setOverlayClose(overlayClose);
+        initialize();
+        setContent(content);
+        setDialogContainer(dialogContainer);
+        this.transitionType.set(transitionType);
+        // init change listeners
+        initChangeListeners();
+    }
+
+    private void initChangeListeners() {
+        overlayCloseProperty().addListener((o, oldVal, newVal) -> {
+            if (newVal) {
+                this.addEventHandler(MouseEvent.MOUSE_PRESSED, closeHandler);
+            } else {
+                this.removeEventHandler(MouseEvent.MOUSE_PRESSED, closeHandler);
+            }
+        });
+    }
+
+    private void initialize() {
+        this.setVisible(false);
+        this.getStyleClass().add(DEFAULT_STYLE_CLASS);
+        this.transitionType.addListener((o, oldVal, newVal) -> {
+            showAnimation = getShowAnimation(transitionType.get());
+            hideAnimation = getHideAnimation(transitionType.get());
+        });
+
+        contentHolder = new StackPane();
+        contentHolder.setBackground(new Background(new BackgroundFill(Color.WHITE, new CornerRadii(2), null)));
+        JFXDepthManager.setDepth(contentHolder, 4);
+        contentHolder.setPickOnBounds(false);
+        // ensure stackpane is never resized beyond it's preferred size
+        contentHolder.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
+        this.getChildren().add(contentHolder);
+        this.getStyleClass().add("jfx-dialog-overlay-pane");
+        StackPane.setAlignment(contentHolder, Pos.CENTER);
+        this.setBackground(new Background(new BackgroundFill(Color.rgb(0, 0, 0, 0.1), null, null)));
+        // close the dialog if clicked on the overlay pane
+        if (overlayClose.get()) {
+            this.addEventHandler(MouseEvent.MOUSE_PRESSED, closeHandler);
+        }
+        // prevent propagating the events to overlay pane
+        contentHolder.addEventHandler(MouseEvent.ANY, Event::consume);
+    }
+
+    /***************************************************************************
+     *                                                                         *
+     * Setters / Getters                                                       *
+     *                                                                         *
+     **************************************************************************/
+
+    /// @return the dialog container
+    public StackPane getDialogContainer() {
+        return dialogContainer;
+    }
+
+    /// set the dialog container
+    /// Note: the dialog container must be StackPane, its the container for the dialog to be shown in.
+    public void setDialogContainer(StackPane dialogContainer) {
+        if (dialogContainer != null) {
+            this.dialogContainer = dialogContainer;
+            // FIXME: need to be improved to consider only the parent boundary
+            offsetX = dialogContainer.getBoundsInLocal().getWidth();
+            offsetY = dialogContainer.getBoundsInLocal().getHeight();
+            showAnimation = getShowAnimation(transitionType.get());
+            hideAnimation = getHideAnimation(transitionType.get());
+        }
+    }
+
+    /// @return dialog content node
+    public Region getContent() {
+        return content;
+    }
+
+    /// set the content of the dialog
+    public void setContent(Region content) {
+        if (content != null) {
+            this.content = content;
+            this.content.setPickOnBounds(false);
+            contentHolder.getChildren().setAll(content);
+        }
+    }
+
+    /// indicates whether the dialog will close when clicking on the overlay or not
+    private final BooleanProperty overlayClose = new SimpleBooleanProperty(true);
+
+    public final BooleanProperty overlayCloseProperty() {
+        return this.overlayClose;
+    }
+
+    public final boolean isOverlayClose() {
+        return this.overlayCloseProperty().get();
+    }
+
+    public final void setOverlayClose(final boolean overlayClose) {
+        this.overlayCloseProperty().set(overlayClose);
+    }
+
+    /// if sets to true, the content of dialog container will be cached and replaced with an image
+    /// when displaying the dialog (better performance).
+    /// this is recommended if the content behind the dialog will not change during the showing
+    /// period
+    private final BooleanProperty cacheContainer = new SimpleBooleanProperty(false);
+
+    public boolean isCacheContainer() {
+        return cacheContainer.get();
+    }
+
+    public BooleanProperty cacheContainerProperty() {
+        return cacheContainer;
+    }
+
+    public void setCacheContainer(boolean cacheContainer) {
+        this.cacheContainer.set(cacheContainer);
+    }
+
+    /// it will show the dialog in the specified container
+    public void show(StackPane dialogContainer) {
+        this.setDialogContainer(dialogContainer);
+        showDialog();
+    }
+
+    private ArrayList<Node> tempContent;
+
+    /**
+     * show the dialog inside its parent container
+     */
+    public void show() {
+        this.setDialogContainer(dialogContainer);
+        showDialog();
+    }
+
+    private void showDialog() {
+        if (dialogContainer == null) {
+            throw new RuntimeException("ERROR: JFXDialog container is not set!");
+        }
+        if (isCacheContainer()) {
+            tempContent = new ArrayList<>(dialogContainer.getChildren());
+
+            SnapshotParameters snapShotparams = new SnapshotParameters();
+            snapShotparams.setFill(Color.TRANSPARENT);
+            WritableImage temp = dialogContainer.snapshot(snapShotparams,
+                    new WritableImage((int) dialogContainer.getWidth(),
+                            (int) dialogContainer.getHeight()));
+            ImageView tempImage = new ImageView(temp);
+            tempImage.setCache(true);
+            tempImage.setCacheHint(CacheHint.SPEED);
+            dialogContainer.getChildren().setAll(tempImage, this);
+        } else {
+            //prevent error if opening an already opened dialog
+            dialogContainer.getChildren().remove(this);
+            tempContent = null;
+            dialogContainer.getChildren().add(this);
+        }
+
+        if (showAnimation != null) {
+            showAnimation.play();
+        } else {
+            setVisible(true);
+            setOpacity(1);
+            Event.fireEvent(JFXDialog.this, new JFXDialogEvent(JFXDialogEvent.OPENED));
+        }
+    }
+
+    /**
+     * close the dialog
+     */
+    public void close() {
+        if (hideAnimation != null) {
+            hideAnimation.play();
+        } else {
+            setOpacity(0);
+            setVisible(false);
+            closeDialog();
+        }
+    }
+
+    private void closeDialog() {
+        resetProperties();
+        Event.fireEvent(JFXDialog.this, new JFXDialogEvent(JFXDialogEvent.CLOSED));
+        if (tempContent == null) {
+            dialogContainer.getChildren().remove(this);
+        } else {
+            dialogContainer.getChildren().setAll(tempContent);
+        }
+    }
+
+    /***************************************************************************
+     *                                                                         *
+     * Transitions                                                             *
+     *                                                                         *
+     **************************************************************************/
+
+    private Transition getShowAnimation(DialogTransition transitionType) {
+        Transition animation = null;
+        if (contentHolder != null) {
+            animation = switch (transitionType) {
+                case CENTER -> {
+                    contentHolder.setScaleX(INITIAL_SCALE);
+                    contentHolder.setScaleY(INITIAL_SCALE);
+                    yield new CenterTransition();
+                }
+                case NONE -> {
+                    contentHolder.setScaleX(1);
+                    contentHolder.setScaleY(1);
+                    contentHolder.setTranslateX(0);
+                    contentHolder.setTranslateY(0);
+                    yield null;
+                }
+            };
+        }
+        if (animation != null) {
+            animation.setOnFinished(finish ->
+                    Event.fireEvent(JFXDialog.this, new JFXDialogEvent(JFXDialogEvent.OPENED)));
+        }
+        return animation;
+    }
+
+    private Transition getHideAnimation(DialogTransition transitionType) {
+        Transition animation = null;
+        if (contentHolder != null) {
+            animation = switch (transitionType) {
+                case CENTER -> new HideTransition();
+                case NONE -> null;
+            };
+        }
+        if (animation != null) {
+            animation.setOnFinished(finish -> closeDialog());
+        }
+        return animation;
+    }
+
+    private void resetProperties() {
+        this.setVisible(false);
+        contentHolder.setTranslateX(0);
+        contentHolder.setTranslateY(0);
+        contentHolder.setScaleX(1);
+        contentHolder.setScaleY(1);
+    }
+
+    private final class HideTransition extends CachedTransition {
+        private static final Interpolator INTERPOLATOR = Motion.EMPHASIZED_ACCELERATE;
+
+        public HideTransition() {
+            super(contentHolder, new Timeline(
+                    new KeyFrame(Duration.ZERO,
+                            new KeyValue(contentHolder.scaleXProperty(), 1, INTERPOLATOR),
+                            new KeyValue(contentHolder.scaleYProperty(), 1, INTERPOLATOR),
+                            new KeyValue(JFXDialog.this.opacityProperty(), 1, INTERPOLATOR),
+                            new KeyValue(JFXDialog.this.visibleProperty(), true, Motion.LINEAR)
+                    ),
+                    new KeyFrame(Motion.LONG2.subtract(Duration.millis(10)),
+                            new KeyValue(JFXDialog.this.visibleProperty(), false, Motion.LINEAR),
+                            new KeyValue(JFXDialog.this.opacityProperty(), 0, INTERPOLATOR)
+                    ),
+                    new KeyFrame(Motion.LONG2,
+                            new KeyValue(contentHolder.scaleXProperty(), INITIAL_SCALE, INTERPOLATOR),
+                            new KeyValue(contentHolder.scaleYProperty(), INITIAL_SCALE, INTERPOLATOR)
+                    ))
+            );
+            // reduce the number to increase the shifting , increase number to reduce shifting
+            setCycleDuration(Duration.seconds(0.4));
+            setDelay(Duration.ZERO);
+        }
+    }
+
+    private final class CenterTransition extends CachedTransition {
+        private static final Interpolator INTERPOLATOR = Motion.EMPHASIZED_DECELERATE;
+
+        CenterTransition() {
+            super(contentHolder, new Timeline(
+                    new KeyFrame(Duration.ZERO,
+                            new KeyValue(contentHolder.scaleXProperty(), INITIAL_SCALE, INTERPOLATOR),
+                            new KeyValue(contentHolder.scaleYProperty(), INITIAL_SCALE, INTERPOLATOR),
+                            new KeyValue(JFXDialog.this.visibleProperty(), false, Motion.LINEAR)
+                    ),
+                    new KeyFrame(Duration.millis(10),
+                            new KeyValue(JFXDialog.this.visibleProperty(), true, Motion.LINEAR),
+                            new KeyValue(JFXDialog.this.opacityProperty(), 0, INTERPOLATOR)
+                    ),
+                    new KeyFrame(Motion.EXTRA_LONG4,
+                            new KeyValue(contentHolder.scaleXProperty(), 1, INTERPOLATOR),
+                            new KeyValue(contentHolder.scaleYProperty(), 1, INTERPOLATOR),
+                            new KeyValue(JFXDialog.this.opacityProperty(), 1, INTERPOLATOR)
+                    ))
+            );
+            // reduce the number to increase the shifting , increase number to reduce shifting
+            setCycleDuration(Duration.seconds(0.4));
+            setDelay(Duration.ZERO);
+        }
+    }
+
+    /***************************************************************************
+     *                                                                         *
+     * Stylesheet Handling                                                     *
+     *                                                                         *
+     **************************************************************************/
+
+    /// Initialize the style class to 'jfx-dialog'.
+    ///
+    /// This is the selector class from which CSS can be used to style
+    /// this control.
+    private static final String DEFAULT_STYLE_CLASS = "jfx-dialog";
+
+    /// dialog transition type property, it can be one of the following:
+    ///
+    ///   - CENTER
+    ///   - TOP
+    ///   - RIGHT
+    ///   - BOTTOM
+    ///   - LEFT
+    ///   - NONE
+    ///
+    private final StyleableObjectProperty<DialogTransition> transitionType = new SimpleStyleableObjectProperty<>(
+            StyleableProperties.DIALOG_TRANSITION,
+            JFXDialog.this,
+            "dialogTransition",
+            DialogTransition.CENTER);
+
+    public DialogTransition getTransitionType() {
+        return transitionType == null ? DialogTransition.CENTER : transitionType.get();
+    }
+
+    public StyleableObjectProperty<DialogTransition> transitionTypeProperty() {
+        return this.transitionType;
+    }
+
+    public void setTransitionType(DialogTransition transition) {
+        this.transitionType.set(transition);
+    }
+
+    private static final class StyleableProperties {
+        private static final CssMetaData<JFXDialog, DialogTransition> DIALOG_TRANSITION =
+                new CssMetaData<JFXDialog, DialogTransition>("-jfx-dialog-transition",
+                        DialogTransitionConverter.getInstance(),
+                        DialogTransition.CENTER) {
+                    @Override
+                    public boolean isSettable(JFXDialog control) {
+                        return control.transitionType == null || !control.transitionType.isBound();
+                    }
+
+                    @Override
+                    public StyleableProperty<DialogTransition> getStyleableProperty(JFXDialog control) {
+                        return control.transitionTypeProperty();
+                    }
+                };
+
+        private static final List<CssMetaData<? extends Styleable, ?>> CHILD_STYLEABLES;
+
+        static {
+            final List<CssMetaData<? extends Styleable, ?>> styleables =
+                    new ArrayList<>(StackPane.getClassCssMetaData());
+            Collections.addAll(styleables,
+                    DIALOG_TRANSITION
+            );
+            CHILD_STYLEABLES = Collections.unmodifiableList(styleables);
+        }
+    }
+
+    @Override
+    public List<CssMetaData<? extends Styleable, ?>> getCssMetaData() {
+        return getClassCssMetaData();
+    }
+
+    public static List<CssMetaData<? extends Styleable, ?>> getClassCssMetaData() {
+        return StyleableProperties.CHILD_STYLEABLES;
+    }
+
+
+    /***************************************************************************
+     *                                                                         *
+     * Custom Events                                                           *
+     *                                                                         *
+     **************************************************************************/
+
+    private final ObjectProperty<EventHandler<? super JFXDialogEvent>> onDialogClosedProperty = new ObjectPropertyBase<EventHandler<? super JFXDialogEvent>>() {
+        @Override
+        protected void invalidated() {
+            setEventHandler(JFXDialogEvent.CLOSED, get());
+        }
+
+        @Override
+        public Object getBean() {
+            return JFXDialog.this;
+        }
+
+        @Override
+        public String getName() {
+            return "onClosed";
+        }
+    };
+
+    /**
+     * Defines a function to be called when the dialog is closed.
+     * Note: it will be triggered after the close animation is finished.
+     */
+    public ObjectProperty<EventHandler<? super JFXDialogEvent>> onDialogClosedProperty() {
+        return onDialogClosedProperty;
+    }
+
+    public void setOnDialogClosed(EventHandler<? super JFXDialogEvent> handler) {
+        onDialogClosedProperty().set(handler);
+    }
+
+    public EventHandler<? super JFXDialogEvent> getOnDialogClosed() {
+        return onDialogClosedProperty().get();
+    }
+
+
+    private final ObjectProperty<EventHandler<? super JFXDialogEvent>> onDialogOpenedProperty = new ObjectPropertyBase<EventHandler<? super JFXDialogEvent>>() {
+        @Override
+        protected void invalidated() {
+            setEventHandler(JFXDialogEvent.OPENED, get());
+        }
+
+        @Override
+        public Object getBean() {
+            return JFXDialog.this;
+        }
+
+        @Override
+        public String getName() {
+            return "onOpened";
+        }
+    };
+
+    /**
+     * Defines a function to be called when the dialog is opened.
+     * Note: it will be triggered after the show animation is finished.
+     */
+    public ObjectProperty<EventHandler<? super JFXDialogEvent>> onDialogOpenedProperty() {
+        return onDialogOpenedProperty;
+    }
+
+    public void setOnDialogOpened(EventHandler<? super JFXDialogEvent> handler) {
+        onDialogOpenedProperty().set(handler);
+    }
+
+    public EventHandler<? super JFXDialogEvent> getOnDialogOpened() {
+        return onDialogOpenedProperty().get();
+    }
+}
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/Controllers.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/Controllers.java
index d7def65c1f..ff9c859773 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/Controllers.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/Controllers.java
@@ -49,6 +49,7 @@
 import org.jackhuang.hmcl.task.TaskExecutor;
 import org.jackhuang.hmcl.ui.account.AccountListPage;
 import org.jackhuang.hmcl.ui.animation.AnimationUtils;
+import org.jackhuang.hmcl.ui.animation.Motion;
 import org.jackhuang.hmcl.ui.construct.*;
 import org.jackhuang.hmcl.ui.construct.MessageDialogPane.MessageType;
 import org.jackhuang.hmcl.ui.decorator.DecoratorController;
@@ -328,16 +329,16 @@ public static void initialize(Stage stage) {
         if (AnimationUtils.playWindowAnimation()) {
             Timeline timeline = new Timeline(
                     new KeyFrame(Duration.millis(0),
-                            new KeyValue(decorator.getDecorator().opacityProperty(), 0, FXUtils.EASE),
-                            new KeyValue(decorator.getDecorator().scaleXProperty(), 0.8, FXUtils.EASE),
-                            new KeyValue(decorator.getDecorator().scaleYProperty(), 0.8, FXUtils.EASE),
-                            new KeyValue(decorator.getDecorator().scaleZProperty(), 0.8, FXUtils.EASE)
+                            new KeyValue(decorator.getDecorator().opacityProperty(), 0, Motion.EASE),
+                            new KeyValue(decorator.getDecorator().scaleXProperty(), 0.8, Motion.EASE),
+                            new KeyValue(decorator.getDecorator().scaleYProperty(), 0.8, Motion.EASE),
+                            new KeyValue(decorator.getDecorator().scaleZProperty(), 0.8, Motion.EASE)
                     ),
                     new KeyFrame(Duration.millis(600),
-                            new KeyValue(decorator.getDecorator().opacityProperty(), 1, FXUtils.EASE),
-                            new KeyValue(decorator.getDecorator().scaleXProperty(), 1, FXUtils.EASE),
-                            new KeyValue(decorator.getDecorator().scaleYProperty(), 1, FXUtils.EASE),
-                            new KeyValue(decorator.getDecorator().scaleZProperty(), 1, FXUtils.EASE)
+                            new KeyValue(decorator.getDecorator().opacityProperty(), 1, Motion.EASE),
+                            new KeyValue(decorator.getDecorator().scaleXProperty(), 1, Motion.EASE),
+                            new KeyValue(decorator.getDecorator().scaleYProperty(), 1, Motion.EASE),
+                            new KeyValue(decorator.getDecorator().scaleZProperty(), 1, Motion.EASE)
                     )
             );
             timeline.play();
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/FXUtils.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/FXUtils.java
index 2b5f499828..765426c912 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/FXUtils.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/FXUtils.java
@@ -437,28 +437,12 @@ public static void installSlowTooltip(Node node, String tooltip) {
         installSlowTooltip(node, new Tooltip(tooltip));
     }
 
-    public static void playAnimation(Node node, String animationKey, Timeline timeline) {
-        animationKey = "FXUTILS.ANIMATION." + animationKey;
-        Object oldTimeline = node.getProperties().get(animationKey);
-//        if (oldTimeline instanceof Timeline) ((Timeline) oldTimeline).stop();
-        if (timeline != null) timeline.play();
-        node.getProperties().put(animationKey, timeline);
-    }
-
-    public static <T> Animation playAnimation(Node node, String animationKey, Duration duration, WritableValue<T> property, T from, T to, Interpolator interpolator) {
-        if (from == null) from = property.getValue();
-        if (duration == null || Objects.equals(duration, Duration.ZERO) || Objects.equals(from, to)) {
-            playAnimation(node, animationKey, null);
-            property.setValue(to);
-            return null;
-        } else {
-            Timeline timeline = new Timeline(
-                    new KeyFrame(Duration.ZERO, new KeyValue(property, from, interpolator)),
-                    new KeyFrame(duration, new KeyValue(property, to, interpolator))
-            );
-            playAnimation(node, animationKey, timeline);
-            return timeline;
-        }
+    public static void playAnimation(Node node, String animationKey, Animation animation) {
+        animationKey = "hmcl.animations." + animationKey;
+        if (node.getProperties().get(animationKey) instanceof Animation oldAnimation)
+            oldAnimation.stop();
+        animation.play();
+        node.getProperties().put(animationKey, animation);
     }
 
     public static void openFolder(Path file) {
@@ -1349,8 +1333,6 @@ public String toString() {
         }
     };
 
-    public static final Interpolator EASE = Interpolator.SPLINE(0.25, 0.1, 0.25, 1);
-
     public static void onEscPressed(Node node, Runnable action) {
         node.addEventHandler(KeyEvent.KEY_PRESSED, e -> {
             if (e.getCode() == KeyCode.ESCAPE) {
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/animation/AnimationHandler.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/animation/AnimationHandler.java
deleted file mode 100644
index b3c46a105c..0000000000
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/animation/AnimationHandler.java
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Hello Minecraft! Launcher
- * Copyright (C) 2020  huangyuhui <huanghongxun2008@126.com> and contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-package org.jackhuang.hmcl.ui.animation;
-
-import javafx.scene.Node;
-import javafx.scene.layout.Pane;
-import javafx.util.Duration;
-
-public interface AnimationHandler {
-    Duration getDuration();
-
-    Pane getCurrentRoot();
-
-    Node getPreviousNode();
-
-    Node getCurrentNode();
-}
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/animation/AnimationProducer.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/animation/AnimationProducer.java
deleted file mode 100644
index 10839c6bbe..0000000000
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/animation/AnimationProducer.java
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * Hello Minecraft! Launcher
- * Copyright (C) 2020  huangyuhui <huanghongxun2008@126.com> and contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-package org.jackhuang.hmcl.ui.animation;
-
-import javafx.animation.KeyFrame;
-import org.jetbrains.annotations.Nullable;
-
-import java.util.List;
-
-public interface AnimationProducer {
-    void init(AnimationHandler handler);
-
-    List<KeyFrame> animate(AnimationHandler handler);
-
-    @Nullable AnimationProducer opposite();
-}
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/animation/ContainerAnimations.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/animation/ContainerAnimations.java
index 281ac618db..98ddbf7d59 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/animation/ContainerAnimations.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/animation/ContainerAnimations.java
@@ -20,33 +20,23 @@
 import javafx.animation.Interpolator;
 import javafx.animation.KeyFrame;
 import javafx.animation.KeyValue;
+import javafx.animation.Timeline;
+import javafx.scene.Node;
+import javafx.scene.layout.Pane;
 import javafx.util.Duration;
-import org.jackhuang.hmcl.ui.FXUtils;
-import org.jetbrains.annotations.Nullable;
 
-import java.util.Arrays;
-import java.util.Collections;
-import java.util.List;
-
-public enum ContainerAnimations implements AnimationProducer {
+public enum ContainerAnimations implements TransitionPane.AnimationProducer {
     NONE {
         @Override
-        public void init(AnimationHandler c) {
-            c.getPreviousNode().setTranslateX(0);
-            c.getPreviousNode().setTranslateY(0);
-            c.getPreviousNode().setScaleX(1);
-            c.getPreviousNode().setScaleY(1);
-            c.getPreviousNode().setOpacity(1);
-            c.getCurrentNode().setTranslateX(0);
-            c.getCurrentNode().setTranslateY(0);
-            c.getCurrentNode().setScaleX(1);
-            c.getCurrentNode().setScaleY(1);
-            c.getCurrentNode().setOpacity(1);
+        public Timeline animate(
+                Pane container, Node previousNode, Node nextNode,
+                Duration duration, Interpolator interpolator) {
+            return new Timeline();
         }
 
         @Override
-        public List<KeyFrame> animate(AnimationHandler c) {
-            return Collections.emptyList();
+        public TransitionPane.AnimationProducer opposite() {
+            return this;
         }
     },
 
@@ -55,258 +45,173 @@ public List<KeyFrame> animate(AnimationHandler c) {
      */
     FADE {
         @Override
-        public void init(AnimationHandler c) {
-            c.getPreviousNode().setTranslateX(0);
-            c.getPreviousNode().setTranslateY(0);
-            c.getPreviousNode().setScaleX(1);
-            c.getPreviousNode().setScaleY(1);
-            c.getPreviousNode().setOpacity(1);
-            c.getCurrentNode().setTranslateX(0);
-            c.getCurrentNode().setTranslateY(0);
-            c.getCurrentNode().setScaleX(1);
-            c.getCurrentNode().setScaleY(1);
-            c.getCurrentNode().setOpacity(0);
+        public Timeline animate(
+                Pane container, Node previousNode, Node nextNode,
+                Duration duration, Interpolator interpolator) {
+            return new Timeline(new KeyFrame(Duration.ZERO,
+                    new KeyValue(previousNode.opacityProperty(), 1, interpolator),
+                    new KeyValue(nextNode.opacityProperty(), 0, interpolator)),
+                    new KeyFrame(duration,
+                            new KeyValue(previousNode.opacityProperty(), 0, interpolator),
+                            new KeyValue(nextNode.opacityProperty(), 1, interpolator)));
         }
 
         @Override
-        public List<KeyFrame> animate(AnimationHandler c) {
-            return Arrays.asList(new KeyFrame(Duration.ZERO,
-                            new KeyValue(c.getPreviousNode().opacityProperty(), 1, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getCurrentNode().opacityProperty(), 0, Interpolator.EASE_BOTH)),
-                    new KeyFrame(c.getDuration(),
-                            new KeyValue(c.getPreviousNode().opacityProperty(), 0, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getCurrentNode().opacityProperty(), 1, Interpolator.EASE_BOTH)));
+        public TransitionPane.AnimationProducer opposite() {
+            return this;
         }
     },
 
     /**
-     * A fade between the old and new view
+     * A swipe effect
      */
-    FADE_IN {
-        @Override
-        public void init(AnimationHandler c) {
-            c.getCurrentNode().setTranslateX(0);
-            c.getCurrentNode().setTranslateY(0);
-            c.getCurrentNode().setScaleX(1);
-            c.getCurrentNode().setScaleY(1);
-            c.getCurrentNode().setOpacity(0);
-        }
-
+    SWIPE_LEFT {
         @Override
-        public List<KeyFrame> animate(AnimationHandler c) {
-            return Arrays.asList(new KeyFrame(Duration.ZERO,
-                            new KeyValue(c.getCurrentNode().opacityProperty(), 0, FXUtils.SINE)),
-                    new KeyFrame(c.getDuration(),
-                            new KeyValue(c.getCurrentNode().opacityProperty(), 1, FXUtils.SINE)));
+        public void init(TransitionPane container, Node previousNode, Node nextNode) {
+            super.init(container, previousNode, nextNode);
+            nextNode.setTranslateX(container.getWidth());
         }
-    },
 
-    /**
-     * A fade between the old and new view
-     */
-    FADE_OUT {
         @Override
-        public void init(AnimationHandler c) {
-            c.getCurrentNode().setTranslateX(0);
-            c.getCurrentNode().setTranslateY(0);
-            c.getCurrentNode().setScaleX(1);
-            c.getCurrentNode().setScaleY(1);
-            c.getCurrentNode().setOpacity(1);
+        public Timeline animate(
+                Pane container, Node previousNode, Node nextNode,
+                Duration duration, Interpolator interpolator) {
+            return new Timeline(new KeyFrame(Duration.ZERO,
+                    new KeyValue(nextNode.translateXProperty(), container.getWidth(), interpolator),
+                    new KeyValue(previousNode.translateXProperty(), 0, interpolator)),
+                    new KeyFrame(duration,
+                            new KeyValue(nextNode.translateXProperty(), 0, interpolator),
+                            new KeyValue(previousNode.translateXProperty(), -container.getWidth(), interpolator)));
         }
 
         @Override
-        public List<KeyFrame> animate(AnimationHandler c) {
-            return Arrays.asList(new KeyFrame(Duration.ZERO,
-                            new KeyValue(c.getCurrentNode().opacityProperty(), 1, FXUtils.SINE)),
-                    new KeyFrame(c.getDuration(),
-                            new KeyValue(c.getCurrentNode().opacityProperty(), 0, FXUtils.SINE)));
+        public TransitionPane.AnimationProducer opposite() {
+            return SWIPE_RIGHT;
         }
     },
-    /**
-     * A zoom effect
-     */
-    ZOOM_IN {
-        @Override
-        public void init(AnimationHandler c) {
-            c.getPreviousNode().setTranslateX(0);
-            c.getPreviousNode().setTranslateY(0);
-            c.getPreviousNode().setScaleX(1);
-            c.getPreviousNode().setScaleY(1);
-            c.getPreviousNode().setOpacity(1);
-            c.getCurrentNode().setTranslateX(0);
-            c.getCurrentNode().setTranslateY(0);
-        }
 
-        @Override
-        public List<KeyFrame> animate(AnimationHandler c) {
-            return Arrays.asList(new KeyFrame(Duration.ZERO,
-                            new KeyValue(c.getPreviousNode().scaleXProperty(), 1, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().scaleYProperty(), 1, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().opacityProperty(), 1, Interpolator.EASE_BOTH)),
-                    new KeyFrame(c.getDuration(),
-                            new KeyValue(c.getPreviousNode().scaleXProperty(), 4, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().scaleYProperty(), 4, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().opacityProperty(), 0, Interpolator.EASE_BOTH)));
-        }
-    },
     /**
-     * A zoom effect
+     * A swipe effect
      */
-    ZOOM_OUT {
+    SWIPE_RIGHT {
         @Override
-        public void init(AnimationHandler c) {
-            c.getPreviousNode().setTranslateX(0);
-            c.getPreviousNode().setTranslateY(0);
-            c.getPreviousNode().setScaleX(1);
-            c.getPreviousNode().setScaleY(1);
-            c.getPreviousNode().setOpacity(1);
-            c.getCurrentNode().setTranslateX(0);
-            c.getCurrentNode().setTranslateY(0);
+        public void init(TransitionPane container, Node previousNode, Node nextNode) {
+            super.init(container, previousNode, nextNode);
+            nextNode.setTranslateX(-container.getWidth());
         }
 
         @Override
-        public List<KeyFrame> animate(AnimationHandler c) {
-            return Arrays.asList(new KeyFrame(Duration.ZERO,
-                            new KeyValue(c.getPreviousNode().scaleXProperty(), 1, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().scaleYProperty(), 1, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().opacityProperty(), 1, Interpolator.EASE_BOTH)),
-                    new KeyFrame(c.getDuration(),
-                            new KeyValue(c.getPreviousNode().scaleXProperty(), 0, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().scaleYProperty(), 0, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().opacityProperty(), 0, Interpolator.EASE_BOTH)));
-        }
-    },
-    /**
-     * A swipe effect
-     */
-    SWIPE_LEFT {
-        @Override
-        public void init(AnimationHandler c) {
-            c.getPreviousNode().setScaleX(1);
-            c.getPreviousNode().setScaleY(1);
-            c.getPreviousNode().setOpacity(0);
-            c.getPreviousNode().setTranslateX(0);
-            c.getCurrentNode().setScaleX(1);
-            c.getCurrentNode().setScaleY(1);
-            c.getCurrentNode().setOpacity(1);
-            c.getCurrentNode().setTranslateX(c.getCurrentRoot().getWidth());
+        public Timeline animate(
+                Pane container, Node previousNode, Node nextNode,
+                Duration duration, Interpolator interpolator) {
+            return new Timeline(new KeyFrame(Duration.ZERO,
+                    new KeyValue(nextNode.translateXProperty(), -container.getWidth(), interpolator),
+                    new KeyValue(previousNode.translateXProperty(), 0, interpolator)),
+                    new KeyFrame(duration,
+                            new KeyValue(nextNode.translateXProperty(), 0, interpolator),
+                            new KeyValue(previousNode.translateXProperty(), container.getWidth(), interpolator)));
         }
 
         @Override
-        public List<KeyFrame> animate(AnimationHandler c) {
-            return Arrays.asList(new KeyFrame(Duration.ZERO,
-                            new KeyValue(c.getCurrentNode().translateXProperty(), c.getCurrentRoot().getWidth(), Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().translateXProperty(), 0, Interpolator.EASE_BOTH)),
-                    new KeyFrame(c.getDuration(),
-                            new KeyValue(c.getCurrentNode().translateXProperty(), 0, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().translateXProperty(), -c.getCurrentRoot().getWidth(), Interpolator.EASE_BOTH)));
+        public TransitionPane.AnimationProducer opposite() {
+            return SWIPE_LEFT;
         }
     },
 
-    /**
-     * A swipe effect
-     */
-    SWIPE_RIGHT {
+    /// @see <a href="https://m3.material.io/styles/motion/transitions/transition-patterns">Transitions - Material Design 3</a>
+    FORWARD {
         @Override
-        public void init(AnimationHandler c) {
-            c.getPreviousNode().setScaleX(1);
-            c.getPreviousNode().setScaleY(1);
-            c.getPreviousNode().setOpacity(0);
-            c.getPreviousNode().setTranslateX(0);
-            c.getCurrentNode().setScaleX(1);
-            c.getCurrentNode().setScaleY(1);
-            c.getCurrentNode().setOpacity(1);
-            c.getCurrentNode().setTranslateX(-c.getCurrentRoot().getWidth());
+        public Timeline animate(
+                Pane container, Node previousNode, Node nextNode,
+                Duration duration, Interpolator interpolator) {
+            double offset = container.getWidth() > 0 ? container.getWidth() * 0.2 : 50;
+            return new Timeline(
+                    new KeyFrame(Duration.ZERO,
+                            new KeyValue(previousNode.translateXProperty(), 0, interpolator),
+                            new KeyValue(previousNode.opacityProperty(), 1, interpolator),
+                            new KeyValue(nextNode.opacityProperty(), 0, interpolator)),
+                    new KeyFrame(duration.multiply(0.5),
+                            new KeyValue(previousNode.translateXProperty(), -offset, interpolator),
+                            new KeyValue(previousNode.opacityProperty(), 0, interpolator),
+
+                            new KeyValue(nextNode.opacityProperty(), 0, interpolator),
+                            new KeyValue(nextNode.translateXProperty(), offset, interpolator)),
+                    new KeyFrame(duration,
+                            new KeyValue(nextNode.opacityProperty(), 1, interpolator),
+                            new KeyValue(nextNode.translateXProperty(), 0, interpolator))
+            );
         }
 
         @Override
-        public List<KeyFrame> animate(AnimationHandler c) {
-            return Arrays.asList(new KeyFrame(Duration.ZERO,
-                            new KeyValue(c.getCurrentNode().translateXProperty(), -c.getCurrentRoot().getWidth(), Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().translateXProperty(), 0, Interpolator.EASE_BOTH)),
-                    new KeyFrame(c.getDuration(),
-                            new KeyValue(c.getCurrentNode().translateXProperty(), 0, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().translateXProperty(), c.getCurrentRoot().getWidth(), Interpolator.EASE_BOTH)));
+        public TransitionPane.AnimationProducer opposite() {
+            return BACKWARD;
         }
     },
 
-    SWIPE_LEFT_FADE_SHORT {
+    /// @see <a href="https://m3.material.io/styles/motion/transitions/transition-patterns">Transitions - Material Design 3</a>
+    BACKWARD {
         @Override
-        public void init(AnimationHandler c) {
-            c.getPreviousNode().setScaleX(1);
-            c.getPreviousNode().setScaleY(1);
-            c.getPreviousNode().setOpacity(0);
-            c.getPreviousNode().setTranslateX(0);
-            c.getCurrentNode().setScaleX(1);
-            c.getCurrentNode().setScaleY(1);
-            c.getCurrentNode().setOpacity(1);
-            c.getCurrentNode().setTranslateX(c.getCurrentRoot().getWidth());
-        }
+        public Timeline animate(
+                Pane container, Node previousNode, Node nextNode,
+                Duration duration, Interpolator interpolator) {
+            double offset = container.getWidth() > 0 ? container.getWidth() * 0.2 : 50;
+            return new Timeline(
+                    new KeyFrame(Duration.ZERO,
+                            new KeyValue(previousNode.translateXProperty(), 0, interpolator),
+                            new KeyValue(previousNode.opacityProperty(), 1, interpolator),
+                            new KeyValue(nextNode.opacityProperty(), 0, interpolator)),
+                    new KeyFrame(duration.multiply(0.5),
+                            new KeyValue(previousNode.translateXProperty(), offset, interpolator),
+                            new KeyValue(previousNode.opacityProperty(), 0, interpolator),
 
-        @Override
-        public List<KeyFrame> animate(AnimationHandler c) {
-            return Arrays.asList(new KeyFrame(Duration.ZERO,
-                            new KeyValue(c.getCurrentNode().translateXProperty(), 50, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().translateXProperty(), 0, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getCurrentNode().opacityProperty(), 0, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().opacityProperty(), 1, Interpolator.EASE_BOTH)),
-                    new KeyFrame(c.getDuration(),
-                            new KeyValue(c.getCurrentNode().translateXProperty(), 0, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().translateXProperty(), -50, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getCurrentNode().opacityProperty(), 1, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().opacityProperty(), 0, Interpolator.EASE_BOTH)));
+                            new KeyValue(nextNode.opacityProperty(), 0, interpolator),
+                            new KeyValue(nextNode.translateXProperty(), -offset, interpolator)),
+                    new KeyFrame(duration,
+                            new KeyValue(nextNode.opacityProperty(), 1, interpolator),
+                            new KeyValue(nextNode.translateXProperty(), 0, interpolator))
+            );
         }
-    },
 
-    SWIPE_RIGHT_FADE_SHORT {
         @Override
-        public void init(AnimationHandler c) {
-            c.getPreviousNode().setScaleX(1);
-            c.getPreviousNode().setScaleY(1);
-            c.getPreviousNode().setOpacity(0);
-            c.getPreviousNode().setTranslateX(0);
-            c.getCurrentNode().setScaleX(1);
-            c.getCurrentNode().setScaleY(1);
-            c.getCurrentNode().setOpacity(1);
-            c.getCurrentNode().setTranslateX(c.getCurrentRoot().getWidth());
+        public TransitionPane.AnimationProducer opposite() {
+            return FORWARD;
         }
+    },
 
-        @Override
-        public List<KeyFrame> animate(AnimationHandler c) {
-            return Arrays.asList(new KeyFrame(Duration.ZERO,
-                            new KeyValue(c.getCurrentNode().translateXProperty(), -50, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().translateXProperty(), 0, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getCurrentNode().opacityProperty(), 0, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().opacityProperty(), 1, Interpolator.EASE_BOTH)),
-                    new KeyFrame(c.getDuration(),
-                            new KeyValue(c.getCurrentNode().translateXProperty(), 0, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().translateXProperty(), 50, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getCurrentNode().opacityProperty(), 1, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().opacityProperty(), 0, Interpolator.EASE_BOTH)));
+    /// Imitates the animation when switching tabs in the Windows 11 Settings interface
+    SLIDE_UP_FADE_IN {
+        @Override
+        public Timeline animate(
+                Pane container, Node previousNode, Node nextNode,
+                Duration duration, Interpolator interpolator) {
+            double offset = container.getHeight() > 0 ? container.getHeight() * 0.2 : 50;
+            return new Timeline(
+                    new KeyFrame(Duration.ZERO,
+                            new KeyValue(previousNode.translateYProperty(), 0, interpolator),
+                            new KeyValue(previousNode.opacityProperty(), 1, interpolator),
+                            new KeyValue(nextNode.opacityProperty(), 0, interpolator),
+                            new KeyValue(nextNode.translateYProperty(), offset, interpolator)),
+                    new KeyFrame(duration.multiply(0.5),
+                            new KeyValue(previousNode.opacityProperty(), 0, interpolator)),
+                    new KeyFrame(duration,
+                            new KeyValue(nextNode.opacityProperty(), 1, interpolator),
+                            new KeyValue(nextNode.translateYProperty(), 0, interpolator))
+            );
         }
-    };
-
-    private ContainerAnimations opposite;
-
-    static {
-        NONE.opposite = NONE;
-        FADE.opposite = FADE;
-        SWIPE_LEFT.opposite = SWIPE_RIGHT;
-        SWIPE_RIGHT.opposite = SWIPE_LEFT;
-        FADE_IN.opposite = FADE_OUT;
-        FADE_OUT.opposite = FADE_IN;
-        ZOOM_IN.opposite = ZOOM_OUT;
-        ZOOM_OUT.opposite = ZOOM_IN;
+    },
+    ;
+
+    protected static void reset(Node node) {
+        node.setTranslateX(0);
+        node.setTranslateY(0);
+        node.setScaleX(1);
+        node.setScaleY(1);
+        node.setOpacity(1);
     }
 
     @Override
-    public abstract void init(AnimationHandler handler);
-
-    @Override
-    public abstract List<KeyFrame> animate(AnimationHandler handler);
-
-    @Override
-    public @Nullable ContainerAnimations opposite() {
-        return opposite;
+    public void init(TransitionPane container, Node previousNode, Node nextNode) {
+        reset(previousNode);
+        reset(nextNode);
     }
 }
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/animation/Motion.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/animation/Motion.java
new file mode 100644
index 0000000000..732343bfc1
--- /dev/null
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/animation/Motion.java
@@ -0,0 +1,781 @@
+/*
+ * Hello Minecraft! Launcher
+ * Copyright (C) 2025 huangyuhui <huanghongxun2008@126.com> and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+package org.jackhuang.hmcl.ui.animation;
+
+import javafx.animation.Interpolator;
+import javafx.util.Duration;
+
+import java.util.Objects;
+
+/// @author Glavo
+/// @see <a href="https://api.flutter.dev/flutter/animation/Curves-class.html">Flutter Curves</a>
+public final class Motion {
+
+    //region Curves
+
+    /// A linear animation curve.
+    ///
+    /// This is the identity map over the unit interval: its [Interpolator#curve(double)]
+    /// method returns its input unmodified. This is useful as a default curve for
+    /// cases where a [Interpolator] is required but no actual curve is desired.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_linear.mp4">curve_linear.mp4</a>
+    public static final Interpolator LINEAR = Interpolator.LINEAR;
+
+    /// The emphasizedAccelerate easing curve in the Material specification.
+    ///
+    /// See also:
+    ///
+    /// * [M3 guidelines: Easing tokens](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs#433b1153-2ea3-4fe2-9748-803a47bc97ee)
+    /// * [M3 guidelines: Applying easing and duration](https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration)
+    public static final Interpolator EMPHASIZED_ACCELERATE = new Cubic(0.3, 0.0, 0.8, 0.15);
+
+    /// The emphasizedDecelerate easing curve in the Material specification.
+    ///
+    /// See also:
+    ///
+    /// * [M3 guidelines: Easing tokens](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs#433b1153-2ea3-4fe2-9748-803a47bc97ee)
+    /// * [M3 guidelines: Applying easing and duration](https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration)
+    public static final Interpolator EMPHASIZED_DECELERATE = new Cubic(0.05, 0.7, 0.1, 1.0);
+
+    /// The standard easing curve in the Material specification.
+    ///
+    /// See also:
+    ///
+    /// * [M3 guidelines: Easing tokens](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs#433b1153-2ea3-4fe2-9748-803a47bc97ee)
+    /// * [M3 guidelines: Applying easing and duration](https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration)
+    public static final Interpolator STANDARD = new Cubic(0.2, 0.0, 0.0, 1.0);
+
+    /// The standardAccelerate easing curve in the Material specification.
+    ///
+    /// See also:
+    ///
+    /// * [M3 guidelines: Easing tokens](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs#433b1153-2ea3-4fe2-9748-803a47bc97ee)
+    /// * [M3 guidelines: Applying easing and duration](https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration)
+    public static final Interpolator STANDARD_ACCELERATE = new Cubic(0.3, 0.0, 1.0, 1.0);
+
+    /// The standardDecelerate easing curve in the Material specification.
+    ///
+    /// See also:
+    ///
+    /// * [M3 guidelines: Easing tokens](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs#433b1153-2ea3-4fe2-9748-803a47bc97ee)
+    /// * [M3 guidelines: Applying easing and duration](https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration)
+    public static Interpolator STANDARD_DECELERATE = new Cubic(0.0, 0.0, 0.0, 1.0);
+
+    /// The legacyDecelerate easing curve in the Material specification.
+    ///
+    /// See also:
+    ///
+    /// * [M3 guidelines: Easing tokens](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs#433b1153-2ea3-4fe2-9748-803a47bc97ee)
+    /// * [M3 guidelines: Applying easing and duration](https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration)
+    public static Interpolator LEGACY_DECELERATE = new Cubic(0.0, 0.0, 0.2, 1.0);
+
+    /// The legacyAccelerate easing curve in the Material specification.
+    ///
+    /// See also:
+    ///
+    /// * [M3 guidelines: Easing tokens](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs#433b1153-2ea3-4fe2-9748-803a47bc97ee)
+    /// * [M3 guidelines: Applying easing and duration](https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration)
+    public static Interpolator LEGACY_ACCELERATE = new Cubic(0.4, 0.0, 1.0, 1.0);
+
+    /// The legacy easing curve in the Material specification.
+    ///
+    /// See also:
+    ///
+    /// * [M3 guidelines: Easing tokens](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs#433b1153-2ea3-4fe2-9748-803a47bc97ee)
+    /// * [M3 guidelines: Applying easing and duration](https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration)
+    public static Interpolator LEGACY = new Cubic(0.4, 0.0, 0.2, 1.0);
+
+    /// A cubic animation curve that speeds up quickly and ends slowly.
+    ///
+    /// This is the same as the CSS easing function `ease`.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease.mp4">curve_ease.mp4</a>
+    public static final Interpolator EASE = new Cubic(0.25, 0.1, 0.25, 1.0);
+
+    /// A cubic animation curve that starts slowly and ends quickly.
+    ///
+    /// This is the same as the CSS easing function `ease-in`.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in.mp4">curve_ease_in.mp4</a>
+    public static final Interpolator EASE_IN = new Cubic(0.42, 0.0, 1.0, 1.0);
+
+    /// A cubic animation curve that starts slowly and ends linearly.
+    ///
+    /// The symmetric animation to [#LINEAR_TO_EASE_OUT].
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_to_linear.mp4">curve_ease_in_to_linear.mp4</a>
+    public static final Interpolator EASE_IN_TO_LINEAR = new Cubic(0.67, 0.03, 0.65, 0.09);
+
+    /// A cubic animation curve that starts slowly and ends quickly. This is
+    /// similar to [#EASE_IN], but with sinusoidal easing for a slightly less
+    /// abrupt beginning and end. Nonetheless, the result is quite gentle and is
+    /// hard to distinguish from [#linear] at a glance.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_sine.mp4">curve_ease_in_sine.mp4</a>
+    public static final Interpolator EASE_IN_SINE = new Cubic(0.47, 0.0, 0.745, 0.715);
+
+    /// A cubic animation curve that starts slowly and ends quickly. Based on a
+    /// quadratic equation where `f(t) = t²`, this is effectively the inverse of
+    /// [#decelerate].
+    ///
+    /// Compared to [#EASE_IN_SINE], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_quad.mp4">curve_ease_in_quad.mp4</a>
+    public static final Interpolator EASE_IN_QUAD = new Cubic(0.55, 0.085, 0.68, 0.53);
+
+    /// A cubic animation curve that starts slowly and ends quickly. This curve is
+    /// based on a cubic equation where `f(t) = t³`. The result is a safe sweet
+    /// spot when choosing a curve for widgets animating off the viewport.
+    ///
+    /// Compared to [#EASE_IN_QUAD], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_cubic.mp4">curve_ease_in_cubic.mp4</a>
+    public static final Interpolator EASE_IN_CUBIC = new Cubic(0.55, 0.055, 0.675, 0.19);
+
+    /// A cubic animation curve that starts slowly and ends quickly. This curve is
+    /// based on a quartic equation where `f(t) = t⁴`.
+    ///
+    /// Animations using this curve or steeper curves will benefit from a longer
+    /// duration to avoid motion feeling unnatural.
+    ///
+    /// Compared to [#EASE_IN_CUBIC], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_quart.mp4">curve_ease_in_quart.mp4</a>
+    public static final Interpolator EASE_IN_QUART = new Cubic(0.895, 0.03, 0.685, 0.22);
+
+    /// A cubic animation curve that starts slowly and ends quickly. This curve is
+    /// based on a quintic equation where `f(t) = t⁵`.
+    ///
+    /// Compared to [#EASE_IN_QUART], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_quint.mp4">curve_ease_in_quint.mp4</a>
+    public static final Interpolator EASE_IN_QUINT = new Cubic(0.755, 0.05, 0.855, 0.06);
+
+    /// A cubic animation curve that starts slowly and ends quickly. This curve is
+    /// based on an exponential equation where `f(t) = 2¹⁰⁽ᵗ⁻¹⁾`.
+    ///
+    /// Using this curve can give your animations extra flare, but a longer
+    /// duration may need to be used to compensate for the steepness of the curve.
+    ///
+    /// Compared to [#EASE_IN_QUINT], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_expo.mp4">curve_ease_in_expo.mp4</a>
+    public static final Interpolator EASE_IN_EXPO = new Cubic(0.95, 0.05, 0.795, 0.035);
+
+    /// A cubic animation curve that starts slowly and ends quickly. This curve is
+    /// effectively the bottom-right quarter of a circle.
+    ///
+    /// Like [#EASE_IN_EXPO], this curve is fairly dramatic and will reduce
+    /// the clarity of an animation if not given a longer duration.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_circ.mp4">curve_ease_in_circ.mp4</a>
+    public static final Interpolator EASE_IN_CIRC = new Cubic(0.6, 0.04, 0.98, 0.335);
+
+    /// A cubic animation curve that starts slowly and ends quickly. This curve
+    /// is similar to [#elasticIn] in that it overshoots its bounds before
+    /// reaching its end. Instead of repeated swinging motions before ascending,
+    /// though, this curve overshoots once, then continues to ascend.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_back.mp4">curve_ease_in_back.mp4</a>
+    public static final Interpolator EASE_IN_BACK = new Cubic(0.6, -0.28, 0.735, 0.045);
+
+    /// A cubic animation curve that starts quickly and ends slowly.
+    ///
+    /// This is the same as the CSS easing function `ease-out`.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out.mp4">curve_ease_out.mp4</a>
+    public static final Interpolator EASE_OUT = new Cubic(0.0, 0.0, 0.58, 1.0);
+
+    /// A cubic animation curve that starts linearly and ends slowly.
+    ///
+    /// A symmetric animation to [#EASE_IN_TO_LINEAR].
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_linear_to_ease_out.mp4">curve_linear_to_ease_out.mp4</a>
+    public static final Interpolator LINEAR_TO_EASE_OUT = new Cubic(0.35, 0.91, 0.33, 0.97);
+
+    /// A cubic animation curve that starts quickly and ends slowly. This is
+    /// similar to [#EASE_OUT], but with sinusoidal easing for a slightly
+    /// less abrupt beginning and end. Nonetheless, the result is quite gentle and
+    /// is hard to distinguish from [#linear] at a glance.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out_sine.mp4">curve_ease_out_sine.mp4</a>
+    public static final Interpolator EASE_OUT_SINE = new Cubic(0.39, 0.575, 0.565, 1.0);
+
+    /// A cubic animation curve that starts quickly and ends slowly. This is
+    /// effectively the same as [#decelerate], only simulated using a cubic
+    /// bezier function.
+    ///
+    /// Compared to [#EASE_OUT_SINE], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out_quad.mp4">curve_ease_out_quad.mp4</a>
+    public static final Interpolator EASE_OUT_QUAD = new Cubic(0.25, 0.46, 0.45, 0.94);
+
+    /// A cubic animation curve that starts quickly and ends slowly. This curve is
+    /// a flipped version of [#EASE_IN_CUBIC].
+    ///
+    /// The result is a safe sweet spot when choosing a curve for animating a
+    /// widget's position entering or already inside the viewport.
+    ///
+    /// Compared to [#EASE_OUT_QUAD], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out_cubic.mp4">curve_ease_out_cubic.mp4</a>
+    public static final Interpolator EASE_OUT_CUBIC = new Cubic(0.215, 0.61, 0.355, 1.0);
+
+    /// A cubic animation curve that starts quickly and ends slowly. This curve is
+    /// a flipped version of [#EASE_IN_QUART].
+    ///
+    /// Animations using this curve or steeper curves will benefit from a longer
+    /// duration to avoid motion feeling unnatural.
+    ///
+    /// Compared to [#EASE_OUT_CUBIC], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out_quart.mp4">curve_ease_out_quart.mp4</a>
+    public static final Interpolator EASE_OUT_QUART = new Cubic(0.165, 0.84, 0.44, 1.0);
+
+    /// A cubic animation curve that starts quickly and ends slowly. This curve is
+    /// a flipped version of [#EASE_IN_QUINT].
+    ///
+    /// Compared to [#EASE_OUT_QUART], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out_quint.mp4">curve_ease_out_quint.mp4</a>
+    public static final Interpolator EASE_OUT_QUINT = new Cubic(0.23, 1.0, 0.32, 1.0);
+
+    /// A cubic animation curve that starts quickly and ends slowly. This curve is
+    /// a flipped version of [#EASE_IN_EXPO]. Using this curve can give your
+    /// animations extra flare, but a longer duration may need to be used to
+    /// compensate for the steepness of the curve.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out_expo.mp4">curve_ease_out_expo.mp4</a>
+    public static final Interpolator EASE_OUT_EXPO = new Cubic(0.19, 1.0, 0.22, 1.0);
+
+    /// A cubic animation curve that starts quickly and ends slowly. This curve is
+    /// effectively the top-left quarter of a circle.
+    ///
+    /// Like [#EASE_OUT_EXPO], this curve is fairly dramatic and will reduce
+    /// the clarity of an animation if not given a longer duration.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out_circ.mp4">curve_ease_out_circ.mp4</a>
+    public static final Interpolator EASE_OUT_CIRC = new Cubic(0.075, 0.82, 0.165, 1.0);
+
+    /// A cubic animation curve that starts quickly and ends slowly. This curve is
+    /// similar to [#elasticOut] in that it overshoots its bounds before
+    /// reaching its end. Instead of repeated swinging motions after ascending,
+    /// though, this curve only overshoots once.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out_back.mp4">curve_ease_out_back.mp4</a>
+    public static final Interpolator EASE_OUT_BACK = new Cubic(0.175, 0.885, 0.32, 1.275);
+
+    /// A cubic animation curve that starts slowly, speeds up, and then ends
+    /// slowly.
+    ///
+    /// This is the same as the CSS easing function `ease-in-out`.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out.mp4">curve_ease_in_out.mp4</a>
+    public static final Interpolator EASE_IN_OUT = new Cubic(0.42, 0.0, 0.58, 1.0);
+
+    /// A cubic animation curve that starts slowly, speeds up, and then ends
+    /// slowly. This is similar to [#EASE_IN_OUT], but with sinusoidal easing
+    /// for a slightly less abrupt beginning and end.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out_sine.mp4">curve_ease_in_out_sine.mp4</a>
+    public static final Interpolator EASE_IN_OUT_SINE = new Cubic(0.445, 0.05, 0.55, 0.95);
+
+    /// A cubic animation curve that starts slowly, speeds up, and then ends
+    /// slowly. This curve can be imagined as [#EASE_IN_QUAD] as the first
+    /// half, and [#EASE_OUT_QUAD] as the second.
+    ///
+    /// Compared to [#EASE_IN_OUT_SINE], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out_quad.mp4">curve_ease_in_out_quad.mp4</a>
+    public static final Interpolator EASE_IN_OUT_QUAD = new Cubic(0.455, 0.03, 0.515, 0.955);
+
+    /// A cubic animation curve that starts slowly, speeds up, and then ends
+    /// slowly. This curve can be imagined as [#EASE_IN_CUBIC] as the first
+    /// half, and [#EASE_OUT_CUBIC] as the second.
+    ///
+    /// The result is a safe sweet spot when choosing a curve for a widget whose
+    /// initial and final positions are both within the viewport.
+    ///
+    /// Compared to [#EASE_IN_OUT_QUAD], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out_cubic.mp4">curve_ease_in_out_cubic.mp4</a>
+    public static final Interpolator EASE_IN_OUT_CUBIC = new Cubic(0.645, 0.045, 0.355, 1.0);
+
+    /// A cubic animation curve that starts slowly, speeds up, and then ends
+    /// slowly. This curve can be imagined as [#EASE_IN_QUART] as the first
+    /// half, and [#EASE_OUT_QUART] as the second.
+    ///
+    /// Animations using this curve or steeper curves will benefit from a longer
+    /// duration to avoid motion feeling unnatural.
+    ///
+    /// Compared to [#EASE_IN_OUT_CUBIC], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out_quart.mp4">curve_ease_in_out_quart.mp4</a>
+    public static final Interpolator EASE_IN_OUT_QUART = new Cubic(0.77, 0.0, 0.175, 1.0);
+
+    /// A cubic animation curve that starts slowly, speeds up, and then ends
+    /// slowly. This curve can be imagined as [#EASE_IN_QUINT] as the first
+    /// half, and [#EASE_OUT_QUINT] as the second.
+    ///
+    /// Compared to [#EASE_IN_OUT_QUART], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out_quint.mp4">curve_ease_in_out_quint.mp4</a>
+    public static final Interpolator EASE_IN_OUT_QUINT = new Cubic(0.86, 0.0, 0.07, 1.0);
+
+    /// A cubic animation curve that starts slowly, speeds up, and then ends
+    /// slowly.
+    ///
+    /// Since this curve is arrived at with an exponential function, the midpoint
+    /// is exceptionally steep. Extra consideration should be taken when designing
+    /// an animation using this.
+    ///
+    /// Compared to [#EASE_IN_OUT_QUINT], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out_expo.mp4">curve_ease_in_out_expo.mp4</a>
+    public static final Interpolator EASE_IN_OUT_EXPO = new Cubic(1.0, 0.0, 0.0, 1.0);
+
+    /// A cubic animation curve that starts slowly, speeds up, and then ends
+    /// slowly. This curve can be imagined as [#EASE_IN_CIRC] as the first
+    /// half, and [#EASE_OUT_CIRC] as the second.
+    ///
+    /// Like [#EASE_IN_OUT_EXPO], this curve is fairly dramatic and will reduce
+    /// the clarity of an animation if not given a longer duration.
+    ///
+    /// Compared to [#EASE_IN_OUT_EXPO], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out_circ.mp4">curve_ease_in_out_circ.mp4</a>
+    public static final Interpolator EASE_IN_OUT_CIRC = new Cubic(0.785, 0.135, 0.15, 0.86);
+
+    /// A cubic animation curve that starts slowly, speeds up shortly thereafter,
+    /// and then ends slowly. This curve can be imagined as a steeper version of
+    /// [#EASE_IN_OUT_CUBIC].
+    ///
+    /// The result is a more emphasized eased curve when choosing a curve for a
+    /// widget whose initial and final positions are both within the viewport.
+    ///
+    /// Compared to [#EASE_IN_OUT_CUBIC], this curve is slightly steeper.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out_cubic_emphasized.mp4">curve_ease_in_out_cubic_emphasized.mp4</a>
+    public static final Interpolator EASE_IN_OUT_CUBIC_EMPHASIZED = new ThreePointCubic(
+            new Offset(0.05, 0),
+            new Offset(0.133333, 0.06),
+            new Offset(0.166666, 0.4),
+            new Offset(0.208333, 0.82),
+            new Offset(0.25, 1)
+    );
+
+    /// A cubic animation curve that starts slowly, speeds up, and then ends
+    /// slowly. This curve can be imagined as [#EASE_IN_BACK] as the first
+    /// half, and [#EASE_OUT_BACK] as the second.
+    ///
+    /// Since two curves are used as a basis for this curve, the resulting
+    /// animation will overshoot its bounds twice before reaching its end - first
+    /// by exceeding its lower bound, then exceeding its upper bound and finally
+    /// descending to its final position.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out_back.mp4">curve_ease_in_out_back.mp4</a>
+    public static final Interpolator EASE_IN_OUT_BACK = new Cubic(0.68, -0.55, 0.265, 1.55);
+
+    /// A curve that starts quickly and eases into its final position.
+    ///
+    /// Over the course of the animation, the object spends more time near its
+    /// final destination. As a result, the user isn’t left waiting for the
+    /// animation to finish, and the negative effects of motion are minimized.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_fast_out_slow_in.mp4">curve_fast_out_slow_in.mp4</a>
+    public static final Interpolator FAST_OUT_SLOW_IN = new Cubic(0.4, 0.0, 0.2, 1.0);
+
+    /// A cubic animation curve that starts quickly, slows down, and then ends
+    /// quickly.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_slow_middle.mp4">curve_slow_middle.mp4</a>
+    public static final Interpolator SLOW_MIDDLE = new Cubic(0.15, 0.85, 0.85, 0.15);
+
+    private static double bounce(double t) {
+        if (t < 1.0 / 2.75) {
+            return 7.5625 * t * t;
+        } else if (t < 2 / 2.75) {
+            t -= 1.5 / 2.75;
+            return 7.5625 * t * t + 0.75;
+        } else if (t < 2.5 / 2.75) {
+            t -= 2.25 / 2.75;
+            return 7.5625 * t * t + 0.9375;
+        }
+        t -= 2.625 / 2.75;
+        return 7.5625 * t * t + 0.984375;
+    }
+
+    /// An oscillating curve that grows in magnitude.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_in.mp4">curve_bounce_in.mp4</a>
+
+    public static final Interpolator BOUNCE_IN = new Interpolator() {
+        @Override
+        protected double curve(double t) {
+            return 1.0 - bounce(1.0 - t);
+        }
+    };
+
+    /// An oscillating curve that first grows and then shrink in magnitude.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_out.mp4">curve_bounce_out.mp4</a>
+    public static final Interpolator BOUNCE_OUT = new Interpolator() {
+        @Override
+        protected double curve(double t) {
+            return bounce(t);
+        }
+    };
+
+    /// An oscillating curve that first grows and then shrink in magnitude.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_in_out.mp4">curve_bounce_in_out.mp4</a>
+    public static final Interpolator BOUNCE_IN_OUT = new Interpolator() {
+        @Override
+        protected double curve(double t) {
+            if (t < 0.5) {
+                return (1.0 - bounce(1.0 - t * 2.0)) * 0.5;
+            } else {
+                return bounce(t * 2.0 - 1.0) * 0.5 + 0.5;
+            }
+        }
+    };
+
+    private static final double PERIOD = 0.4;
+
+    /// An oscillating curve that grows in magnitude while overshooting its bounds.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_in.mp4">curve_elastic_in.mp4</a>
+    public static final Interpolator ELASTIC_IN = new Interpolator() {
+        @Override
+        protected double curve(double t) {
+            final double s = PERIOD / 4.0;
+            t = t - 1.0;
+            return -Math.pow(2.0, 10.0 * t) * Math.sin((t - s) * (Math.PI * 2.0) / PERIOD);
+        }
+    };
+
+    /// An oscillating curve that shrinks in magnitude while overshooting its bounds.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_out.mp4">curve_elastic_out.mp4</a>
+    public static Interpolator ELASTIC_OUT = new Interpolator() {
+        @Override
+        protected double curve(double t) {
+            final double s = PERIOD / 4.0;
+            return Math.pow(2.0, -10 * t) * Math.sin((t - s) * (Math.PI * 2.0) / PERIOD) + 1.0;
+        }
+    };
+
+    /// An oscillating curve that grows and then shrinks in magnitude while overshooting its bounds.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_in_out.mp4">curve_elastic_in_out.mp4</a>
+    public static Interpolator ELASTIC_IN_OUT = new Interpolator() {
+        @Override
+        @SuppressWarnings("DuplicateExpressions")
+        protected double curve(double t) {
+            final double s = PERIOD / 4.0;
+            t = 2.0 * t - 1.0;
+            if (t < 0.0) {
+                return -0.5 * Math.pow(2.0, 10.0 * t) * Math.sin((t - s) * (Math.PI * 2.0) / PERIOD);
+            } else {
+                return Math.pow(2.0, -10.0 * t) * Math.sin((t - s) * (Math.PI * 2.0) / PERIOD) * 0.5 + 1.0;
+            }
+        }
+    };
+
+    /// A cubic polynomial mapping of the unit interval.
+    private static final class Cubic extends Interpolator {
+        private static final double CUBIC_ERROR_BOUND = 0.001;
+
+        /// The x coordinate of the first control point.
+        ///
+        /// The line through the point (0, 0) and the first control point is tangent
+        /// to the curve at the point (0, 0).
+        private final double a;
+
+        /// The y coordinate of the first control point.
+        ///
+        /// The line through the point (0, 0) and the first control point is tangent
+        /// to the curve at the point (0, 0).
+        private final double b;
+
+        /// The x coordinate of the second control point.
+        ///
+        /// The line through the point (1, 1) and the second control point is tangent
+        /// to the curve at the point (1, 1).
+        private final double c;
+
+        /// The y coordinate of the second control point.
+        ///
+        /// The line through the point (1, 1) and the second control point is tangent
+        /// to the curve at the point (1, 1).
+        private final double d;
+
+        private Cubic(double a, double b, double c, double d) {
+            this.a = a;
+            this.b = b;
+            this.c = c;
+            this.d = d;
+        }
+
+        double _evaluateCubic(double a, double b, double m) {
+            return 3 * a * (1 - m) * (1 - m) * m + 3 * b * (1 - m) * m * m + m * m * m;
+        }
+
+        @Override
+        protected double curve(double t) {
+            double start = 0.0;
+            double end = 1.0;
+            while (true) {
+                final double midpoint = (start + end) / 2;
+                final double estimate = _evaluateCubic(a, c, midpoint);
+                if (Math.abs(t - estimate) < CUBIC_ERROR_BOUND) {
+                    return _evaluateCubic(b, d, midpoint);
+                }
+                if (estimate < t) {
+                    start = midpoint;
+                } else {
+                    end = midpoint;
+                }
+            }
+        }
+
+        @Override
+        public boolean equals(Object o) {
+            return o instanceof Cubic cubic
+                    && this.a == cubic.a
+                    && this.b == cubic.b
+                    && this.c == cubic.c
+                    && this.d == cubic.d;
+        }
+
+        @Override
+        public int hashCode() {
+            return Objects.hash(a, b, c, d);
+        }
+
+        @Override
+        public String toString() {
+            return "Cubic[a=%s, b=%s, c=%s, d=%s]".formatted(a, b, c, d);
+        }
+    }
+
+    private record Offset(double dx, double dy) {
+    }
+
+    private static final class ThreePointCubic extends Interpolator {
+
+        /// The coordinates of the first control point of the first curve.
+        ///
+        /// The line through the point (0, 0) and this control point is tangent to the
+        /// curve at the point (0, 0).
+        private final Offset a1;
+
+        /// The coordinates of the second control point of the first curve.
+        ///
+        /// The line through the [#midpoint] and this control point is tangent to the
+        /// curve approaching the [#midpoint].
+        private final Offset b1;
+
+        /// The coordinates of the middle shared point.
+        ///
+        /// The curve will go through this point. If the control points surrounding
+        /// this middle point ([#b1], and [#a2]) are not colinear with this point, then
+        /// the curve's derivative will have a discontinuity (a cusp) at this point.
+        private final Offset midpoint;
+
+        /// The coordinates of the first control point of the second curve.
+        ///
+        /// The line through the [#midpoint] and this control point is tangent to the
+        /// curve approaching the [#midpoint].
+        private final Offset a2;
+
+        /// The coordinates of the second control point of the second curve.
+        ///
+        /// The line through the point (1, 1) and this control point is tangent to the
+        /// curve at (1, 1).
+        private final Offset b2;
+
+        /// Creates two cubic curves that share a common control point.
+        ///
+        /// Rather than creating a new instance, consider using one of the common
+        /// three-point cubic curves in [Interpolator].
+        ///
+        /// The arguments correspond to the control points for the two curves,
+        /// including the [#midpoint], but do not include the two implied end points at
+        /// (0,0) and (1,1), which are fixed.
+        private ThreePointCubic(Offset a1, Offset b1, Offset midpoint, Offset a2, Offset b2) {
+            this.a1 = a1;
+            this.b1 = b1;
+            this.midpoint = midpoint;
+            this.a2 = a2;
+            this.b2 = b2;
+        }
+
+        @Override
+        protected double curve(double t) {
+            final boolean firstCurve = t < midpoint.dx;
+            final double scaleX = firstCurve ? midpoint.dx : 1.0 - midpoint.dx;
+            final double scaleY = firstCurve ? midpoint.dy : 1.0 - midpoint.dy;
+            final double scaledT = (t - (firstCurve ? 0.0 : midpoint.dx)) / scaleX;
+            if (firstCurve) {
+                return new Cubic(
+                        a1.dx / scaleX,
+                        a1.dy / scaleY,
+                        b1.dx / scaleX,
+                        b1.dy / scaleY
+                ).curve(scaledT) *
+                        scaleY;
+            } else {
+                return new Cubic(
+                        (a2.dx - midpoint.dx) / scaleX,
+                        (a2.dy - midpoint.dy) / scaleY,
+                        (b2.dx - midpoint.dx) / scaleX,
+                        (b2.dy - midpoint.dy) / scaleY
+                ).curve(scaledT) *
+                        scaleY +
+                        midpoint.dy;
+            }
+        }
+
+        @Override
+        public boolean equals(Object o) {
+            return o instanceof ThreePointCubic that
+                    && a1.equals(that.a1)
+                    && b1.equals(that.b1)
+                    && midpoint.equals(that.midpoint)
+                    && a2.equals(that.a2)
+                    && b2.equals(that.b2);
+        }
+
+        @Override
+        public int hashCode() {
+            return Objects.hash(a1, b1, midpoint, a2, b2);
+        }
+
+        @Override
+        public String toString() {
+            return "ThreePointCubic[a1=%s, b1=%s, midpoint=%s, a2=%s, b2=%s]".formatted(a1, b1, midpoint, a2, b2);
+        }
+    }
+
+    //endregion Curves
+
+    // region Durations
+
+    /// The short1 duration (50ms) in the Material specification.
+    public static final Duration SHORT1 = Duration.millis(50);
+
+    /// The short2 duration (100ms) in the Material specification.
+    public static final Duration SHORT2 = Duration.millis(100);
+
+    /// The short3 duration (150ms) in the Material specification.
+    public static final Duration SHORT3 = Duration.millis(150);
+
+    /// The short4 duration (200ms) in the Material specification.
+    public static final Duration SHORT4 = Duration.millis(200);
+
+    /// The medium1 duration (250ms) in the Material specification.
+    public static final Duration MEDIUM1 = Duration.millis(250);
+
+    /// The medium2 duration (300ms) in the Material specification.
+    public static final Duration MEDIUM2 = Duration.millis(300);
+
+    /// The medium3 duration (350ms) in the Material specification.
+    public static final Duration MEDIUM3 = Duration.millis(350);
+
+    /// The medium4 duration (400ms) in the Material specification.
+    public static final Duration MEDIUM4 = Duration.millis(400);
+
+    /// The long1 duration (450ms) in the Material specification.
+    public static final Duration LONG1 = Duration.millis(450);
+
+    /// The long2 duration (500ms) in the Material specification.
+    public static final Duration LONG2 = Duration.millis(500);
+
+    /// The long3 duration (550ms) in the Material specification.
+    public static final Duration LONG3 = Duration.millis(550);
+
+    /// The long4 duration (600ms) in the Material specification.
+    public static final Duration LONG4 = Duration.millis(600);
+
+    /// The extralong1 duration (700ms) in the Material specification.
+    public static final Duration EXTRA_LONG1 = Duration.millis(700);
+
+    /// The extralong2 duration (800ms) in the Material specification.
+    public static final Duration EXTRA_LONG2 = Duration.millis(800);
+
+    /// The extralong3 duration (900ms) in the Material specification.
+    public static final Duration EXTRA_LONG3 = Duration.millis(900);
+
+    /// The extralong4 duration (1000ms) in the Material specification.
+    public static final Duration EXTRA_LONG4 = Duration.millis(1000);
+
+    // endregion Durations
+
+    private Motion() {
+    }
+}
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/animation/TransitionPane.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/animation/TransitionPane.java
index f3ebe322f2..795f0b9bab 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/animation/TransitionPane.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/animation/TransitionPane.java
@@ -17,51 +17,68 @@
  */
 package org.jackhuang.hmcl.ui.animation;
 
-import javafx.animation.Timeline;
+import javafx.animation.Animation;
+import javafx.animation.Interpolator;
 import javafx.application.Platform;
 import javafx.scene.Node;
+import javafx.scene.layout.Pane;
 import javafx.scene.layout.StackPane;
 import javafx.util.Duration;
 import org.jackhuang.hmcl.ui.FXUtils;
+import org.jackhuang.hmcl.ui.construct.TabHeader;
+import org.jetbrains.annotations.Nullable;
 
-public class TransitionPane extends StackPane implements AnimationHandler {
-    private static final Duration DEFAULT_DURATION = Duration.millis(200);
+public class TransitionPane extends StackPane {
 
-    private Duration duration;
-    private Node previousNode, currentNode;
+    private Node currentNode;
 
     public TransitionPane() {
         FXUtils.setOverflowHidden(this);
     }
 
-    @Override
-    public Node getPreviousNode() {
-        return previousNode;
-    }
-
-    @Override
     public Node getCurrentNode() {
         return currentNode;
     }
 
-    @Override
-    public StackPane getCurrentRoot() {
-        return this;
+    public void bindTabHeader(TabHeader tabHeader) {
+        this.setContent(tabHeader.getSelectionModel().getSelectedItem().getNode(), ContainerAnimations.NONE);
+        FXUtils.onChange(tabHeader.getSelectionModel().selectedItemProperty(), newValue -> {
+            this.setContent(newValue.getNode(),
+                    ContainerAnimations.SLIDE_UP_FADE_IN,
+                    Motion.MEDIUM4,
+                    Motion.EASE_IN_OUT_CUBIC_EMPHASIZED
+            );
+        });
     }
 
-    @Override
-    public Duration getDuration() {
-        return duration;
+    public final void setContent(Node newView, AnimationProducer transition) {
+        setContent(newView, transition, Motion.SHORT4);
     }
 
-    public void setContent(Node newView, AnimationProducer transition) {
-        setContent(newView, transition, DEFAULT_DURATION);
+    public final void setContent(Node newView, AnimationProducer transition, Duration duration) {
+        setContent(newView, transition, duration, Motion.EASE);
     }
 
-    public void setContent(Node newView, AnimationProducer transition, Duration duration) {
-        this.duration = duration;
+    public void setContent(Node newView, AnimationProducer transition,
+                           Duration duration, Interpolator interpolator) {
+        Node previousNode;
+        if (getWidth() > 0 && getHeight() > 0) {
+            previousNode = currentNode;
+            if (previousNode == null) {
+                if (getChildren().isEmpty())
+                    previousNode = EMPTY_PANE;
+                else
+                    previousNode = getChildren().get(0);
+            }
+        } else
+            previousNode = EMPTY_PANE;
+
+        if (previousNode == newView)
+            previousNode = EMPTY_PANE;
+
+        currentNode = newView;
 
-        updateContent(newView);
+        getChildren().setAll(previousNode, currentNode);
 
         if (previousNode == EMPTY_PANE) {
             getChildren().setAll(newView);
@@ -70,15 +87,19 @@ public void setContent(Node newView, AnimationProducer transition, Duration dura
 
         if (AnimationUtils.isAnimationEnabled() && transition != ContainerAnimations.NONE) {
             setMouseTransparent(true);
-            transition.init(this);
+            transition.init(this, previousNode, getCurrentNode());
 
+            Node finalPreviousNode = previousNode;
             // runLater or "init" will not work
             Platform.runLater(() -> {
-                Timeline newAnimation = new Timeline();
-                newAnimation.getKeyFrames().setAll(transition.animate(this));
+                Animation newAnimation = transition.animate(
+                        this,
+                        finalPreviousNode,
+                        getCurrentNode(),
+                        duration, interpolator);
                 newAnimation.setOnFinished(e -> {
                     setMouseTransparent(false);
-                    getChildren().remove(previousNode);
+                    getChildren().remove(finalPreviousNode);
                 });
                 FXUtils.playAnimation(this, "transition_pane", newAnimation);
             });
@@ -87,28 +108,20 @@ public void setContent(Node newView, AnimationProducer transition, Duration dura
         }
     }
 
-    private void updateContent(Node newView) {
-        if (getWidth() > 0 && getHeight() > 0) {
-            previousNode = currentNode;
-            if (previousNode == null) {
-                if (getChildren().isEmpty())
-                    previousNode = EMPTY_PANE;
-                else
-                    previousNode = getChildren().get(0);
-            }
-        } else
-            previousNode = EMPTY_PANE;
-
-        if (previousNode == newView)
-            previousNode = EMPTY_PANE;
-
-        currentNode = newView;
+    private final EmptyPane EMPTY_PANE = new EmptyPane();
 
-        getChildren().setAll(previousNode, currentNode);
+    public static class EmptyPane extends StackPane {
     }
 
-    private final EmptyPane EMPTY_PANE = new EmptyPane();
+    public interface AnimationProducer {
+        default void init(TransitionPane container, Node previousNode, Node nextNode) {
+        }
 
-    public static class EmptyPane extends StackPane {
+        Animation animate(Pane container, Node previousNode, Node nextNode,
+                          Duration duration, Interpolator interpolator);
+
+        default @Nullable TransitionPane.AnimationProducer opposite() {
+            return null;
+        }
     }
 }
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/Navigator.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/Navigator.java
index 4ec4989929..8d639cb560 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/Navigator.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/Navigator.java
@@ -17,6 +17,7 @@
  */
 package org.jackhuang.hmcl.ui.construct;
 
+import javafx.animation.Interpolator;
 import javafx.beans.property.BooleanProperty;
 import javafx.beans.property.ObjectProperty;
 import javafx.beans.property.SimpleBooleanProperty;
@@ -26,12 +27,14 @@
 import javafx.event.EventType;
 import javafx.scene.Node;
 import javafx.scene.layout.Region;
+import javafx.util.Duration;
 import org.jackhuang.hmcl.ui.FXUtils;
-import org.jackhuang.hmcl.ui.animation.AnimationProducer;
 import org.jackhuang.hmcl.ui.animation.ContainerAnimations;
+import org.jackhuang.hmcl.ui.animation.Motion;
 import org.jackhuang.hmcl.ui.animation.TransitionPane;
 import org.jackhuang.hmcl.ui.wizard.Navigation;
 
+import java.util.Objects;
 import java.util.Optional;
 import java.util.Stack;
 
@@ -56,6 +59,10 @@ public void init(Node init) {
     }
 
     public void navigate(Node node, AnimationProducer animationProducer) {
+        navigate(node, animationProducer, Motion.SHORT4, Motion.EASE);
+    }
+
+    public void navigate(Node node, AnimationProducer animationProducer, Duration duration, Interpolator interpolator) {
         FXUtils.checkFxUserThread();
 
         if (!initialized)
@@ -75,7 +82,7 @@ public void navigate(Node node, AnimationProducer animationProducer) {
         node.fireEvent(navigating);
 
         node.getProperties().put("hmcl.navigator.animation", animationProducer);
-        setContent(node, animationProducer);
+        setContent(node, animationProducer, duration, interpolator);
 
         NavigationEvent navigated = new NavigationEvent(this, node, Navigation.NavigationDirection.NEXT, NavigationEvent.NAVIGATED);
         node.fireEvent(navigated);
@@ -113,7 +120,7 @@ public void close(Node from) {
         Node poppedNode = stack.pop();
         NavigationEvent exited = new NavigationEvent(this, poppedNode, Navigation.NavigationDirection.PREVIOUS, NavigationEvent.EXITED);
         poppedNode.fireEvent(exited);
-        if (poppedNode instanceof PageAware) ((PageAware) poppedNode).onPageHidden();
+        if (poppedNode instanceof PageAware pageAware) pageAware.onPageHidden();
 
         backable.set(canGoBack());
         Node node = stack.peek();
@@ -123,8 +130,8 @@ public void close(Node from) {
         node.fireEvent(navigating);
 
         Object obj = from.getProperties().get("hmcl.navigator.animation");
-        if (obj instanceof AnimationProducer) {
-            setContent(node, (AnimationProducer) obj);
+        if (obj instanceof AnimationProducer animationProducer) {
+            setContent(node, Objects.requireNonNullElse(animationProducer.opposite(), animationProducer));
         } else {
             setContent(node, ContainerAnimations.NONE);
         }
@@ -160,12 +167,13 @@ public int size() {
         return stack.size();
     }
 
-    public void setContent(Node content, AnimationProducer animationProducer) {
-        super.setContent(content, animationProducer);
+    @Override
+    public void setContent(Node newView, AnimationProducer transition, Duration duration, Interpolator interpolator) {
+        super.setContent(newView, transition, duration, interpolator);
 
-        if (content instanceof Region) {
-            ((Region) content).setMinSize(0, 0);
-            FXUtils.setOverflowHidden((Region) content);
+        if (newView instanceof Region region) {
+            region.setMinSize(0, 0);
+            FXUtils.setOverflowHidden(region);
         }
     }
 
@@ -181,7 +189,7 @@ public void setOnNavigated(EventHandler<NavigationEvent> onNavigated) {
         this.onNavigated.set(onNavigated);
     }
 
-    private ObjectProperty<EventHandler<NavigationEvent>> onNavigated = new SimpleObjectProperty<EventHandler<NavigationEvent>>(this, "onNavigated") {
+    private final ObjectProperty<EventHandler<NavigationEvent>> onNavigated = new SimpleObjectProperty<EventHandler<NavigationEvent>>(this, "onNavigated") {
         @Override
         protected void invalidated() {
             setEventHandler(NavigationEvent.NAVIGATED, get());
@@ -200,14 +208,14 @@ public void setOnNavigating(EventHandler<NavigationEvent> onNavigating) {
         this.onNavigating.set(onNavigating);
     }
 
-    private ObjectProperty<EventHandler<NavigationEvent>> onNavigating = new SimpleObjectProperty<EventHandler<NavigationEvent>>(this, "onNavigating") {
+    private final ObjectProperty<EventHandler<NavigationEvent>> onNavigating = new SimpleObjectProperty<EventHandler<NavigationEvent>>(this, "onNavigating") {
         @Override
         protected void invalidated() {
             setEventHandler(NavigationEvent.NAVIGATING, get());
         }
     };
 
-    public static class NavigationEvent extends Event {
+    public static final class NavigationEvent extends Event {
         public static final EventType<NavigationEvent> EXITED = new EventType<>("EXITED");
         public static final EventType<NavigationEvent> NAVIGATED = new EventType<>("NAVIGATED");
         public static final EventType<NavigationEvent> NAVIGATING = new EventType<>("NAVIGATING");
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/RipplerContainer.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/RipplerContainer.java
index 940fea3ace..fb93b0801f 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/RipplerContainer.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/RipplerContainer.java
@@ -18,7 +18,6 @@
 package org.jackhuang.hmcl.ui.construct;
 
 import com.jfoenix.controls.JFXRippler;
-import javafx.animation.Interpolator;
 import javafx.animation.Transition;
 import javafx.beans.DefaultProperty;
 import javafx.beans.InvalidationListener;
@@ -40,6 +39,7 @@
 import javafx.scene.shape.Rectangle;
 import javafx.util.Duration;
 import org.jackhuang.hmcl.ui.animation.AnimationUtils;
+import org.jackhuang.hmcl.ui.animation.Motion;
 import org.jackhuang.hmcl.util.Lang;
 
 import java.util.List;
@@ -109,7 +109,7 @@ public RipplerContainer(@NamedArg("container") Node container) {
             setOnMouseEntered(e -> new Transition() {
                 {
                     setCycleDuration(DURATION);
-                    setInterpolator(Interpolator.EASE_IN);
+                    setInterpolator(Motion.EASE_IN);
                 }
 
                 @Override
@@ -121,7 +121,7 @@ protected void interpolate(double frac) {
             setOnMouseExited(e -> new Transition() {
                 {
                     setCycleDuration(DURATION);
-                    setInterpolator(Interpolator.EASE_OUT);
+                    setInterpolator(Motion.EASE_OUT);
                 }
 
                 @Override
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TabHeader.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TabHeader.java
index 365d787fc0..c83708848d 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TabHeader.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TabHeader.java
@@ -48,8 +48,8 @@ public TabHeader(Tab<?>... tabs) {
         }
     }
 
-    private ObservableList<Tab<?>> tabs = FXCollections.observableArrayList();
-    private ObjectProperty<Side> side = new SimpleObjectProperty<>(Side.TOP);
+    private final ObservableList<Tab<?>> tabs = FXCollections.observableArrayList();
+    private final ObjectProperty<Side> side = new SimpleObjectProperty<>(Side.TOP);
 
     @Override
     public ObservableList<Tab<?>> getTabs() {
@@ -170,14 +170,14 @@ protected TabHeaderSkin(TabHeader control) {
             this.selectedTab = control.getSelectionModel().getSelectedItem();
         }
 
-        protected class HeaderContainer extends StackPane {
+        protected final class HeaderContainer extends StackPane {
             private Timeline timeline;
-            private StackPane selectedTabLine;
-            private HeadersRegion headersRegion;
-            private Scale scale = new Scale(1, 1, 0, 0);
-            private Rotate rotate = new Rotate(0, 0, 1);
-            private double selectedTabLineOffset;
-            private ObservableList<Node> binding;
+            private final StackPane selectedTabLine;
+            private final HeadersRegion headersRegion;
+            private final Scale scale = new Scale(1, 1, 0, 0);
+            private final Rotate rotate = new Rotate(0, 0, 1);
+            @SuppressWarnings({"FieldCanBeLocal", "unused"})
+            private final ObservableList<Node> binding;
 
             public HeaderContainer() {
                 getStyleClass().add("tab-header-area");
@@ -232,13 +232,12 @@ private final class HeadersRegion extends StackPane {
                     protected void invalidated() {
                         super.invalidated();
 
-                        switch (get()) {
-                            case TOP: action = new Top(); break;
-                            case BOTTOM: action = new Bottom(); break;
-                            case LEFT: action = new Left(); break;
-                            case RIGHT: action = new Right(); break;
-                            default: throw new InternalError();
-                        }
+                        action = switch (get()) {
+                            case TOP -> new Top();
+                            case BOTTOM -> new Bottom();
+                            case LEFT -> new Left();
+                            case RIGHT -> new Right();
+                        };
                     }
                 };
 
@@ -269,7 +268,7 @@ protected void layoutChildren() {
                     action.layoutChildren();
                 }
 
-                protected void animateSelectionLine() {
+                private void animateSelectionLine() {
                     action.animateSelectionLine();
                 }
 
@@ -325,7 +324,6 @@ private void runTimeline(double newTransX, double newWidth) {
                         double oldWidth = lineWidth * oldScaleX;
                         double oldTransX = selectedTabLine.getTranslateX();
                         double newScaleX = newWidth * oldScaleX / oldWidth;
-                        selectedTabLineOffset = newTransX;
                         // newTransX += offsetStart * (double)this.direction;
                         double transDiff = newTransX - oldTransX;
                         if (transDiff < 0.0D) {
@@ -465,7 +463,6 @@ private void runTimeline(double newTransY, double newHeight) {
                         double oldHeight = lineHeight * oldScaleY;
                         double oldTransY = selectedTabLine.getTranslateY();
                         double newScaleY = newHeight * oldScaleY / oldHeight;
-                        selectedTabLineOffset = newTransY;
                         // newTransY += offsetStart * (double)this.direction;
                         double transDiff = newTransY - oldTransY;
                         if (transDiff < 0.0D) {
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/Decorator.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/Decorator.java
index f0d5b1d64d..5831aeaf56 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/Decorator.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/Decorator.java
@@ -41,6 +41,7 @@
 import javafx.util.Duration;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.animation.AnimationUtils;
+import org.jackhuang.hmcl.ui.animation.Motion;
 import org.jackhuang.hmcl.ui.wizard.Navigation;
 import org.jackhuang.hmcl.util.platform.OperatingSystem;
 
@@ -82,19 +83,19 @@ public Decorator(Stage primaryStage) {
                 if (playRestoreMinimizeAnimation && !iconified) {
                     playRestoreMinimizeAnimation = false;
                     Timeline timeline = new Timeline(
-                            new KeyFrame(Duration.millis(0),
-                                    new KeyValue(this.opacityProperty(), 0, FXUtils.EASE),
-                                    new KeyValue(this.translateYProperty(), 200, FXUtils.EASE),
-                                    new KeyValue(this.scaleXProperty(), 0.4, FXUtils.EASE),
-                                    new KeyValue(this.scaleYProperty(), 0.4, FXUtils.EASE),
-                                    new KeyValue(this.scaleZProperty(), 0.4, FXUtils.EASE)
+                            new KeyFrame(Duration.ZERO,
+                                    new KeyValue(this.opacityProperty(), 0, Motion.EASE),
+                                    new KeyValue(this.translateYProperty(), 200, Motion.EASE),
+                                    new KeyValue(this.scaleXProperty(), 0.4, Motion.EASE),
+                                    new KeyValue(this.scaleYProperty(), 0.4, Motion.EASE),
+                                    new KeyValue(this.scaleZProperty(), 0.4, Motion.EASE)
                             ),
-                            new KeyFrame(Duration.millis(200),
-                                    new KeyValue(this.opacityProperty(), 1, FXUtils.EASE),
-                                    new KeyValue(this.translateYProperty(), 0, FXUtils.EASE),
-                                    new KeyValue(this.scaleXProperty(), 1, FXUtils.EASE),
-                                    new KeyValue(this.scaleYProperty(), 1, FXUtils.EASE),
-                                    new KeyValue(this.scaleZProperty(), 1, FXUtils.EASE)
+                            new KeyFrame(Motion.SHORT4,
+                                    new KeyValue(this.opacityProperty(), 1, Motion.EASE),
+                                    new KeyValue(this.translateYProperty(), 0, Motion.EASE),
+                                    new KeyValue(this.scaleXProperty(), 1, Motion.EASE),
+                                    new KeyValue(this.scaleYProperty(), 1, Motion.EASE),
+                                    new KeyValue(this.scaleZProperty(), 1, Motion.EASE)
                             )
                     );
                     timeline.play();
@@ -277,19 +278,19 @@ public void minimize() {
         if (AnimationUtils.playWindowAnimation() && OperatingSystem.CURRENT_OS != OperatingSystem.MACOS) {
             playRestoreMinimizeAnimation = true;
             Timeline timeline = new Timeline(
-                    new KeyFrame(Duration.millis(0),
-                            new KeyValue(this.opacityProperty(), 1, FXUtils.EASE),
-                            new KeyValue(this.translateYProperty(), 0, FXUtils.EASE),
-                            new KeyValue(this.scaleXProperty(), 1, FXUtils.EASE),
-                            new KeyValue(this.scaleYProperty(), 1, FXUtils.EASE),
-                            new KeyValue(this.scaleZProperty(), 1, FXUtils.EASE)
+                    new KeyFrame(Duration.ZERO,
+                            new KeyValue(this.opacityProperty(), 1, Motion.EASE),
+                            new KeyValue(this.translateYProperty(), 0, Motion.EASE),
+                            new KeyValue(this.scaleXProperty(), 1, Motion.EASE),
+                            new KeyValue(this.scaleYProperty(), 1, Motion.EASE),
+                            new KeyValue(this.scaleZProperty(), 1, Motion.EASE)
                     ),
-                    new KeyFrame(Duration.millis(200),
-                            new KeyValue(this.opacityProperty(), 0, FXUtils.EASE),
-                            new KeyValue(this.translateYProperty(), 200, FXUtils.EASE),
-                            new KeyValue(this.scaleXProperty(), 0.4, FXUtils.EASE),
-                            new KeyValue(this.scaleYProperty(), 0.4, FXUtils.EASE),
-                            new KeyValue(this.scaleZProperty(), 0.4, FXUtils.EASE)
+                    new KeyFrame(Motion.SHORT4,
+                            new KeyValue(this.opacityProperty(), 0, Motion.EASE),
+                            new KeyValue(this.translateYProperty(), 200, Motion.EASE),
+                            new KeyValue(this.scaleXProperty(), 0.4, Motion.EASE),
+                            new KeyValue(this.scaleYProperty(), 0.4, Motion.EASE),
+                            new KeyValue(this.scaleZProperty(), 0.4, Motion.EASE)
                     )
             );
             timeline.setOnFinished(event -> primaryStage.setIconified(true));
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorAnimationProducer.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorAnimationProducer.java
deleted file mode 100644
index 6a16a7fcdb..0000000000
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorAnimationProducer.java
+++ /dev/null
@@ -1,90 +0,0 @@
-/*
- * Hello Minecraft! Launcher
- * Copyright (C) 2021  huangyuhui <huanghongxun2008@126.com> and contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-package org.jackhuang.hmcl.ui.decorator;
-
-import javafx.animation.Interpolator;
-import javafx.animation.KeyFrame;
-import javafx.animation.KeyValue;
-import javafx.scene.Node;
-import javafx.util.Duration;
-import org.jackhuang.hmcl.ui.animation.AnimationHandler;
-import org.jackhuang.hmcl.ui.animation.AnimationProducer;
-import org.jackhuang.hmcl.ui.animation.TransitionPane;
-import org.jetbrains.annotations.Nullable;
-
-import java.util.ArrayList;
-import java.util.Collections;
-import java.util.List;
-
-public final class DecoratorAnimationProducer implements AnimationProducer {
-    @Override
-    public void init(AnimationHandler handler) {
-    }
-
-    @Override
-    public List<KeyFrame> animate(AnimationHandler handler) {
-        Node prev = handler.getPreviousNode();
-        Node next = handler.getCurrentNode();
-        if (prev instanceof TransitionPane.EmptyPane) {
-            return Collections.emptyList();
-        }
-
-        Duration halfDuration = handler.getDuration().divide(2);
-
-        List<KeyFrame> keyFrames = new ArrayList<>();
-
-        keyFrames.add(new KeyFrame(Duration.ZERO,
-                new KeyValue(prev.opacityProperty(), 1, Interpolator.EASE_BOTH)));
-        keyFrames.add(new KeyFrame(halfDuration,
-                new KeyValue(prev.opacityProperty(), 0, Interpolator.EASE_BOTH)));
-        if (prev instanceof DecoratorAnimatedPage) {
-            Node left = ((DecoratorAnimatedPage) prev).getLeft();
-            Node center = ((DecoratorAnimatedPage) prev).getCenter();
-
-            keyFrames.add(new KeyFrame(Duration.ZERO,
-                    new KeyValue(left.translateXProperty(), 0, Interpolator.EASE_BOTH),
-                    new KeyValue(center.translateXProperty(), 0, Interpolator.EASE_BOTH)));
-            keyFrames.add(new KeyFrame(halfDuration,
-                    new KeyValue(left.translateXProperty(), -30, Interpolator.EASE_BOTH),
-                    new KeyValue(center.translateXProperty(), 30, Interpolator.EASE_BOTH)));
-        }
-
-        keyFrames.add(new KeyFrame(halfDuration,
-                new KeyValue(next.opacityProperty(), 0, Interpolator.EASE_BOTH)));
-        keyFrames.add(new KeyFrame(handler.getDuration(),
-                new KeyValue(next.opacityProperty(), 1, Interpolator.EASE_BOTH)));
-        if (next instanceof DecoratorAnimatedPage) {
-            Node left = ((DecoratorAnimatedPage) next).getLeft();
-            Node center = ((DecoratorAnimatedPage) next).getCenter();
-
-            keyFrames.add(new KeyFrame(halfDuration,
-                    new KeyValue(left.translateXProperty(), -30, Interpolator.EASE_BOTH),
-                    new KeyValue(center.translateXProperty(), 30, Interpolator.EASE_BOTH)));
-            keyFrames.add(new KeyFrame(handler.getDuration(),
-                    new KeyValue(left.translateXProperty(), 0, Interpolator.EASE_BOTH),
-                    new KeyValue(center.translateXProperty(), 0, Interpolator.EASE_BOTH)));
-        }
-
-        return keyFrames;
-    }
-
-    @Override
-    public @Nullable AnimationProducer opposite() {
-        return null;
-    }
-}
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorController.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorController.java
index 27ff5bccf0..1d34d0da4d 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorController.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorController.java
@@ -19,6 +19,7 @@
 
 import com.jfoenix.controls.JFXDialog;
 import com.jfoenix.controls.JFXSnackbar;
+import javafx.animation.Interpolator;
 import javafx.animation.KeyFrame;
 import javafx.animation.KeyValue;
 import javafx.animation.Timeline;
@@ -49,8 +50,7 @@
 import org.jackhuang.hmcl.ui.Controllers;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.account.AddAuthlibInjectorServerPane;
-import org.jackhuang.hmcl.ui.animation.AnimationUtils;
-import org.jackhuang.hmcl.ui.animation.ContainerAnimations;
+import org.jackhuang.hmcl.ui.animation.*;
 import org.jackhuang.hmcl.ui.construct.DialogAware;
 import org.jackhuang.hmcl.ui.construct.DialogCloseEvent;
 import org.jackhuang.hmcl.ui.construct.Navigator;
@@ -90,16 +90,16 @@ public DecoratorController(Stage stage, Node mainPage) {
             if (AnimationUtils.playWindowAnimation()) {
                 Timeline timeline = new Timeline(
                         new KeyFrame(Duration.millis(0),
-                                new KeyValue(decorator.opacityProperty(), 1, FXUtils.EASE),
-                                new KeyValue(decorator.scaleXProperty(), 1, FXUtils.EASE),
-                                new KeyValue(decorator.scaleYProperty(), 1, FXUtils.EASE),
-                                new KeyValue(decorator.scaleZProperty(), 0.3, FXUtils.EASE)
+                                new KeyValue(decorator.opacityProperty(), 1, Motion.EASE),
+                                new KeyValue(decorator.scaleXProperty(), 1, Motion.EASE),
+                                new KeyValue(decorator.scaleYProperty(), 1, Motion.EASE),
+                                new KeyValue(decorator.scaleZProperty(), 0.3, Motion.EASE)
                         ),
                         new KeyFrame(Duration.millis(200),
-                                new KeyValue(decorator.opacityProperty(), 0, FXUtils.EASE),
-                                new KeyValue(decorator.scaleXProperty(), 0.8, FXUtils.EASE),
-                                new KeyValue(decorator.scaleYProperty(), 0.8, FXUtils.EASE),
-                                new KeyValue(decorator.scaleZProperty(), 0.8, FXUtils.EASE)
+                                new KeyValue(decorator.opacityProperty(), 0, Motion.EASE),
+                                new KeyValue(decorator.scaleXProperty(), 0.8, Motion.EASE),
+                                new KeyValue(decorator.scaleYProperty(), 0.8, Motion.EASE),
+                                new KeyValue(decorator.scaleZProperty(), 0.8, Motion.EASE)
                         )
                 );
                 timeline.setOnFinished(event -> Launcher.stopApplication());
@@ -364,10 +364,57 @@ private Image loadDefaultBackgroundImage() {
 
     // ==== Navigation ====
 
-    private static final DecoratorAnimationProducer animation = new DecoratorAnimationProducer();
+    private static final TransitionPane.AnimationProducer ANIMATION = (Pane container,
+                                                                       Node previousNode, Node nextNode,
+                                                                       Duration duration,
+                                                                       Interpolator interpolator) -> {
+        Timeline timeline = new Timeline();
+        if (previousNode instanceof TransitionPane.EmptyPane) {
+            return timeline;
+        }
+
+        Duration halfDuration = duration.divide(2);
+
+        List<KeyFrame> keyFrames = new ArrayList<>();
+
+        keyFrames.add(new KeyFrame(Duration.ZERO,
+                new KeyValue(previousNode.opacityProperty(), 1, interpolator)));
+        keyFrames.add(new KeyFrame(halfDuration,
+                new KeyValue(previousNode.opacityProperty(), 0, interpolator)));
+        if (previousNode instanceof DecoratorAnimatedPage prevPage) {
+            Node left = prevPage.getLeft();
+            Node center = prevPage.getCenter();
+
+            keyFrames.add(new KeyFrame(Duration.ZERO,
+                    new KeyValue(left.translateXProperty(), 0, interpolator),
+                    new KeyValue(center.translateXProperty(), 0, interpolator)));
+            keyFrames.add(new KeyFrame(halfDuration,
+                    new KeyValue(left.translateXProperty(), -30, interpolator),
+                    new KeyValue(center.translateXProperty(), 30, interpolator)));
+        }
+
+        keyFrames.add(new KeyFrame(halfDuration,
+                new KeyValue(nextNode.opacityProperty(), 0, interpolator)));
+        keyFrames.add(new KeyFrame(duration,
+                new KeyValue(nextNode.opacityProperty(), 1, interpolator)));
+        if (nextNode instanceof DecoratorAnimatedPage nextPage) {
+            Node left = nextPage.getLeft();
+            Node center = nextPage.getCenter();
+
+            keyFrames.add(new KeyFrame(halfDuration,
+                    new KeyValue(left.translateXProperty(), -30, interpolator),
+                    new KeyValue(center.translateXProperty(), 30, interpolator)));
+            keyFrames.add(new KeyFrame(duration,
+                    new KeyValue(left.translateXProperty(), 0, interpolator),
+                    new KeyValue(center.translateXProperty(), 0, interpolator)));
+        }
+
+        timeline.getKeyFrames().setAll(keyFrames);
+        return timeline;
+    };
 
     public void navigate(Node node) {
-        navigator.navigate(node, animation);
+        navigator.navigate(node, ANIMATION);
     }
 
     private void close() {
@@ -458,7 +505,9 @@ public void showDialog(Node node) {
                 Platform.runLater(() -> showDialog(node));
                 return;
             }
-            dialog = new JFXDialog();
+            dialog = new JFXDialog(AnimationUtils.isAnimationEnabled()
+                    ? JFXDialog.DialogTransition.CENTER
+                    : JFXDialog.DialogTransition.NONE);
             dialogPane = new JFXDialogPane();
 
             dialog.setContent(dialogPane);
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorNavigatorPage.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorNavigatorPage.java
deleted file mode 100644
index 7f0c861154..0000000000
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorNavigatorPage.java
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
- * Hello Minecraft! Launcher
- * Copyright (C) 2020  huangyuhui <huanghongxun2008@126.com> and contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-package org.jackhuang.hmcl.ui.decorator;
-
-import javafx.scene.Node;
-import org.jackhuang.hmcl.ui.animation.AnimationProducer;
-import org.jackhuang.hmcl.ui.construct.Navigator;
-
-public abstract class DecoratorNavigatorPage extends DecoratorTransitionPage {
-    protected final Navigator navigator = new Navigator();
-
-    {
-        this.navigator.setOnNavigating(this::onNavigating);
-        this.navigator.setOnNavigated(this::onNavigated);
-        backableProperty().bind(navigator.backableProperty());
-    }
-
-    @Override
-    protected void navigate(Node page, AnimationProducer animationProducer) {
-        navigator.navigate(page, animationProducer);
-    }
-
-    @Override
-    public boolean back() {
-        if (navigator.canGoBack()) {
-            navigator.close();
-            return false;
-        } else {
-            return true;
-        }
-    }
-
-    private void onNavigating(Navigator.NavigationEvent event) {
-        if (event.getSource() != this.navigator) return;
-        onNavigating(event.getNode());
-    }
-
-    private void onNavigated(Navigator.NavigationEvent event) {
-        if (event.getSource() != this.navigator) return;
-        onNavigated(event.getNode());
-    }
-}
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorSkin.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorSkin.java
index a4a5be60f6..af3cd22386 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorSkin.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorSkin.java
@@ -18,6 +18,10 @@
 package org.jackhuang.hmcl.ui.decorator;
 
 import com.jfoenix.controls.JFXButton;
+import javafx.animation.Interpolator;
+import javafx.animation.KeyFrame;
+import javafx.animation.KeyValue;
+import javafx.animation.Timeline;
 import javafx.beans.InvalidationListener;
 import javafx.beans.WeakInvalidationListener;
 import javafx.beans.binding.Bindings;
@@ -39,12 +43,13 @@
 import javafx.scene.shape.Rectangle;
 import javafx.stage.Stage;
 
+import javafx.util.Duration;
 import org.jackhuang.hmcl.Metadata;
 import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
-import org.jackhuang.hmcl.ui.animation.AnimationProducer;
 import org.jackhuang.hmcl.ui.animation.ContainerAnimations;
+import org.jackhuang.hmcl.ui.animation.Motion;
 import org.jackhuang.hmcl.ui.animation.TransitionPane;
 import org.jackhuang.hmcl.ui.wizard.Navigation;
 import org.jackhuang.hmcl.util.platform.OperatingSystem;
@@ -205,16 +210,13 @@ public DecoratorSkin(Decorator control) {
                 if (s == null) return;
                 Node node = createNavBar(skinnable, s.getLeftPaneWidth(), s.isBackable(), skinnable.canCloseProperty().get(), skinnable.showCloseAsHomeProperty().get(), s.isRefreshable(), s.getTitle(), s.getTitleNode());
                 if (s.isAnimate()) {
-                    AnimationProducer animation;
-                    if (skinnable.getNavigationDirection() == Navigation.NavigationDirection.NEXT) {
-                        animation = ContainerAnimations.SWIPE_LEFT_FADE_SHORT;
-                    } else if (skinnable.getNavigationDirection() == Navigation.NavigationDirection.PREVIOUS) {
-                        animation = ContainerAnimations.SWIPE_RIGHT_FADE_SHORT;
-                    } else {
-                        animation = ContainerAnimations.FADE;
-                    }
+                    TransitionPane.AnimationProducer animation = switch (skinnable.getNavigationDirection()) {
+                        case NEXT -> NavBarAnimations.NEXT;
+                        case PREVIOUS -> NavBarAnimations.PREVIOUS;
+                        default -> ContainerAnimations.FADE;
+                    };
                     skinnable.setNavigationDirection(Navigation.NavigationDirection.START);
-                    navBarPane.setContent(node, animation);
+                    navBarPane.setContent(node, animation, Motion.SHORT4);
                 } else {
                     navBarPane.getChildren().setAll(node);
                 }
@@ -500,4 +502,78 @@ private void onMouseDragged(MouseEvent mouseEvent) {
             }
         }
     }
+
+    enum NavBarAnimations implements TransitionPane.AnimationProducer {
+        NEXT {
+            @Override
+            public void init(TransitionPane container, Node previousNode, Node nextNode) {
+                previousNode.setScaleX(1);
+                previousNode.setScaleY(1);
+                previousNode.setOpacity(0);
+                previousNode.setTranslateX(0);
+                nextNode.setScaleX(1);
+                nextNode.setScaleY(1);
+                nextNode.setOpacity(1);
+                nextNode.setTranslateX(container.getWidth());
+            }
+
+            @Override
+            public Timeline animate(
+                    Pane container, Node previousNode, Node nextNode,
+                    Duration duration, Interpolator interpolator) {
+                return new Timeline(
+                        new KeyFrame(Duration.ZERO,
+                                new KeyValue(nextNode.translateXProperty(), 50, interpolator),
+                                new KeyValue(previousNode.translateXProperty(), 0, interpolator),
+                                new KeyValue(nextNode.opacityProperty(), 0, interpolator),
+                                new KeyValue(previousNode.opacityProperty(), 1, interpolator)),
+                        new KeyFrame(duration,
+                                new KeyValue(nextNode.translateXProperty(), 0, interpolator),
+                                new KeyValue(previousNode.translateXProperty(), -50, interpolator),
+                                new KeyValue(nextNode.opacityProperty(), 1, interpolator),
+                                new KeyValue(previousNode.opacityProperty(), 0, interpolator))
+                );
+            }
+
+            @Override
+            public TransitionPane.AnimationProducer opposite() {
+                return NEXT;
+            }
+        },
+
+        PREVIOUS {
+            @Override
+            public void init(TransitionPane container, Node previousNode, Node nextNode) {
+                previousNode.setScaleX(1);
+                previousNode.setScaleY(1);
+                previousNode.setOpacity(1);
+                previousNode.setTranslateX(0);
+                nextNode.setScaleX(1);
+                nextNode.setScaleY(1);
+                nextNode.setOpacity(0);
+                nextNode.setTranslateX(container.getWidth());
+            }
+
+            @Override
+            public Timeline animate(Pane container, Node previousNode, Node nextNode, Duration duration, Interpolator interpolator) {
+                return new Timeline(
+                        new KeyFrame(Duration.ZERO,
+                                new KeyValue(nextNode.translateXProperty(), -50, interpolator),
+                                new KeyValue(previousNode.translateXProperty(), 0, interpolator),
+                                new KeyValue(nextNode.opacityProperty(), 0, interpolator),
+                                new KeyValue(previousNode.opacityProperty(), 1, interpolator)),
+                        new KeyFrame(duration,
+                                new KeyValue(nextNode.translateXProperty(), 0, interpolator),
+                                new KeyValue(previousNode.translateXProperty(), 50, interpolator),
+                                new KeyValue(nextNode.opacityProperty(), 1, interpolator),
+                                new KeyValue(previousNode.opacityProperty(), 0, interpolator))
+                );
+            }
+
+            @Override
+            public TransitionPane.AnimationProducer opposite() {
+                return PREVIOUS;
+            }
+        };
+    }
 }
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorTabPage.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorTabPage.java
deleted file mode 100644
index e7cf6b0339..0000000000
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorTabPage.java
+++ /dev/null
@@ -1,73 +0,0 @@
-/*
- * Hello Minecraft! Launcher
- * Copyright (C) 2020  huangyuhui <huanghongxun2008@126.com> and contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-package org.jackhuang.hmcl.ui.decorator;
-
-import javafx.beans.property.ObjectProperty;
-import javafx.beans.property.SimpleObjectProperty;
-import javafx.collections.FXCollections;
-import javafx.collections.ObservableList;
-import javafx.scene.control.SingleSelectionModel;
-import org.jackhuang.hmcl.ui.animation.ContainerAnimations;
-import org.jackhuang.hmcl.ui.construct.Navigator;
-import org.jackhuang.hmcl.ui.construct.TabControl;
-import org.jackhuang.hmcl.ui.construct.TabHeader;
-import org.jackhuang.hmcl.ui.wizard.Navigation;
-
-public abstract class DecoratorTabPage extends DecoratorTransitionPage implements TabControl {
-
-    public DecoratorTabPage() {
-        getSelectionModel().selectedItemProperty().addListener((a, b, newValue) -> {
-            newValue.initializeIfNeeded();
-            if (newValue.getNode() != null) {
-                onNavigating(getCurrentPage());
-                if (getCurrentPage() != null) getCurrentPage().fireEvent(new Navigator.NavigationEvent(null, getCurrentPage(), Navigation.NavigationDirection.NEXT, Navigator.NavigationEvent.NAVIGATING));
-                navigate(newValue.getNode(), ContainerAnimations.FADE);
-                onNavigated(getCurrentPage());
-                if (getCurrentPage() != null) getCurrentPage().fireEvent(new Navigator.NavigationEvent(null, getCurrentPage(), Navigation.NavigationDirection.NEXT, Navigator.NavigationEvent.NAVIGATED));
-            }
-        });
-    }
-
-    public DecoratorTabPage(TabHeader.Tab<?>... tabs) {
-        this();
-        if (tabs != null) {
-            getTabs().addAll(tabs);
-        }
-    }
-
-    private ObservableList<TabHeader.Tab<?>> tabs = FXCollections.observableArrayList();
-
-    @Override
-    public ObservableList<TabHeader.Tab<?>> getTabs() {
-        return tabs;
-    }
-
-    private final ObjectProperty<SingleSelectionModel<TabHeader.Tab<?>>> selectionModel = new SimpleObjectProperty<>(this, "selectionModel", new TabControl.TabControlSelectionModel(this));
-
-    public SingleSelectionModel<TabHeader.Tab<?>> getSelectionModel() {
-        return selectionModel.get();
-    }
-
-    public ObjectProperty<SingleSelectionModel<TabHeader.Tab<?>>> selectionModelProperty() {
-        return selectionModel;
-    }
-
-    public void setSelectionModel(SingleSelectionModel<TabHeader.Tab<?>> selectionModel) {
-        this.selectionModel.set(selectionModel);
-    }
-}
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorTransitionPage.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorTransitionPage.java
index 58b3ef42da..ed1686a124 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorTransitionPage.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorTransitionPage.java
@@ -17,6 +17,7 @@
  */
 package org.jackhuang.hmcl.ui.decorator;
 
+import javafx.animation.Interpolator;
 import javafx.beans.binding.Bindings;
 import javafx.beans.property.*;
 import javafx.scene.Node;
@@ -24,7 +25,7 @@
 import javafx.scene.control.Skin;
 import javafx.scene.layout.Region;
 import javafx.scene.layout.StackPane;
-import org.jackhuang.hmcl.ui.animation.AnimationProducer;
+import javafx.util.Duration;
 import org.jackhuang.hmcl.ui.animation.TransitionPane;
 import org.jackhuang.hmcl.ui.wizard.Refreshable;
 
@@ -36,8 +37,8 @@ public abstract class DecoratorTransitionPage extends Control implements Decorat
     private Node currentPage;
     protected final TransitionPane transitionPane = new TransitionPane();
 
-    protected void navigate(Node page, AnimationProducer animation) {
-        transitionPane.setContent(currentPage = page, animation);
+    protected void navigate(Node page, TransitionPane.AnimationProducer animation, Duration duration, Interpolator interpolator) {
+        transitionPane.setContent(currentPage = page, animation, duration, interpolator);
     }
 
     protected void onNavigating(Node from) {
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorWizardDisplayer.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorWizardDisplayer.java
index ff5edc34fd..742e6afeae 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorWizardDisplayer.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorWizardDisplayer.java
@@ -20,6 +20,7 @@
 import javafx.scene.Node;
 import javafx.scene.control.SkinBase;
 import org.jackhuang.hmcl.task.Task;
+import org.jackhuang.hmcl.ui.animation.Motion;
 import org.jackhuang.hmcl.ui.construct.Navigator;
 import org.jackhuang.hmcl.ui.construct.PageCloseEvent;
 import org.jackhuang.hmcl.ui.wizard.*;
@@ -74,7 +75,7 @@ public void onEnd() {
     @Override
     public void navigateTo(Node page, Navigation.NavigationDirection nav) {
         displayer.navigateTo(page, nav);
-        navigate(page, nav.getAnimation());
+        navigate(page, nav.getAnimation(), Motion.SHORT4, Motion.EASE);
 
         String prefix = category == null ? "" : category + " - ";
 
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/download/AbstractInstallersPage.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/download/AbstractInstallersPage.java
index 237e1f2b21..d187876734 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/download/AbstractInstallersPage.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/download/AbstractInstallersPage.java
@@ -33,6 +33,7 @@
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.InstallerItem;
 import org.jackhuang.hmcl.ui.construct.MessageDialogPane;
+import org.jackhuang.hmcl.ui.wizard.Navigation;
 import org.jackhuang.hmcl.ui.wizard.WizardController;
 import org.jackhuang.hmcl.ui.wizard.WizardPage;
 import org.jackhuang.hmcl.util.SettingsMap;
@@ -60,7 +61,16 @@ public AbstractInstallersPage(WizardController controller, String gameVersion, D
                 }
 
                 if (!(library.resolvedStateProperty().get() instanceof InstallerItem.IncompatibleState))
-                    controller.onNext(new VersionsPage(controller, i18n("install.installer.choose", i18n("install.installer." + libraryId)), gameVersion, downloadProvider, libraryId, () -> controller.onPrev(false)));
+                    controller.onNext(
+                            new VersionsPage(
+                                    controller,
+                                    i18n("install.installer.choose", i18n("install.installer." + libraryId)),
+                                    gameVersion,
+                                    downloadProvider,
+                                    libraryId,
+                                    () -> controller.onPrev(false, Navigation.NavigationDirection.NEXT)
+                            ), Navigation.NavigationDirection.NEXT
+                    );
             });
             library.setOnRemove(() -> {
                 controller.getSettings().remove(libraryId);
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/download/DownloadPage.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/download/DownloadPage.java
index e70a191308..7291495b4f 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/download/DownloadPage.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/download/DownloadPage.java
@@ -36,7 +36,6 @@
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
 import org.jackhuang.hmcl.ui.WeakListenerHolder;
-import org.jackhuang.hmcl.ui.animation.ContainerAnimations;
 import org.jackhuang.hmcl.ui.animation.TransitionPane;
 import org.jackhuang.hmcl.ui.construct.AdvancedListBox;
 import org.jackhuang.hmcl.ui.construct.MessageDialogPane;
@@ -105,9 +104,7 @@ public DownloadPage(String uploadVersion) {
         Profiles.registerVersionsListener(this::loadVersions);
 
         tab.select(newGameTab);
-        FXUtils.onChangeAndOperate(tab.getSelectionModel().selectedItemProperty(), newValue -> {
-            transitionPane.setContent(newValue.getNode(), ContainerAnimations.FADE);
-        });
+        transitionPane.bindTabHeader(tab);
 
         AdvancedListBox sideBar = new AdvancedListBox()
                 .startCategory(i18n("download.game").toUpperCase(Locale.ROOT))
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/main/LauncherSettingsPage.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/main/LauncherSettingsPage.java
index d2f6a5f70e..ffea66e1a3 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/main/LauncherSettingsPage.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/main/LauncherSettingsPage.java
@@ -23,7 +23,6 @@
 import org.jackhuang.hmcl.setting.Profiles;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
-import org.jackhuang.hmcl.ui.animation.ContainerAnimations;
 import org.jackhuang.hmcl.ui.animation.TransitionPane;
 import org.jackhuang.hmcl.ui.construct.*;
 import org.jackhuang.hmcl.ui.decorator.DecoratorAnimatedPage;
@@ -60,10 +59,7 @@ public LauncherSettingsPage() {
 
         tab.select(gameTab);
         addEventHandler(Navigator.NavigationEvent.NAVIGATED, event -> gameTab.getNode().loadVersion(Profiles.getSelectedProfile(), null));
-        transitionPane.setContent(gameTab.getNode(), ContainerAnimations.NONE);
-        FXUtils.onChange(tab.getSelectionModel().selectedItemProperty(), newValue -> {
-            transitionPane.setContent(newValue.getNode(), ContainerAnimations.FADE);
-        });
+        transitionPane.bindTabHeader(tab);
 
         AdvancedListBox sideBar = new AdvancedListBox()
                 .addNavigationDrawerTab(tab, gameTab, i18n("settings.type.global.manage"), SVG.STADIA_CONTROLLER)
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/terracotta/TerracottaControllerPage.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/terracotta/TerracottaControllerPage.java
index d96988a000..50e0944d43 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/terracotta/TerracottaControllerPage.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/terracotta/TerracottaControllerPage.java
@@ -535,7 +535,7 @@ public TerracottaControllerPage() {
                 children.addAll(nodesProperty);
             }
 
-            transition.setContent(components, ContainerAnimations.SWIPE_LEFT_FADE_SHORT);
+            transition.setContent(components, ContainerAnimations.SLIDE_UP_FADE_IN);
         };
         listener.changed(UI_STATE, null, UI_STATE.get());
         holder.add(listener);
@@ -718,7 +718,7 @@ private void updateProfiles(List<TerracottaProfile> profiles) {
                 pane.getChildren().add(item);
             }
 
-            this.transition.setContent(pane, ContainerAnimations.SWIPE_LEFT_FADE_SHORT);
+            this.transition.setContent(pane, ContainerAnimations.SLIDE_UP_FADE_IN);
         }
     }
 }
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/terracotta/TerracottaPage.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/terracotta/TerracottaPage.java
index 853a6a50fe..478e2733d6 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/terracotta/TerracottaPage.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/terracotta/TerracottaPage.java
@@ -31,7 +31,6 @@
 import org.jackhuang.hmcl.ui.Controllers;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
-import org.jackhuang.hmcl.ui.animation.ContainerAnimations;
 import org.jackhuang.hmcl.ui.animation.TransitionPane;
 import org.jackhuang.hmcl.ui.construct.AdvancedListBox;
 import org.jackhuang.hmcl.ui.construct.PageAware;
@@ -58,11 +57,7 @@ public TerracottaPage() {
         statusPage.setNodeSupplier(TerracottaControllerPage::new);
         tab = new TabHeader(statusPage);
         tab.select(statusPage);
-
-        transitionPane.setContent(statusPage.getNode(), ContainerAnimations.NONE);
-        FXUtils.onChange(tab.getSelectionModel().selectedItemProperty(), newValue -> {
-            transitionPane.setContent(newValue.getNode(), ContainerAnimations.FADE);
-        });
+        transitionPane.bindTabHeader(tab);
 
         BorderPane left = new BorderPane();
         FXUtils.setLimitWidth(left, 200);
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/VersionPage.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/VersionPage.java
index 177e7c82dd..b37e0c24b6 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/VersionPage.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/VersionPage.java
@@ -37,7 +37,6 @@
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
 import org.jackhuang.hmcl.ui.WeakListenerHolder;
-import org.jackhuang.hmcl.ui.animation.ContainerAnimations;
 import org.jackhuang.hmcl.ui.animation.TransitionPane;
 import org.jackhuang.hmcl.ui.construct.*;
 import org.jackhuang.hmcl.ui.decorator.DecoratorAnimatedPage;
@@ -77,10 +76,7 @@ public VersionPage() {
         addEventHandler(Navigator.NavigationEvent.NAVIGATED, this::onNavigated);
 
         tab.select(versionSettingsTab);
-        transitionPane.setContent(versionSettingsTab.getNode(), ContainerAnimations.NONE);
-        FXUtils.onChange(tab.getSelectionModel().selectedItemProperty(), newValue -> {
-            transitionPane.setContent(newValue.getNode(), ContainerAnimations.FADE);
-        });
+        transitionPane.bindTabHeader(tab);
 
         listenerHolder.add(EventBus.EVENT_BUS.channel(RefreshedVersionsEvent.class).registerWeak(event -> checkSelectedVersion(), EventPriority.HIGHEST));
     }
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/WorldManagePage.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/WorldManagePage.java
index f99faa459b..40c77fc96e 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/WorldManagePage.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/WorldManagePage.java
@@ -28,7 +28,6 @@
 import org.jackhuang.hmcl.game.World;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
-import org.jackhuang.hmcl.ui.animation.ContainerAnimations;
 import org.jackhuang.hmcl.ui.animation.TransitionPane;
 import org.jackhuang.hmcl.ui.construct.*;
 import org.jackhuang.hmcl.ui.decorator.DecoratorAnimatedPage;
@@ -73,9 +72,8 @@ public WorldManagePage(World world, Path backupsDir) {
         datapackTab.setNodeSupplier(() -> new DatapackListPage(this));
 
         header.select(worldInfoTab);
-        transitionPane.setContent(worldInfoTab.getNode(), ContainerAnimations.NONE);
-        FXUtils.onChange(header.getSelectionModel().selectedItemProperty(), newValue ->
-                transitionPane.setContent(newValue.getNode(), ContainerAnimations.FADE));
+        transitionPane.bindTabHeader(header);
+
         setCenter(transitionPane);
 
         BorderPane left = new BorderPane();
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/wizard/Navigation.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/wizard/Navigation.java
index a99f5aac02..ca787cf1db 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/wizard/Navigation.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/wizard/Navigation.java
@@ -40,11 +40,9 @@ public interface Navigation {
 
     enum NavigationDirection {
         START(ContainerAnimations.NONE),
-        PREVIOUS(ContainerAnimations.SWIPE_RIGHT),
-        NEXT(ContainerAnimations.SWIPE_LEFT),
-        FINISH(ContainerAnimations.SWIPE_LEFT),
-        IN(ContainerAnimations.ZOOM_IN),
-        OUT(ContainerAnimations.ZOOM_OUT);
+        PREVIOUS(ContainerAnimations.BACKWARD),
+        NEXT(ContainerAnimations.FORWARD),
+        FINISH(ContainerAnimations.FORWARD);
 
         private final ContainerAnimations animation;
 
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/wizard/WizardController.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/wizard/WizardController.java
index b7b8a56c1d..c1a0b0bf28 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/wizard/WizardController.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/wizard/WizardController.java
@@ -83,6 +83,10 @@ public void onNext() {
     }
 
     public void onNext(Node page) {
+        onNext(page, NavigationDirection.NEXT);
+    }
+
+    public void onNext(Node page, NavigationDirection direction) {
         pages.push(page);
 
         if (stopped) { // navigatingTo may stop this wizard.
@@ -93,11 +97,15 @@ public void onNext(Node page) {
             ((WizardPage) page).onNavigate(settings);
 
         LOG.info("Navigating to " + page + ", pages: " + pages);
-        displayer.navigateTo(page, NavigationDirection.NEXT);
+        displayer.navigateTo(page, direction);
     }
 
     @Override
     public void onPrev(boolean cleanUp) {
+        onPrev(cleanUp, NavigationDirection.PREVIOUS);
+    }
+
+    public void onPrev(boolean cleanUp, NavigationDirection direction) {
         if (!canPrev()) {
             if (provider.cancelIfCannotGoBack()) {
                 onCancel();
@@ -116,7 +124,7 @@ public void onPrev(boolean cleanUp) {
             ((WizardPage) prevPage).onNavigate(settings);
 
         LOG.info("Navigating to " + prevPage + ", pages: " + pages);
-        displayer.navigateTo(prevPage, NavigationDirection.PREVIOUS);
+        displayer.navigateTo(prevPage, direction);
     }
 
     @Override

From d53c9f06435b18f96af5e516d24d50e1e0089624 Mon Sep 17 00:00:00 2001
From: mine_ <mine_yaoym@outlook.com>
Date: Fri, 14 Nov 2025 20:14:09 +0800
Subject: [PATCH 06/12] =?UTF-8?q?feat:=E4=BC=98=E5=8C=96TwoLineListItem?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/construct/IconedTwoLineListItem.java   | 10 +--
 .../hmcl/ui/construct/TwoLineListItem.java    | 81 ++++++++++++-------
 .../hmcl/ui/versions/ModListPageSkin.java     |  2 +-
 3 files changed, 56 insertions(+), 37 deletions(-)

diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/IconedTwoLineListItem.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/IconedTwoLineListItem.java
index 3687dfea7a..69a8f95ce6 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/IconedTwoLineListItem.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/IconedTwoLineListItem.java
@@ -2,15 +2,11 @@
 
 import com.jfoenix.controls.JFXButton;
 import javafx.beans.InvalidationListener;
-import javafx.beans.binding.Bindings;
 import javafx.beans.property.ObjectProperty;
 import javafx.beans.property.SimpleObjectProperty;
 import javafx.beans.property.SimpleStringProperty;
 import javafx.beans.property.StringProperty;
-import javafx.collections.FXCollections;
-import javafx.collections.ObservableList;
 import javafx.geometry.Pos;
-import javafx.scene.control.Label;
 import javafx.scene.image.Image;
 import javafx.scene.image.ImageView;
 import javafx.scene.layout.HBox;
@@ -22,7 +18,6 @@
 
 public class IconedTwoLineListItem extends HBox {
     private final StringProperty title = new SimpleStringProperty(this, "title");
-    private final ObservableList<Label> tags = FXCollections.observableArrayList();
     private final StringProperty subtitle = new SimpleStringProperty(this, "subtitle");
     private final StringProperty externalLink = new SimpleStringProperty(this, "externalLink");
     private final ObjectProperty<Image> image = new SimpleObjectProperty<>(this, "image");
@@ -41,7 +36,6 @@ public IconedTwoLineListItem() {
         twoLineListItem.titleProperty().bind(title);
         twoLineListItem.subtitleProperty().bind(subtitle);
         HBox.setHgrow(twoLineListItem, Priority.ALWAYS);
-        Bindings.bindContent(twoLineListItem.getTags(), tags);
 
         observer = FXUtils.observeWeak(() -> {
             getChildren().clear();
@@ -63,8 +57,8 @@ public void setTitle(String title) {
         this.title.set(title);
     }
 
-    public ObservableList<Label> getTags() {
-        return tags;
+    public void addTags(String tag) {
+        twoLineListItem.addTag(tag);
     }
 
     public String getSubtitle() {
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
index fffe57e7ad..5369ac39cb 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
@@ -17,13 +17,10 @@
  */
 package org.jackhuang.hmcl.ui.construct;
 
-import javafx.beans.InvalidationListener;
 import javafx.beans.binding.Bindings;
-import javafx.beans.property.IntegerProperty;
-import javafx.beans.property.SimpleIntegerProperty;
-import javafx.beans.property.SimpleStringProperty;
-import javafx.beans.property.StringProperty;
+import javafx.beans.property.*;
 import javafx.collections.FXCollections;
+import javafx.collections.ListChangeListener;
 import javafx.collections.ObservableList;
 import javafx.geometry.Insets;
 import javafx.scene.Node;
@@ -41,20 +38,12 @@ public class TwoLineListItem extends VBox {
     private static final String DEFAULT_STYLE_CLASS = "two-line-list-item";
     private static final int UNLIMITED_TAGS = -1;
 
-    private static Label createTagLabel(String tag, String StyleClass) {
-        Label tagLabel = FXUtils.newSafeTruncatedLabel(tag);
-        HBox.setMargin(tagLabel, new Insets(0, 6, 0, 0));
-        tagLabel.getStyleClass().add(StyleClass);
-        return tagLabel;
-    }
-
     private final StringProperty title = new SimpleStringProperty(this, "title");
-    private final ObservableList<Label> allTags = FXCollections.observableArrayList();
+    private final ReadOnlyListWrapper<Tag> allTags = new ReadOnlyListWrapper<>(this, "allTags", FXCollections.observableArrayList());
     private final ObservableList<Label> shownTags = FXCollections.observableArrayList();
     private final StringProperty subtitle = new SimpleStringProperty(this, "subtitle");
 
-    private IntegerProperty maxShownTags = new SimpleIntegerProperty(UNLIMITED_TAGS);
-    private boolean updateScheduled = false;
+    private final IntegerProperty maxShownTags = new SimpleIntegerProperty(UNLIMITED_TAGS);
 
     private final AggregatedObservableList<Node> firstLineChildren;
 
@@ -80,8 +69,8 @@ public TwoLineListItem() {
         firstLineChildren = new AggregatedObservableList<>();
         firstLineChildren.appendList(FXCollections.singletonObservableList(lblTitle));
         firstLineChildren.appendList(shownTags);
-        allTags.addListener((InvalidationListener) observable -> updateShownTags());
-        maxShownTags.addListener(observable -> updateShownTags());
+        allTags.addListener((ListChangeListener<? super Tag>) this::updateShownTags);
+        maxShownTags.addListener(observable -> reBuiltShownTags());
 
         Bindings.bindContent(firstLine.getChildren(), firstLineChildren.getAggregatedList());
 
@@ -103,19 +92,51 @@ public TwoLineListItem() {
         getStyleClass().add(DEFAULT_STYLE_CLASS);
     }
 
-    private void updateShownTags() {
+    private void updateShownTags(ListChangeListener.Change<? extends Tag> c) {
+        if (maxShownTags.get() == UNLIMITED_TAGS || shownTags.size() < maxShownTags.get()) {
+            while (c.next()) {
+                if (c.wasAdded()) {
+                    for (Tag tag : c.getAddedSubList()) {
+                        if (maxShownTags.get() != UNLIMITED_TAGS && shownTags.size() > maxShownTags.get()) {
+                            break;
+                        }
+                        shownTags.add(createTagLabel(tag.text, tag.styleClass));
+                    }
+                }
+            }
+        }
+        setOverflowTag();
+    }
+
+    private void reBuiltShownTags() {
         shownTags.clear();
-        if (maxShownTags.get() == UNLIMITED_TAGS || allTags.size() <= maxShownTags.get()) {
-            shownTags.addAll(allTags);
-        } else {
-            shownTags.addAll(allTags.subList(0, maxShownTags.get()));
+        for (Tag allTag : allTags) {
+            if (maxShownTags.get() != UNLIMITED_TAGS && shownTags.size() > maxShownTags.get()) {
+                break;
+            }
+            shownTags.add(createTagLabel(allTag.text, allTag.styleClass));
+        }
+        setOverflowTag();
+    }
+
+    private void setOverflowTag() {
+        if (maxShownTags.get() != UNLIMITED_TAGS && allTags.size() > maxShownTags.get()) {
             FXUtils.installFastTooltip(overflowLabel, allTags.stream().skip(maxShownTags.get())
-                    .map(Label::getText).collect(Collectors.joining("\n")));
+                    .map(Tag::text).collect(Collectors.joining("\n")));
             overflowLabel.setText(i18n("tag.overflow", (allTags.size() - maxShownTags.get())));
-            shownTags.add(overflowLabel);
+            if (!shownTags.contains(overflowLabel)) {
+                shownTags.add(overflowLabel);
+            }
         }
     }
 
+    private static Label createTagLabel(String tag, String StyleClass) {
+        Label tagLabel = FXUtils.newSafeTruncatedLabel(tag);
+        HBox.setMargin(tagLabel, new Insets(0, 6, 0, 0));
+        tagLabel.getStyleClass().add(StyleClass);
+        return tagLabel;
+    }
+
     public String getTitle() {
         return title.get();
     }
@@ -141,15 +162,15 @@ public void setSubtitle(String subtitle) {
     }
 
     public void addTag(String tag) {
-        getTags().add(createTagLabel(tag, "tag"));
+        allTags.add(new Tag(tag, "tag"));
     }
 
     public void addTagWarning(String tag) {
-        getTags().add(createTagLabel(tag, "tag-warning"));
+        allTags.add(new Tag(tag, "tag-warning"));
     }
 
-    public ObservableList<Label> getTags() {
-        return allTags;
+    public ReadOnlyListProperty<Tag> getTags() {
+        return allTags.getReadOnlyProperty();
     }
 
     public void setMaxShownTags(int maxShownTags) {
@@ -164,10 +185,14 @@ public IntegerProperty getMaxShownTags() {
 
     public void clearTags() {
         allTags.clear();
+        shownTags.clear();
     }
 
     @Override
     public String toString() {
         return getTitle();
     }
+
+    public record Tag(String text, String styleClass) {
+    }
 }
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/ModListPageSkin.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/ModListPageSkin.java
index 06f8504e97..670dd4e2c8 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/ModListPageSkin.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/ModListPageSkin.java
@@ -493,7 +493,7 @@ final class ModInfoDialog extends JFXDialogLayout {
                                     }
                                     if (title.getTags()
                                             .stream()
-                                            .noneMatch(it -> it.getText().equals(loaderName))) {
+                                            .noneMatch(it -> it.text().equals(loaderName))) {
                                         title.addTag(loaderName);
                                     }
                                 }

From 2d21ca0580dff4e4da83dbaaaafd65f78082249b Mon Sep 17 00:00:00 2001
From: mine_ <mine_yaoym@outlook.com>
Date: Fri, 14 Nov 2025 20:49:23 +0800
Subject: [PATCH 07/12] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8DPR=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/construct/IconedTwoLineListItem.java   | 10 +--
 .../hmcl/ui/construct/TwoLineListItem.java    | 81 ++++++++++++-------
 .../hmcl/ui/versions/ModListPageSkin.java     |  2 +-
 3 files changed, 56 insertions(+), 37 deletions(-)

diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/IconedTwoLineListItem.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/IconedTwoLineListItem.java
index 3687dfea7a..69a8f95ce6 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/IconedTwoLineListItem.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/IconedTwoLineListItem.java
@@ -2,15 +2,11 @@
 
 import com.jfoenix.controls.JFXButton;
 import javafx.beans.InvalidationListener;
-import javafx.beans.binding.Bindings;
 import javafx.beans.property.ObjectProperty;
 import javafx.beans.property.SimpleObjectProperty;
 import javafx.beans.property.SimpleStringProperty;
 import javafx.beans.property.StringProperty;
-import javafx.collections.FXCollections;
-import javafx.collections.ObservableList;
 import javafx.geometry.Pos;
-import javafx.scene.control.Label;
 import javafx.scene.image.Image;
 import javafx.scene.image.ImageView;
 import javafx.scene.layout.HBox;
@@ -22,7 +18,6 @@
 
 public class IconedTwoLineListItem extends HBox {
     private final StringProperty title = new SimpleStringProperty(this, "title");
-    private final ObservableList<Label> tags = FXCollections.observableArrayList();
     private final StringProperty subtitle = new SimpleStringProperty(this, "subtitle");
     private final StringProperty externalLink = new SimpleStringProperty(this, "externalLink");
     private final ObjectProperty<Image> image = new SimpleObjectProperty<>(this, "image");
@@ -41,7 +36,6 @@ public IconedTwoLineListItem() {
         twoLineListItem.titleProperty().bind(title);
         twoLineListItem.subtitleProperty().bind(subtitle);
         HBox.setHgrow(twoLineListItem, Priority.ALWAYS);
-        Bindings.bindContent(twoLineListItem.getTags(), tags);
 
         observer = FXUtils.observeWeak(() -> {
             getChildren().clear();
@@ -63,8 +57,8 @@ public void setTitle(String title) {
         this.title.set(title);
     }
 
-    public ObservableList<Label> getTags() {
-        return tags;
+    public void addTags(String tag) {
+        twoLineListItem.addTag(tag);
     }
 
     public String getSubtitle() {
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
index fffe57e7ad..5369ac39cb 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
@@ -17,13 +17,10 @@
  */
 package org.jackhuang.hmcl.ui.construct;
 
-import javafx.beans.InvalidationListener;
 import javafx.beans.binding.Bindings;
-import javafx.beans.property.IntegerProperty;
-import javafx.beans.property.SimpleIntegerProperty;
-import javafx.beans.property.SimpleStringProperty;
-import javafx.beans.property.StringProperty;
+import javafx.beans.property.*;
 import javafx.collections.FXCollections;
+import javafx.collections.ListChangeListener;
 import javafx.collections.ObservableList;
 import javafx.geometry.Insets;
 import javafx.scene.Node;
@@ -41,20 +38,12 @@ public class TwoLineListItem extends VBox {
     private static final String DEFAULT_STYLE_CLASS = "two-line-list-item";
     private static final int UNLIMITED_TAGS = -1;
 
-    private static Label createTagLabel(String tag, String StyleClass) {
-        Label tagLabel = FXUtils.newSafeTruncatedLabel(tag);
-        HBox.setMargin(tagLabel, new Insets(0, 6, 0, 0));
-        tagLabel.getStyleClass().add(StyleClass);
-        return tagLabel;
-    }
-
     private final StringProperty title = new SimpleStringProperty(this, "title");
-    private final ObservableList<Label> allTags = FXCollections.observableArrayList();
+    private final ReadOnlyListWrapper<Tag> allTags = new ReadOnlyListWrapper<>(this, "allTags", FXCollections.observableArrayList());
     private final ObservableList<Label> shownTags = FXCollections.observableArrayList();
     private final StringProperty subtitle = new SimpleStringProperty(this, "subtitle");
 
-    private IntegerProperty maxShownTags = new SimpleIntegerProperty(UNLIMITED_TAGS);
-    private boolean updateScheduled = false;
+    private final IntegerProperty maxShownTags = new SimpleIntegerProperty(UNLIMITED_TAGS);
 
     private final AggregatedObservableList<Node> firstLineChildren;
 
@@ -80,8 +69,8 @@ public TwoLineListItem() {
         firstLineChildren = new AggregatedObservableList<>();
         firstLineChildren.appendList(FXCollections.singletonObservableList(lblTitle));
         firstLineChildren.appendList(shownTags);
-        allTags.addListener((InvalidationListener) observable -> updateShownTags());
-        maxShownTags.addListener(observable -> updateShownTags());
+        allTags.addListener((ListChangeListener<? super Tag>) this::updateShownTags);
+        maxShownTags.addListener(observable -> reBuiltShownTags());
 
         Bindings.bindContent(firstLine.getChildren(), firstLineChildren.getAggregatedList());
 
@@ -103,19 +92,51 @@ public TwoLineListItem() {
         getStyleClass().add(DEFAULT_STYLE_CLASS);
     }
 
-    private void updateShownTags() {
+    private void updateShownTags(ListChangeListener.Change<? extends Tag> c) {
+        if (maxShownTags.get() == UNLIMITED_TAGS || shownTags.size() < maxShownTags.get()) {
+            while (c.next()) {
+                if (c.wasAdded()) {
+                    for (Tag tag : c.getAddedSubList()) {
+                        if (maxShownTags.get() != UNLIMITED_TAGS && shownTags.size() > maxShownTags.get()) {
+                            break;
+                        }
+                        shownTags.add(createTagLabel(tag.text, tag.styleClass));
+                    }
+                }
+            }
+        }
+        setOverflowTag();
+    }
+
+    private void reBuiltShownTags() {
         shownTags.clear();
-        if (maxShownTags.get() == UNLIMITED_TAGS || allTags.size() <= maxShownTags.get()) {
-            shownTags.addAll(allTags);
-        } else {
-            shownTags.addAll(allTags.subList(0, maxShownTags.get()));
+        for (Tag allTag : allTags) {
+            if (maxShownTags.get() != UNLIMITED_TAGS && shownTags.size() > maxShownTags.get()) {
+                break;
+            }
+            shownTags.add(createTagLabel(allTag.text, allTag.styleClass));
+        }
+        setOverflowTag();
+    }
+
+    private void setOverflowTag() {
+        if (maxShownTags.get() != UNLIMITED_TAGS && allTags.size() > maxShownTags.get()) {
             FXUtils.installFastTooltip(overflowLabel, allTags.stream().skip(maxShownTags.get())
-                    .map(Label::getText).collect(Collectors.joining("\n")));
+                    .map(Tag::text).collect(Collectors.joining("\n")));
             overflowLabel.setText(i18n("tag.overflow", (allTags.size() - maxShownTags.get())));
-            shownTags.add(overflowLabel);
+            if (!shownTags.contains(overflowLabel)) {
+                shownTags.add(overflowLabel);
+            }
         }
     }
 
+    private static Label createTagLabel(String tag, String StyleClass) {
+        Label tagLabel = FXUtils.newSafeTruncatedLabel(tag);
+        HBox.setMargin(tagLabel, new Insets(0, 6, 0, 0));
+        tagLabel.getStyleClass().add(StyleClass);
+        return tagLabel;
+    }
+
     public String getTitle() {
         return title.get();
     }
@@ -141,15 +162,15 @@ public void setSubtitle(String subtitle) {
     }
 
     public void addTag(String tag) {
-        getTags().add(createTagLabel(tag, "tag"));
+        allTags.add(new Tag(tag, "tag"));
     }
 
     public void addTagWarning(String tag) {
-        getTags().add(createTagLabel(tag, "tag-warning"));
+        allTags.add(new Tag(tag, "tag-warning"));
     }
 
-    public ObservableList<Label> getTags() {
-        return allTags;
+    public ReadOnlyListProperty<Tag> getTags() {
+        return allTags.getReadOnlyProperty();
     }
 
     public void setMaxShownTags(int maxShownTags) {
@@ -164,10 +185,14 @@ public IntegerProperty getMaxShownTags() {
 
     public void clearTags() {
         allTags.clear();
+        shownTags.clear();
     }
 
     @Override
     public String toString() {
         return getTitle();
     }
+
+    public record Tag(String text, String styleClass) {
+    }
 }
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/ModListPageSkin.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/ModListPageSkin.java
index 06f8504e97..670dd4e2c8 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/ModListPageSkin.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/ModListPageSkin.java
@@ -493,7 +493,7 @@ final class ModInfoDialog extends JFXDialogLayout {
                                     }
                                     if (title.getTags()
                                             .stream()
-                                            .noneMatch(it -> it.getText().equals(loaderName))) {
+                                            .noneMatch(it -> it.text().equals(loaderName))) {
                                         title.addTag(loaderName);
                                     }
                                 }

From b9aec1d4e97ac941d9293f06c68452f3bd413278 Mon Sep 17 00:00:00 2001
From: mine_ <mine_yaoym@outlook.com>
Date: Fri, 14 Nov 2025 21:28:07 +0800
Subject: [PATCH 08/12] =?UTF-8?q?feat:=E5=BE=AE=E8=B0=83=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E9=A1=BA=E5=BA=8F=EF=BC=8C=E4=BF=AE=E6=94=B9=E5=90=8D=E7=A7=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jackhuang/hmcl/ui/construct/TwoLineListItem.java  | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
index 5369ac39cb..34d5adcce6 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
@@ -39,14 +39,11 @@ public class TwoLineListItem extends VBox {
     private static final int UNLIMITED_TAGS = -1;
 
     private final StringProperty title = new SimpleStringProperty(this, "title");
+    private final StringProperty subtitle = new SimpleStringProperty(this, "subtitle");
     private final ReadOnlyListWrapper<Tag> allTags = new ReadOnlyListWrapper<>(this, "allTags", FXCollections.observableArrayList());
     private final ObservableList<Label> shownTags = FXCollections.observableArrayList();
-    private final StringProperty subtitle = new SimpleStringProperty(this, "subtitle");
 
     private final IntegerProperty maxShownTags = new SimpleIntegerProperty(UNLIMITED_TAGS);
-
-    private final AggregatedObservableList<Node> firstLineChildren;
-
     private final Label overflowLabel = createTagLabel("", "tag-overflow");
 
     public TwoLineListItem(String titleString, String subtitleString) {
@@ -66,11 +63,11 @@ public TwoLineListItem() {
         lblTitle.textProperty().bind(title);
         FXUtils.showTooltipWhenTruncated(lblTitle);
 
-        firstLineChildren = new AggregatedObservableList<>();
+        AggregatedObservableList<Node> firstLineChildren = new AggregatedObservableList<>();
         firstLineChildren.appendList(FXCollections.singletonObservableList(lblTitle));
         firstLineChildren.appendList(shownTags);
         allTags.addListener((ListChangeListener<? super Tag>) this::updateShownTags);
-        maxShownTags.addListener(observable -> reBuiltShownTags());
+        maxShownTags.addListener(observable -> refreshShownTags());
 
         Bindings.bindContent(firstLine.getChildren(), firstLineChildren.getAggregatedList());
 
@@ -108,7 +105,7 @@ private void updateShownTags(ListChangeListener.Change<? extends Tag> c) {
         setOverflowTag();
     }
 
-    private void reBuiltShownTags() {
+    private void refreshShownTags() {
         shownTags.clear();
         for (Tag allTag : allTags) {
             if (maxShownTags.get() != UNLIMITED_TAGS && shownTags.size() > maxShownTags.get()) {

From a0dc3cb18813a103d145aa37f51505f9ff7be124 Mon Sep 17 00:00:00 2001
From: mine_ <mine_yaoym@outlook.com>
Date: Sat, 15 Nov 2025 21:17:13 +0800
Subject: [PATCH 09/12] =?UTF-8?q?feat:=E5=90=8D=E7=A7=B0=E6=9B=B4=E5=8F=AF?=
 =?UTF-8?q?=E8=AF=BB=EF=BC=8C=E4=BF=AE=E6=94=B9=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E9=BB=98=E8=AE=A4=E6=A0=87=E7=AD=BE=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hmcl/ui/construct/TwoLineListItem.java    | 66 +++++++++----------
 .../hmcl/ui/versions/DownloadListPage.java    |  2 +-
 .../hmcl/ui/versions/DownloadPage.java        |  2 +-
 3 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
index 34d5adcce6..c23a707a17 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
@@ -40,10 +40,10 @@ public class TwoLineListItem extends VBox {
 
     private final StringProperty title = new SimpleStringProperty(this, "title");
     private final StringProperty subtitle = new SimpleStringProperty(this, "subtitle");
-    private final ReadOnlyListWrapper<Tag> allTags = new ReadOnlyListWrapper<>(this, "allTags", FXCollections.observableArrayList());
-    private final ObservableList<Label> shownTags = FXCollections.observableArrayList();
+    private final ReadOnlyListWrapper<Tag> sourceTags = new ReadOnlyListWrapper<>(this, "sourceTags", FXCollections.observableArrayList());
+    private final ObservableList<Label> visibleTagLabels = FXCollections.observableArrayList();
 
-    private final IntegerProperty maxShownTags = new SimpleIntegerProperty(UNLIMITED_TAGS);
+    private final IntegerProperty visibleTagLimit = new SimpleIntegerProperty(UNLIMITED_TAGS);
     private final Label overflowLabel = createTagLabel("", "tag-overflow");
 
     public TwoLineListItem(String titleString, String subtitleString) {
@@ -65,9 +65,9 @@ public TwoLineListItem() {
 
         AggregatedObservableList<Node> firstLineChildren = new AggregatedObservableList<>();
         firstLineChildren.appendList(FXCollections.singletonObservableList(lblTitle));
-        firstLineChildren.appendList(shownTags);
-        allTags.addListener((ListChangeListener<? super Tag>) this::updateShownTags);
-        maxShownTags.addListener(observable -> refreshShownTags());
+        firstLineChildren.appendList(visibleTagLabels);
+        sourceTags.addListener((ListChangeListener<? super Tag>) this::updateVisibleTagLabels);
+        visibleTagLimit.addListener(observable -> rebuildVisibleTagLabels());
 
         Bindings.bindContent(firstLine.getChildren(), firstLineChildren.getAggregatedList());
 
@@ -89,40 +89,40 @@ public TwoLineListItem() {
         getStyleClass().add(DEFAULT_STYLE_CLASS);
     }
 
-    private void updateShownTags(ListChangeListener.Change<? extends Tag> c) {
-        if (maxShownTags.get() == UNLIMITED_TAGS || shownTags.size() < maxShownTags.get()) {
+    private void updateVisibleTagLabels(ListChangeListener.Change<? extends Tag> c) {
+        if (visibleTagLimit.get() == UNLIMITED_TAGS || visibleTagLabels.size() < visibleTagLimit.get()) {
             while (c.next()) {
                 if (c.wasAdded()) {
                     for (Tag tag : c.getAddedSubList()) {
-                        if (maxShownTags.get() != UNLIMITED_TAGS && shownTags.size() > maxShownTags.get()) {
+                        if (visibleTagLimit.get() != UNLIMITED_TAGS && visibleTagLabels.size() > visibleTagLimit.get()) {
                             break;
                         }
-                        shownTags.add(createTagLabel(tag.text, tag.styleClass));
+                        visibleTagLabels.add(createTagLabel(tag.text, tag.styleClass));
                     }
                 }
             }
         }
-        setOverflowTag();
+        updateOverflowTag();
     }
 
-    private void refreshShownTags() {
-        shownTags.clear();
-        for (Tag allTag : allTags) {
-            if (maxShownTags.get() != UNLIMITED_TAGS && shownTags.size() > maxShownTags.get()) {
+    private void rebuildVisibleTagLabels() {
+        visibleTagLabels.clear();
+        for (Tag allTag : sourceTags) {
+            if (visibleTagLimit.get() != UNLIMITED_TAGS && visibleTagLabels.size() > visibleTagLimit.get()) {
                 break;
             }
-            shownTags.add(createTagLabel(allTag.text, allTag.styleClass));
+            visibleTagLabels.add(createTagLabel(allTag.text, allTag.styleClass));
         }
-        setOverflowTag();
+        updateOverflowTag();
     }
 
-    private void setOverflowTag() {
-        if (maxShownTags.get() != UNLIMITED_TAGS && allTags.size() > maxShownTags.get()) {
-            FXUtils.installFastTooltip(overflowLabel, allTags.stream().skip(maxShownTags.get())
+    private void updateOverflowTag() {
+        if (visibleTagLimit.get() != UNLIMITED_TAGS && sourceTags.size() > visibleTagLimit.get()) {
+            FXUtils.installFastTooltip(overflowLabel, sourceTags.stream().skip(visibleTagLimit.get())
                     .map(Tag::text).collect(Collectors.joining("\n")));
-            overflowLabel.setText(i18n("tag.overflow", (allTags.size() - maxShownTags.get())));
-            if (!shownTags.contains(overflowLabel)) {
-                shownTags.add(overflowLabel);
+            overflowLabel.setText(i18n("tag.overflow", (sourceTags.size() - visibleTagLimit.get())));
+            if (!visibleTagLabels.contains(overflowLabel)) {
+                visibleTagLabels.add(overflowLabel);
             }
         }
     }
@@ -159,30 +159,30 @@ public void setSubtitle(String subtitle) {
     }
 
     public void addTag(String tag) {
-        allTags.add(new Tag(tag, "tag"));
+        sourceTags.add(new Tag(tag, "tag"));
     }
 
     public void addTagWarning(String tag) {
-        allTags.add(new Tag(tag, "tag-warning"));
+        sourceTags.add(new Tag(tag, "tag-warning"));
     }
 
     public ReadOnlyListProperty<Tag> getTags() {
-        return allTags.getReadOnlyProperty();
+        return sourceTags.getReadOnlyProperty();
     }
 
-    public void setMaxShownTags(int maxShownTags) {
-        if (maxShownTags >= 0) {
-            this.maxShownTags.set(maxShownTags);
+    public void setVisibleTagLimit(int visibleTagLimit) {
+        if (visibleTagLimit >= -1) {
+            this.visibleTagLimit.set(visibleTagLimit);
         }
     }
 
-    public IntegerProperty getMaxShownTags() {
-        return maxShownTags;
+    public IntegerProperty getVisibleTagLimit() {
+        return visibleTagLimit;
     }
 
     public void clearTags() {
-        allTags.clear();
-        shownTags.clear();
+        sourceTags.clear();
+        visibleTagLabels.clear();
     }
 
     @Override
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/DownloadListPage.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/DownloadListPage.java
index ac2bbd790c..25e3b8014c 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/DownloadListPage.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/DownloadListPage.java
@@ -545,7 +545,7 @@ protected void updateControl(RemoteMod dataItem, boolean empty) {
                         ModTranslations.Mod mod = ModTranslations.getTranslationsByRepositoryType(getSkinnable().repository.getType()).getModByCurseForgeId(dataItem.getSlug());
                         content.setTitle(mod != null && I18n.isUseChinese() ? mod.getDisplayName() : dataItem.getTitle());
                         content.setSubtitle(dataItem.getDescription());
-                        content.setMaxShownTags(4);
+                        content.setVisibleTagLimit(4);
                         content.clearTags();
                         dataItem.getCategories().stream()
                                 .map(category -> getSkinnable().getLocalizedCategory(category))
diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/DownloadPage.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/DownloadPage.java
index 645686a5d2..62159f8b87 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/DownloadPage.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/DownloadPage.java
@@ -231,7 +231,7 @@ protected ModDownloadPageSkin(DownloadPage control) {
                 ModTranslations.Mod mod = getSkinnable().translations.getModByCurseForgeId(getSkinnable().addon.getSlug());
                 content.setTitle(mod != null && I18n.isUseChinese() ? mod.getDisplayName() : getSkinnable().addon.getTitle());
                 content.setSubtitle(getSkinnable().addon.getDescription());
-                content.setMaxShownTags(4);
+                content.setVisibleTagLimit(7);
                 getSkinnable().addon.getCategories().stream()
                         .map(category -> getSkinnable().page.getLocalizedCategory(category))
                         .forEach(content::addTag);

From 6bd8519b561be77791e5a3809bdc55e83c2b7acc Mon Sep 17 00:00:00 2001
From: mine_ <mine_yaoym@outlook.com>
Date: Sat, 15 Nov 2025 21:42:43 +0800
Subject: [PATCH 10/12] =?UTF-8?q?feat:overflow=E6=A0=87=E7=AD=BE=E7=8E=B0?=
 =?UTF-8?q?=E5=9C=A8=E4=B8=8D=E4=BC=9A=E6=98=BE=E7=A4=BA=E8=87=AA=E5=B7=B1?=
 =?UTF-8?q?=E7=9A=84=E6=96=87=E6=9C=AC=E7=9A=84tooltip=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hmcl/ui/construct/TwoLineListItem.java          | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
index c23a707a17..4a8ca935ce 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
@@ -44,7 +44,7 @@ public class TwoLineListItem extends VBox {
     private final ObservableList<Label> visibleTagLabels = FXCollections.observableArrayList();
 
     private final IntegerProperty visibleTagLimit = new SimpleIntegerProperty(UNLIMITED_TAGS);
-    private final Label overflowLabel = createTagLabel("", "tag-overflow");
+    private final Label overflowLabel = createTagLabel("", "tag-overflow", false);
 
     public TwoLineListItem(String titleString, String subtitleString) {
         this();
@@ -97,7 +97,7 @@ private void updateVisibleTagLabels(ListChangeListener.Change<? extends Tag> c)
                         if (visibleTagLimit.get() != UNLIMITED_TAGS && visibleTagLabels.size() > visibleTagLimit.get()) {
                             break;
                         }
-                        visibleTagLabels.add(createTagLabel(tag.text, tag.styleClass));
+                        visibleTagLabels.add(createTagLabel(tag.text, tag.styleClass, true));
                     }
                 }
             }
@@ -111,7 +111,7 @@ private void rebuildVisibleTagLabels() {
             if (visibleTagLimit.get() != UNLIMITED_TAGS && visibleTagLabels.size() > visibleTagLimit.get()) {
                 break;
             }
-            visibleTagLabels.add(createTagLabel(allTag.text, allTag.styleClass));
+            visibleTagLabels.add(createTagLabel(allTag.text, allTag.styleClass, true));
         }
         updateOverflowTag();
     }
@@ -127,8 +127,11 @@ private void updateOverflowTag() {
         }
     }
 
-    private static Label createTagLabel(String tag, String StyleClass) {
-        Label tagLabel = FXUtils.newSafeTruncatedLabel(tag);
+    private static Label createTagLabel(String tag, String StyleClass, Boolean showToolTipIfTruncated) {
+        Label tagLabel = new Label(tag);
+        if (showToolTipIfTruncated) {
+            FXUtils.showTooltipWhenTruncated(tagLabel);
+        }
         HBox.setMargin(tagLabel, new Insets(0, 6, 0, 0));
         tagLabel.getStyleClass().add(StyleClass);
         return tagLabel;

From 3bc8ddb22ca3885341f46efcb2a83c249aab1b1a Mon Sep 17 00:00:00 2001
From: mine_ <mine_yaoym@outlook.com>
Date: Mon, 17 Nov 2025 19:35:39 +0800
Subject: [PATCH 11/12] =?UTF-8?q?feat:=E4=BC=98=E5=8C=96=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hmcl/ui/construct/TwoLineListItem.java    |  4 +++-
 HMCL/src/main/resources/assets/css/root.css   | 19 +++++++++++--------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
index 4a8ca935ce..040e8813be 100644
--- a/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
+++ b/HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TwoLineListItem.java
@@ -23,6 +23,7 @@
 import javafx.collections.ListChangeListener;
 import javafx.collections.ObservableList;
 import javafx.geometry.Insets;
+import javafx.geometry.Pos;
 import javafx.scene.Node;
 import javafx.scene.control.Label;
 import javafx.scene.layout.HBox;
@@ -57,6 +58,7 @@ public TwoLineListItem() {
 
         HBox firstLine = new HBox();
         firstLine.getStyleClass().add("first-line");
+        firstLine.setAlignment(Pos.CENTER_LEFT);
 
         Label lblTitle = new Label();
         lblTitle.getStyleClass().add("title");
@@ -132,7 +134,7 @@ private static Label createTagLabel(String tag, String StyleClass, Boolean showT
         if (showToolTipIfTruncated) {
             FXUtils.showTooltipWhenTruncated(tagLabel);
         }
-        HBox.setMargin(tagLabel, new Insets(0, 6, 0, 0));
+        HBox.setMargin(tagLabel, new Insets(0, 4, 0, 0));
         tagLabel.getStyleClass().add(StyleClass);
         return tagLabel;
     }
diff --git a/HMCL/src/main/resources/assets/css/root.css b/HMCL/src/main/resources/assets/css/root.css
index 9c7013d5b9..f0b5d3fdb7 100644
--- a/HMCL/src/main/resources/assets/css/root.css
+++ b/HMCL/src/main/resources/assets/css/root.css
@@ -287,26 +287,29 @@
 
 .two-line-list-item > .first-line > .tag {
     -fx-text-fill: -fx-base-color;
-    -fx-background-color: -fx-base-rippler-color;
-    -fx-padding: 2;
+    -fx-background-color: rgba(209, 231, 246, 0.3);
+    -fx-padding: 1 2 1 2;
     -fx-font-weight: normal;
-    -fx-font-size: 12px;
+    -fx-font-size: 11px;
+    -fx-background-radius: 2;
 }
 
 .two-line-list-item > .first-line > .tag-warning {
     -fx-text-fill: #d34336;
     -fx-background-color: #f1aeb5;
-    -fx-padding: 2;
+    -fx-padding: 1 2 1 2;
     -fx-font-weight: normal;
-    -fx-font-size: 12px;
+    -fx-font-size: 11px;
+    -fx-background-radius: 2;
 }
 
 .two-line-list-item > .first-line > .tag-overflow {
     -fx-text-fill: -fx-base-color;
-    -fx-background-color: rgba(202, 227, 244, 0.3);
-    -fx-padding: 2;
+    -fx-background-color: rgba(197, 224, 243, 0.3);
+    -fx-padding: 1 2 1 2;
     -fx-font-weight: normal;
-    -fx-font-size: 12px;
+    -fx-font-size: 11px;
+    -fx-background-radius: 2;
 }
 
 .two-line-item-second-large {

From b18078e3a1fe6e987a39fe7ecb720a45a865ab62 Mon Sep 17 00:00:00 2001
From: mine_ <mine_yaoym@outlook.com>
Date: Tue, 18 Nov 2025 10:45:43 +0800
Subject: [PATCH 12/12] =?UTF-8?q?feat:=E4=BC=98=E5=8C=96=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 HMCL/src/main/resources/assets/css/root.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/HMCL/src/main/resources/assets/css/root.css b/HMCL/src/main/resources/assets/css/root.css
index f0b5d3fdb7..58cbab6bf5 100644
--- a/HMCL/src/main/resources/assets/css/root.css
+++ b/HMCL/src/main/resources/assets/css/root.css
@@ -287,7 +287,7 @@
 
 .two-line-list-item > .first-line > .tag {
     -fx-text-fill: -fx-base-color;
-    -fx-background-color: rgba(209, 231, 246, 0.3);
+    -fx-background-color: -fx-base-rippler-color;
     -fx-padding: 1 2 1 2;
     -fx-font-weight: normal;
     -fx-font-size: 11px;
@@ -305,7 +305,7 @@
 
 .two-line-list-item > .first-line > .tag-overflow {
     -fx-text-fill: -fx-base-color;
-    -fx-background-color: rgba(197, 224, 243, 0.3);
+    -fx-background-color: derive(-fx-base-rippler-color, -10%);
     -fx-padding: 1 2 1 2;
     -fx-font-weight: normal;
     -fx-font-size: 11px;