Как сделать анимацию наложений в стекпейне с javafx ⇐ JAVA

[Anonymous]

У меня есть три элемента StackPane, каждый из которых содержал соответствующий обзор Image для значка и наложенный Vbox. Предполагаемая анимация состоит в том, чтобы сделать оверлей сверху в нижнюю часть контейнера (или наоборот), когда мышь падает над ним, а затем снова прячется, когда мышь уходит. (StackPane) назначает своим детям высоту по умолчанию, которая составляет 100% от собственной высоты. Вот почему мне пришлось использовать SetMaxHeight (0) вместо. Я использовал KeyFrame, чтобы сделать следующую анимацию. < /Li>
< /ol>

0 -> Высота контейнера, когда мышь парила < /p>
< /blockquote>
и < /p>

hights -> 0, когда Mys> 0. /> < /blockquote>
Но нет анимации, и наложение появляется непосредственно без какой -либо анимации. < /strong> < /p>
code < /h2>

Код: Выделить всё

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.*;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.util.Duration;

import java.util.Objects;

public class AnimationExample extends Application {
private ImageView createImageIcon(String path) {
Image image = new Image(Objects.requireNonNull(getClass().getResourceAsStream(path)));
ImageView imageView = new ImageView(image);
imageView.setPreserveRatio(true);
imageView.setFitHeight(200);
imageView.setFitWidth(200);

return imageView;
}

private StackPane crateImageIconContainer(ImageView image, VBox overlay, String iconTitle) {
Text text = new Text(iconTitle);
overlay.getChildren().add(text);

overlay.setAlignment(Pos.CENTER);
overlay.setStyle("-fx-background-color: #d20000;");
StackPane.setAlignment(overlay, Pos.BOTTOM_CENTER);
overlay.setMaxHeight(0);

StackPane stackableContainer = new StackPane();
stackableContainer.setPrefHeight(400);
stackableContainer.setPrefWidth(400);
HBox.setMargin(stackableContainer, new Insets(25, 25, 25, 25));

final double containerHeight = stackableContainer.getPrefHeight();

Timeline enterTimeline = new Timeline();
Timeline exitTimeline = new Timeline();

stackableContainer.setOnMouseEntered(_ -> {
enterTimeline.getKeyFrames().setAll(
new KeyFrame(Duration.millis(800), _ -> overlay.setMaxHeight(containerHeight))
);
enterTimeline.play();
});

stackableContainer.setOnMouseExited(_ -> {
exitTimeline.getKeyFrames().setAll(
new KeyFrame(Duration.millis(800), _ -> overlay.setMaxHeight(0))
);
exitTimeline.play();
});

stackableContainer.getChildren().addAll(image, overlay);
return stackableContainer;
}

public void start(Stage primaryStage) {
HBox mainContainer = new HBox();
HBox.setHgrow(mainContainer, Priority.ALWAYS);
mainContainer.setAlignment(Pos.CENTER);
mainContainer.setStyle("-fx-background-color: #00396c;");

ImageView photoIcon = createImageIcon("../resources/photo.png");
ImageView videoIcon = createImageIcon("../resources/video.png");
ImageView webCamIcon = createImageIcon("../resources/webcam.png");

StackPane photoIconContainer = crateImageIconContainer(photoIcon, new VBox(), "Photo");
StackPane videoIconContainer = crateImageIconContainer(videoIcon, new VBox(), "Video");
StackPane webCamIconContainer = crateImageIconContainer(webCamIcon, new VBox(), "Web Cam");

mainContainer.getChildren().addAll(photoIconContainer, videoIconContainer, webCamIconContainer);

Scene scene = new Scene(mainContainer, 900, 350);
primaryStage.setTitle("Color isolator");
primaryStage.setScene(scene);
primaryStage.show();
}
}

Я хотел бы знать, как сделать такую ​​анимацию, используя StackPane или любую макет в этом отношении

Подробнее здесь: https://stackoverflow.com/questions/797 ... ith-javafx