JavaFX 2.X - 애니메이션 배경과 애니메이션 컨트롤

Question

며칠 전에 저는 JavaFX를 배우기 시작했고 2 번의 실험을 수행하고자했습니다. 첫째, 사용자 인터페이스 뒤에 애니메이션 배경을 넣을 수 있는지 알고 싶습니다. 애니메이션 배경을 만드는 데 성공했으며 이제는 인터페이스 중간에 일부 컨트롤을 배치하는 데 큰 어려움을 겪고 있습니다.

내 프로그램 2 장을 소개해 드리고 싶습니다.

public class AnimatedBackground extends Application 
{ 
// ######################################################################################################### 
//                          MAIN 
// ######################################################################################################### 

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

// ######################################################################################################### 
//                        INSTÂNCIAS 
// ######################################################################################################### 

private Group root; 
private Group grp_hexagons; 
private Rectangle rect_background; 
private Scene cenario; 

// UI 

private VBox lay_box_controls; 

private Label lab_test; 
private TextArea texA_test; 
private Button bot_test; 

// ######################################################################################################### 
//                         INÍCIO FX 
// ######################################################################################################### 

@Override public void start(Stage stage) throws Exception 
{ 
    this.confFX(); 

    cenario = new Scene(this.root , 640 , 480); 

    this.rect_background.widthProperty().bind(this.cenario.widthProperty()); 
    this.rect_background.heightProperty().bind(this.cenario.heightProperty()); 

    stage.setScene(cenario); 
    stage.setTitle("Meu programa JavaFX - R.D.S."); 
    stage.show(); 
} 

protected void confFX() 
{ 
    this.root = new Group(); 
    this.grp_hexagons = new Group(); 

    // Initiate the circles and all animation stuff. 
    for(int cont = 0 ; cont < 15 ; cont++) 
    { 
     Circle circle = new Circle(); 
     circle.setFill(Color.WHITE); 
     circle.setEffect(new GaussianBlur(Math.random() * 8 + 2)); 
     circle.setOpacity(Math.random()); 
     circle.setRadius(20); 

     this.grp_hexagons.getChildren().add(circle); 

     double randScale = (Math.random() * 4) + 1; 

     KeyValue kValueX = new KeyValue(circle.scaleXProperty() , randScale); 
     KeyValue kValueY = new KeyValue(circle.scaleYProperty() , randScale); 
     KeyFrame kFrame = new KeyFrame(Duration.millis(5000 + (Math.random() * 5000)) , kValueX , kValueY); 

     Timeline linhaT = new Timeline(); 
     linhaT.getKeyFrames().add(kFrame); 
     linhaT.setAutoReverse(true); 
     linhaT.setCycleCount(Animation.INDEFINITE); 
     linhaT.play(); 
    } 

    this.rect_background = new Rectangle(); 

    this.root.getChildren().add(this.rect_background); 
    this.root.getChildren().add(this.grp_hexagons); 

    // UI 

    this.lay_box_controls = new VBox(); 
    this.lay_box_controls.setSpacing(20); 
    this.lay_box_controls.setAlignment(Pos.CENTER); 

    this.bot_test = new Button("CHANGE POSITIONS"); 
    this.bot_test.setAlignment(Pos.CENTER); 

    this.bot_test.setOnAction(new EventHandler<ActionEvent>() 
    { 
     @Override public void handle(ActionEvent e) 
     { 
      for(Node hexagono : grp_hexagons.getChildren()) 
      { 
       hexagono.setTranslateX(Math.random() * cenario.getWidth()); 
       hexagono.setTranslateY(Math.random() * cenario.getHeight()); 
      } 
     } 
    }); 

    this.texA_test = new TextArea(); 
    this.texA_test.setText("This is just a test."); 

    this.lab_test = new Label("This is just a label."); 
    this.lab_test.setTextFill(Color.WHITE); 
    this.lab_test.setFont(new Font(32)); 

    this.lay_box_controls.getChildren().add(this.lab_test); 
    this.lay_box_controls.getChildren().add(this.texA_test); 
    this.lay_box_controls.getChildren().add(this.bot_test); 

    this.root.getChildren().add(this.lay_box_controls); 
} 
} 

: 이것은 내 응용 프로그램의 코드가

입니다 :이 내 노드 트리이라고 생각

: 첫 번째는 내가지고있어 바람직하지 않은 결과를 보여줍니다

StackPane을 내 씬 그래프의 루트로 사용하려고 시도했지만 원하지 않는 결과도 발견했습니다. 컨트롤이 창 중앙에 있었음에도 불구하고 서클은 성장하고 수축함에 따라 움직이기 시작하여 모든 것이 이상하게 보입니다.

내가 알고 싶은 두 번째 사항은 일부 이벤트가 발생할 때 일부 애니메이션을 수행 할 수 있도록 컨트롤을 사용자 지정할 수 있는지 여부입니다. CSS를 사용하여 컨트롤의 모양을 변경할 수도 있지만 복잡한 것을 만드는 것은 어렵습니다. 예를 들어 컨트롤이 상태 변경으로 인해 모양이 변경되면 애니메이션 상태에서 전환 상태가 변경되지 않고 갑작스럽고 정적 인 방식으로 변경됩니다. 그 상태 사이에 버튼을 움직이는 방법이 있습니까? 이것은 JavaFX API를 사용하여 수행됩니까? 아니면 CSS를 사용하고 있을까요? 아니면 어떤 식 으로든 가능하지 않을까요?

감사합니다.

Answer 1

오라클 커뮤니티 사용자 중 일부는이 문제를 해결할 수있었습니다. 여기 우리가 만든 모든 해결책을 반복 할 필요가 없으므로 링크를 게시하여 문제의 솔루션에 액세스 할 수 있습니다. 나는 이것이 우리 모두에게 이익이되기를 바랍니다. 어쨌든 당신의주의를 가져 주셔서 감사합니다.

https://community.oracle.com/thread/2620500