JavaFX: so erstellen Sie slide in animation-Effekt für einen Bereich (innerhalb einer transparenten Bühne)

Möchte ich einige Leitlinien auf, wie die Umsetzung einer Folie im übergang zu einem Bereich, wenn der Benutzer eine Taste drückt, genau wie Material-Design macht es für Schiebe-Menüs.

Dies ist ein video link , zeigt mein Bedürfnis.

Versuchte ich ScaleTransition, TranslateTransition, aber Sie hat nicht den trick tun.

Den Weg, ich versuche es zu implementieren, ist nicht effizient.

//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());

---

- - - - UPDATE ---

Hier ist das Beispiel-Gluon-Anwendung heruntergeladen hier. Es ist ein gradle-Projekt und ich habe es geändert, um eine Schaltfläche anzuzeigen, anstatt die Standard-label.

Möchte ich verkleinern, das AnchorPane, wenn der Benutzer auf die Schaltfläche klickt.

Was bin ich?

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();
    }
}

---

--- UPDATE 2 ---

Habe ich es geschafft, etwas neues zu implementieren, ähnlich zu dem, was ich will, mit " native JavaFX-API und keine externen Bibliotheken.

Obwohl, ich lief in einige Probleme.

1. Verkleinern einer AnchorPane NICHT schrumpfen/verschieben Sie ALLE seine Kinder-Knoten, weil Sie bleiben in den layout-Positionen.
2. Schrumpfen jedem anderen Bereich außer AnchorPane NICHT verkleinern/verschieben-seine Kinder-Knoten mit Ausnahme von Bildansicht Knoten.

Die nächsten zwei Bilder zeigen die 1. Frage, die ich lief in.

Dies ist ein AnchorPane (mit Korallen Farbe in Ihrer vollen Breite, ausgebaut) in einer AnchorPane (root-Bereich mit grauer Farbe).

Und dies ist, was passiert, wenn Sie klicken Sie auf die Menü-Taste zum verkleinern/verstecken. Wie Sie sehen können die Koralle-farbigen Bereich bekam geschrumpft/ausgeblendet, NICHT aber deren Knoten (Label, Bildansicht)

Poste ich den ganzen code um das Problem zu reproduzieren selbst:

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;
    }
}

---

--- UPDATE 3 ---

Ich veränderte den code Felipe Guizar Diaz, geben Sie mir, nach meinen Bedürfnissen, da ich möchte, dass ein Schlagschatten-Effekt auf meine transparente Bühne Fenster.

Wenn ich auf die Menü-Taste, um den linken Bereich, es zeigt sich vor dem Schatten. Obwohl in SceneBuilder ich habe die StackPane mit dem Schlagschatten-Effekt, der vor allen Knoten.

Dies ist das "Artefakt", wenn ich drücken Sie, um das Menü anzuzeigen, und startet die Wiedergabe der offene übergang...

Wie kann ich es beheben?

InformationsquelleAutor John Astralidis | 2015-07-24