添加扩展动画的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

看看这个我发现在网上搜索。我在谷歌搜索“javafx TreeView动画”后发现它here。

好了，花几分钟的时间检查代码后，我推断，该代码的重要组成部分，是这样的：

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。从您提供的样品中，手风琴将是更好的方式来显示员工名单。