JavaFx: animation / transiction

问题

I have a problem adding an event and a transition to a stackpane problem with gif:

Clicking it to make the transition and not killing myself I wanted to open seal only to close when clicking again And I don't know why my submenu isn't over my buttons completely

my controller:

package com.semeq.controllers.home;

import org.springframework.stereotype.Controller;

import com.jfoenix.controls.JFXButton;

import javafx.animation.Animation.Status;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.beans.binding.Bindings;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.fxml.FXML;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.util.Duration;

@Controller
public class backup {

    @FXML
    private StackPane container;

    @FXML
    private VBox child;

    @FXML
    private VBox menu;

    @FXML
    private JFXButton testOne;

    public void initialize() {
        final double hoverAreaWidth = 10; //

        DoubleProperty visibleFraction = new SimpleDoubleProperty(0);
        menu.translateXProperty().bind(Bindings.subtract(1d, visibleFraction).multiply(menu.widthProperty().subtract(10)));
        Timeline animation = new Timeline(
                new KeyFrame(Duration.ZERO, new KeyValue(visibleFraction, 0d)),
                new KeyFrame(Duration.millis(350), new KeyValue(visibleFraction, 1d)));
        testOne.addEventHandler(MouseEvent.MOUSE_CLICKED, (e) -> {
                animation.setRate( -1);
                if (animation.getStatus() != Status.RUNNING) {
                    animation.play();
                }
        });

    } 


}

my main:

public class MainApp extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        fxmlLoader.setLocation(getClass().getResource("/home2.fxml"));
        double width = 1000;
        double height = 600;
        Parent root = fxmlLoader.load();
        Scene scene = new Scene(root);
       // scene.getStylesheets().add(getClass().getResource("/mercado.css").toExternalForm());

        stage.setTitle("JavaFX and Maven");
        stage.setScene(scene);
        stage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

my fxml:

<?xml version="1.0" encoding="UTF-8"?>

<?import com.jfoenix.controls.JFXButton?>
<?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>

<StackPane fx:id="container" alignment="TOP_LEFT" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="200.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.semeq.controllers.home.backup">
   <children>
      <VBox fx:id="child" maxHeight="1.7976931348623157E308" maxWidth="-Infinity" prefHeight="400.0" prefWidth="200.0" spacing="20.0" style="-fx-background-color: #000;" StackPane.alignment="TOP_LEFT">
         <StackPane.margin>
            <Insets />
         </StackPane.margin>
         <padding>
            <Insets left="10.0" top="20.0" />
         </padding>
         <children>
            <JFXButton fx:id="testOne" text="Home" textFill="WHITE">
               <graphic>
                  <FontAwesomeIconView fill="WHITE" />
               </graphic>
            </JFXButton>
            <JFXButton text="Register" textFill="WHITE">
               <graphic>
                  <FontAwesomeIconView fill="WHITE" />
               </graphic>
            </JFXButton>
            <JFXButton text="Settings" textFill="WHITE">
               <graphic>
                  <FontAwesomeIconView fill="WHITE" />
               </graphic>
            </JFXButton>
         </children>
      </VBox>
      <VBox fx:id="menu" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="-Infinity" prefHeight="400.0" prefWidth="168.0" style="-fx-background-color: #E547;" StackPane.alignment="TOP_RIGHT" />
   </children>
</StackPane>

回答1:

Setting the rate property to -1 results in the animation playing from end to start instead of the other way round. You need to set the rate to 1, if you want the animation to play forward and to -1 for playing it backwards.

If you do not keep track on whether the menu is opening (or opened) or closing (closed) you can simply negate the rate but in this case you need to set the initial rate to -1:

animation.setRate(-1); // initial rate the same as after closing animation
testOne.addEventHandler(MouseEvent.MOUSE_CLICKED, (e) -> {
    animation.setRate(-animation.getRate());
    if (animation.getStatus() != Status.RUNNING) {
        animation.play();
    }
});

---

The binding for the translateX property produces the following result:

translateX = (1 - visibleFraction) * (width - 10)

i.e. for visibleFraction = 1 the menu is fully visible and for visibleFraction = 0 only 10 of it's width are visible.

The Timeline starts with visibleFraction = 0 for time = 0 and ends with visibleFraction = 1 which is why it needs to be played forwards for the opening animation and backwards for the closing animation.

来源：https://stackoverflow.com/questions/57512941/javafx-animation-transiction