Добавить расширить анимацию TreeView

Question

У меня есть этот пример TreeView:

import java.util.Arrays; 
import java.util.List; 
import javafx.application.Application; 
import javafx.beans.property.SimpleStringProperty; 
import javafx.event.EventHandler; 
import javafx.scene.Scene; 
import javafx.scene.control.TextField; 
import javafx.scene.control.TreeCell; 
import javafx.scene.control.TreeItem; 
import javafx.scene.control.TreeView; 
import javafx.scene.input.KeyCode; 
import javafx.scene.input.KeyEvent; 
import javafx.scene.layout.VBox; 
import javafx.scene.paint.Color; 
import javafx.stage.Stage; 
import javafx.util.Callback; 

public class MainApp extends Application 
{ 

    //private final Node rootIcon = new ImageView(new Image(getClass().getResourceAsStream("picture.png"))); 
    //private final Image depIcon = new Image(getClass().getResourceAsStream("picture.png")); 
    List<Employee> employees = Arrays.<Employee>asList(
     new Employee("Ethan Williams", "Sales Department"), 
     new Employee("Emma Jones", "Sales Department"), 
     new Employee("Michael Brown", "Sales Department"), 
     new Employee("Anna Black", "Sales Department"), 
     new Employee("Rodger York", "Sales Department"), 
     new Employee("Susan Collins", "Sales Department"), 
     new Employee("Mike Graham", "IT Support"), 
     new Employee("Judy Mayer", "IT Support"), 
     new Employee("Gregory Smith", "IT Support"), 
     new Employee("Jacob Smith", "Accounts Department"), 
     new Employee("Isabella Johnson", "Accounts Department")); 
    TreeItem<String> rootNode = new TreeItem<>("MyCompany Human Resources");//, rootIcon); // Set picture 

    public static void main(String[] args) 
    { 
     Application.launch(args); 
    } 

    @Override 
    public void start(Stage stage) 
    { 
     rootNode.setExpanded(true); 
     for (Employee employee : employees) 
     { 
      TreeItem<String> empLeaf = new TreeItem<>(employee.getName()); 
      boolean found = false; 
      for (TreeItem<String> depNode : rootNode.getChildren()) 
      { 
       if (depNode.getValue().contentEquals(employee.getDepartment())) 
       { 
        depNode.getChildren().add(empLeaf); 
        found = true; 
        break; 
       } 
      } 
      if (!found) 
      { 
       TreeItem<String> depNode = new TreeItem<>(
        employee.getDepartment()//,new ImageView(depIcon) // Set picture 
       ); 
       rootNode.getChildren().add(depNode); 
       depNode.getChildren().add(empLeaf); 
      } 
     } 

     stage.setTitle("Tree View Sample"); 
     VBox box = new VBox(); 
     final Scene scene = new Scene(box, 400, 300); 
     scene.setFill(Color.LIGHTGRAY); 

     TreeView<String> treeView = new TreeView<>(rootNode); 
     //treeView.setEditable(true); 
     treeView.setCellFactory(new Callback<TreeView<String>, TreeCell<String>>() 
     { 
      @Override 
      public TreeCell<String> call(TreeView<String> p) 
      { 
       return new TextFieldTreeCellImpl(); 
      } 
     }); 

     box.getChildren().add(treeView); 
     stage.setScene(scene); 
     stage.show(); 
    } 

    private final class TextFieldTreeCellImpl extends TreeCell<String> 
    { 

     private TextField textField; 

     public TextFieldTreeCellImpl() 
     { 
     } 

     @Override 
     public void startEdit() 
     { 
      super.startEdit(); 

      if (textField == null) 
      { 
       createTextField(); 
      } 
      setText(null); 
      setGraphic(textField); 
      textField.selectAll(); 
     } 

     @Override 
     public void cancelEdit() 
     { 
      super.cancelEdit(); 
      setText((String) getItem()); 
      setGraphic(getTreeItem().getGraphic()); 
     } 

     @Override 
     public void updateItem(String item, boolean empty) 
     { 
      super.updateItem(item, empty); 

      if (empty) 
      { 
       setText(null); 
       setGraphic(null); 
      } 
      else 
      { 
       if (isEditing()) 
       { 
        if (textField != null) 
        { 
         textField.setText(getString()); 
        } 
        setText(null); 
        setGraphic(textField); 
       } 
       else 
       { 
        setText(getString()); 
        setGraphic(getTreeItem().getGraphic()); 
       } 
      } 
     } 

     private void createTextField() 
     { 
      textField = new TextField(getString()); 
      textField.setOnKeyReleased(new EventHandler<KeyEvent>() 
      { 

       @Override 
       public void handle(KeyEvent t) 
       { 
        if (t.getCode() == KeyCode.ENTER) 
        { 
         commitEdit(textField.getText()); 
        } 
        else if (t.getCode() == KeyCode.ESCAPE) 
        { 
         cancelEdit(); 
        } 
       } 
      }); 
     } 

     private String getString() 
     { 
      return getItem() == null ? "" : getItem().toString(); 
     } 
    } 

    public static class Employee 
    { 

     private final SimpleStringProperty name; 
     private final SimpleStringProperty department; 

     private Employee(String name, String department) 
     { 
      this.name = new SimpleStringProperty(name); 
      this.department = new SimpleStringProperty(department); 
     } 

     public String getName() 
     { 
      return name.get(); 
     } 

     public void setName(String fName) 
     { 
      name.set(fName); 
     } 

     public String getDepartment() 
     { 
      return department.get(); 
     } 

     public void setDepartment(String fName) 
     { 
      department.set(fName); 
     } 
    } 
} 

Я хочу, чтобы добавить анимацию, когда я развернуть дерево. Как это можно сделать?

Answer 1

Взгляните на это, я нашел поиск в Интернете. Я нашел его here, после googling "javafx TreeView animation".

Итак, проведя несколько минут изучения кода, я сделал вывод, что важная часть кода заключается в следующем:

rootItem.expandedProperty().addListener(new ChangeListener<Boolean>() { 
    public void changed(ObservableValue<? extends Boolean> observable, Boolean oldValue, Boolean newValue) { 
     new Timeline(
      new KeyFrame(Duration.seconds(0), new KeyValue(tree.opacityProperty(), 0)), 
      new KeyFrame(Duration.seconds(1), new KeyValue(tree.opacityProperty(), 1.0)) 
     ).play(); 
    } 
}); 

Этот код добавляет обработчик, который запускает код, который выполняет нужную анимацию каждый время rootItem.expandedProperty() изменяется, т.е. пользователь расширяет или сворачивает дерево.

Каждый раз, когда что-то вызывает изменение expandedProperty, он создает новый объект Timeline, который, как я предполагаю, представляет собой действительные шаги в конкретной анимации. Текущий код изменяет непрозрачность дерева, в результате чего поддерево rootItem будет «исчезать» в течение 1 секунды.

Чтобы реализовать отдельную анимацию для закрытия дерева, вы можете использовать параметры метода changed в прослушивателе, чтобы различать два случая.

Для того, чтобы такая анимация возникала с каждым поддеревом, такой слушатель должен быть добавлен к каждому узлу дерева, имеющего дочерние элементы. Перечисление всех элементов дерева - это чрезвычайно простая операция, которую вы узнали, когда вы изучили структуры данных, поэтому мне не нужно точно понимать, как это сделать.

Однако, если анимация затухания недостаточно хороша для вашего приложения, я бы предложил использовать вложенный аккордеон, например this question does. Из всего, что вы дадите, вы можете использовать аккордеон, чтобы лучше показать списки сотрудников.