從列表視圖中單擊項目開始動畫

Question

如何從列表視圖開始動畫，以及如何使用戶一次可以播放多個動畫。

我為圓和列表視圖創建了3個動畫，我的問題是如何定位列表視圖，以便用戶可以清楚地看到它，以及如何制作它，以便用戶可以同時選擇一個或多個，然后從列表視圖中播放動畫。 現在是我的代碼：

    Circle circle2 = new Circle(250, 120, 80);

    circle2.setFill(Color.RED);
    circle2.setStroke(Color.BLACK);
    FadeTransition fade = new FadeTransition();
    fade.setDuration(Duration.millis(5000));
    fade.setFromValue(10);
    fade.setToValue(0.1);
    fade.setCycleCount(1000);
    fade.setAutoReverse(true);
    fade.setNode(circle2);
    fade.play();

    Circle circle1 = new Circle(250, 120, 80);

    circle1.setFill(Color.RED);
    circle1.setStroke(Color.BLACK);
    TranslateTransition translate = new TranslateTransition();
    translate.setByX(400);
    translate.setDuration(Duration.millis(1000));
    translate.setCycleCount(500);
    translate.setAutoReverse(true);
    translate.setNode(circle1);
    translate.play();

    Circle circle3 = new Circle(250, 120, 80);

    circle3.setFill(Color.RED);
    circle3.setStroke(Color.BLACK);
    ScaleTransition scale = new ScaleTransition();
    scale.setByX(25);
    scale.setDuration(Duration.millis(1000));
    scale.setCycleCount(500);
    scale.setAutoReverse(true);
    scale.setNode(circle3);
    scale.play();

    ListView listView = new ListView();

    listView.getItems().add("Fade Transition");
    listView.getItems().add("Translate Transition");
    listView.getItems().add("Scale Transition");

    HBox hbox = new HBox();
    hbox.setAlignment(Pos.CENTER);
    hbox.getChildren().addAll(circle1, circle2, circle3, listView);

    Scene scene = new Scene(hbox, 500, 600, Color.WHEAT);
    primaryStage.setScene(scene);
    primaryStage.setTitle("Hello World!");
    primaryStage.show();
}

是的，如何定位列表視圖以便用戶可以清楚地看到它，以及如何使列表視圖使用戶可以選擇一個以上的動畫並同時播放它們。 謝謝！

Answer 1

您需要將SelectionMode設置為multiple。

listView.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);

您需要選擇模型的選定Item屬性的偵聽器。 如果選擇了某些內容，請播放其動畫。 如果未選中，則停止其動畫。

listView.getSelectionModel().selectedItemProperty().addListener((obs, oldValue, newValue) ->{
    ObservableList<String> selectedItems = listView.getSelectionModel().getSelectedItems();
    if(selectedItems.contains("Fade Transition"))
    {
        fade.play();
    }
    else
    {
        fade.jumpTo(Duration.ZERO);
        fade.stop();                
    }

    if(selectedItems.contains("Translate Transition"))
    {
        translate.play();
    }
    else
    {
        translate.jumpTo(Duration.ZERO);
        translate.stop();
    }

    if(selectedItems.contains("Scale Transition"))
    {
        scale.play();
    }
    else
    {
        scale.jumpTo(Duration.ZERO);
        scale.stop();
    }            
});

您可以使用SubScene包含將設置動畫的節點。

hbox.getChildren().addAll(listView, new SubScene(new VBox(circle1, circle2, circle3), 800, 500));

完整代碼

import javafx.animation.FadeTransition;
import javafx.animation.ScaleTransition;
import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.SubScene;
import javafx.scene.control.ListView;
import javafx.scene.control.SelectionMode;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;

/**
 *
 * @author blj0011
 */
public class JavaFXApplication124 extends Application
{
    @Override
    public void start(Stage primaryStage)
    {        
        Circle circle2 = new Circle(250, 120, 80);
        circle2.setFill(Color.RED);
        circle2.setStroke(Color.BLACK);
        FadeTransition fade = new FadeTransition();
        fade.setDuration(Duration.millis(5000));
        fade.setFromValue(10);
        fade.setToValue(0.1);
        fade.setCycleCount(1000);
        fade.setAutoReverse(true);
        fade.setNode(circle2);

        Circle circle1 = new Circle(250, 120, 80);
        circle1.setFill(Color.RED);
        circle1.setStroke(Color.BLACK);
        TranslateTransition translate = new TranslateTransition();
        translate.setByX(400);
        translate.setDuration(Duration.millis(1000));
        translate.setCycleCount(500);
        translate.setAutoReverse(true);
        translate.setNode(circle1);

        Circle circle3 = new Circle(250, 120, 80);
        circle3.setFill(Color.RED);
        circle3.setStroke(Color.BLACK);
        ScaleTransition scale = new ScaleTransition();
        scale.setByX(25);
        scale.setDuration(Duration.millis(1000));
        scale.setCycleCount(500);
        scale.setAutoReverse(true);
        scale.setNode(circle3);

        ListView listView = new ListView();
        listView.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
        listView.getSelectionModel().selectedItemProperty().addListener((obs, oldValue, newValue) ->{
            ObservableList<String> selectedItems = listView.getSelectionModel().getSelectedItems();
            if(selectedItems.contains("Fade Transition"))
            {
                fade.play();
            }
            else
            {
                fade.jumpTo(Duration.ZERO);
                fade.stop();                
            }

            if(selectedItems.contains("Translate Transition"))
            {
                translate.play();
            }
            else
            {
                translate.jumpTo(Duration.ZERO);
                translate.stop();
            }

            if(selectedItems.contains("Scale Transition"))
            {
                scale.play();
            }
            else
            {
                scale.jumpTo(Duration.ZERO);
                scale.stop();
            }            
        });

        listView.getItems().add("Fade Transition");
        listView.getItems().add("Translate Transition");
        listView.getItems().add("Scale Transition");

        HBox hbox = new HBox();
        hbox.setAlignment(Pos.CENTER);
        hbox.getChildren().addAll(listView, new SubScene(new VBox(circle1, circle2, circle3), 800, 500));

        Scene scene = new Scene(hbox, 1080, 720, Color.WHEAT);
        primaryStage.setScene(scene);
        primaryStage.setTitle("Hello World!");
        primaryStage.show();

    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args)
    {
        launch(args);
    }
}