【发布时间】：2015-10-14 14:48:18
【问题描述】：
我想要一些关于如何在用户按下按钮时为窗格实现幻灯片过渡的指南，就像 Material Design 为滑动菜单所做的那样。
这是一个视频link，说明了我的需求。
我尝试了 ScaleTransition、TranslateTransition，但他们没有成功。
我尝试实现它的方式效率不高。
// swipeMenuPane is builded in SceneBuilder and it is hidden,
// opacity = 0.0 and setX() = -getPrefWidth();
@FXML AnchorPane swipeMenuPane;
@FXML Button menuButton;
menuButton.setOnMouseClicked(e-> {
swipeMenuPane.setOpacity(1.0);
swipeTransition.play()
});
TranslateTransition swipeTransition = new TranslateTransition();
swipeTransition.setNode(swipeMenuPane);
swipeTransition.setDuration(Duration.millis(500));
swipeTransition.setToX(swipeMenuPane.getPrefWidth());
--- 更新 ---
这是从here 下载的示例 Gluon 应用程序。这是一个 gradle 项目，我对其进行了修改以显示一个按钮而不是默认标签。
我想在用户单击按钮时缩小 AnchorPane。
我错过了什么？
package com.helloworld;
import com.gluonhq.charm.glisten.animation.ShrinkExpandAnimation;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class HelloWorld extends Application {
ShrinkExpandAnimation anim;
@Override
public void start(Stage stage) {
Button btn = new Button("Click Me!");
btn.setOnMouseClicked(e-> {
System.out.println("swiping...");
anim.play();
});
AnchorPane pane = new AnchorPane();
pane.setStyle("-fx-background-color: coral");
pane.getChildren().add(btn);
// false to shrink or true to expand
anim = new ShrinkExpandAnimation(pane, false);
Scene scene = new Scene(new StackPane(pane), 640, 480);
stage.setScene(scene);
stage.show();
}
}
--- 更新 2 ---
我设法使用本机 JavaFX API 实现了类似于我想要的东西，并且没有使用外部库。
虽然，我遇到了一些问题。
- 收缩 AnchorPane 不会收缩/移动其任何子节点，因为它们会停留在其布局位置。
- 收缩除 AnchorPane 之外的任何其他窗格会收缩/移动其子节点，但 ImageView 节点除外。
接下来的两张图片说明了我遇到的第一个问题。
这是 AnchorPane（灰色根窗格）内的 AnchorPane（全宽珊瑚色；展开）。
当您单击菜单按钮以缩小/隐藏它时会发生这种情况。如您所见，珊瑚色窗格已缩小/隐藏，但不是其节点（标签、ImageView）
我发布了整个代码来自己重现问题：
public class SwipeMenuDemo extends Application {
AnchorPane swapPane;
Button btnMenu;
boolean isExpanded = true;
@Override
public void start(Stage stage) {
Label swapPaneLabel = new Label("Expandable Pane");
swapPaneLabel.setMinWidth(0);
ImageView swapPaneImage = new ImageView("http://vignette1.wikia.nocookie.net/jfx/images/5/5a/JavaFXIsland600x300.png");
swapPaneImage.setLayoutY(100);
Label rootPaneLabel = new Label("Root Pane");
rootPaneLabel.setStyle("-fx-font-size: 60;");
rootPaneLabel.setLayoutX(180);
rootPaneLabel.setLayoutY(180);
swapPane = new AnchorPane();
swapPane.setPrefSize(640, 440);
swapPane.setMinWidth(0);
swapPane.setLayoutY(40);
swapPane.setStyle("-fx-background-color: coral; -fx-font-size: 52;");
swapPane.getChildren().addAll(swapPaneImage, swapPaneLabel);
btnMenu = new Button("Menu");
btnMenu.setLayoutX(5);
btnMenu.setLayoutY(5);
btnMenu.setOnMouseClicked(e -> {
if (isExpanded) hideSwapPane().play();
else showSwapPane().play();
});
Button btnClose = new Button("Close");
btnClose.setLayoutX(590);
btnClose.setLayoutY(5);
btnClose.setOnMouseClicked(e -> Platform.exit());
AnchorPane rootPane = new AnchorPane();
rootPane.setStyle("-fx-background-color: grey;");
rootPane.getChildren().addAll(btnMenu, btnClose, rootPaneLabel, swapPane);
Scene scene = new Scene(rootPane, 640, 480);
stage.setScene(scene);
stage.initStyle(StageStyle.UNDECORATED);
stage.show();
}
private Animation hideSwapPane() {
btnMenu.setMouseTransparent(true);
Animation collapsePanel = new Transition() {
{
setCycleDuration(Duration.millis(2500));
}
@Override
protected void interpolate(double fraction) {
swapPane.setPrefWidth(640 * (1.0 - fraction));
}
};
collapsePanel.setOnFinished(e-> {
isExpanded = false;
btnMenu.setMouseTransparent(false);
});
return collapsePanel;
}
private Animation showSwapPane() {
btnMenu.setMouseTransparent(true);
final Animation expandPanel = new Transition() {
{
setCycleDuration(Duration.millis(2500));
}
@Override
protected void interpolate(double fraction) {
swapPane.setPrefWidth(640 * fraction);
}
};
expandPanel.setOnFinished(e-> {
isExpanded = true;
btnMenu.setMouseTransparent(false);
});
return expandPanel;
}
}
--- 更新 3 ---
我根据我的需要修改了 Felipe Guizar Diaz 提供给我的代码，因为我想要在我的透明舞台窗口上添加阴影效果。
当我单击菜单按钮以显示左窗格时，它会显示在阴影前面。即使在 SceneBuilder 中，我已将具有阴影效果的 StackPane 放置在所有节点的前面。
这是当我按下以显示菜单并开始播放打开的过渡时的“工件”...
我该如何解决？
【问题讨论】：
-
能否请您添加您已经尝试过的代码？
-
也许您正在寻找像 HiddenSidesPane 这样的东西？看这里：fxexperience.com/controlsfx/features/#hiddensidespane
-
@NwDx 是的，但在我的情况下，我希望窗格在鼠标事件时显示/滑动。你遇到过这样的事情吗？
-
嗯，也许您想要类似 material design 的 Android 应用程序？那么Gluon Charm 可能就是你要找的东西。
-
如果我能自己实现同样的动画效果就好了。我查看了类似的代码，但它们不适合我的情况（我想）。我要滑入的窗格将覆盖整个舞台。这就像打开一个抽屉然后又把它关上。有人可以提供任何指导方针或步骤来考虑采取吗？
标签： javafx