通过单击列表视图中的项目启动动画

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

You need to set the SelectionMode to multiple.

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

You need a listener on the selection model's selected Item property. If something is selected, play its animation. If it's not selected, stop its animation.

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

You can use a SubScene to contain the nodes that will be animated.

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

Full code

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

通过单击列表视图中的项目启动动画

Start animation with click on item from list view

java

animation

javafx

javafx-8