私のトランジションが動作しない

Question

このコードでは、トランジション(PathTransition pt;)のplay()メソッドを呼び出すと、プログラムはオレンジの四角形を隠し、トランジションを表示しません。構文エラーはありません。私は四角形が円の周りを円く描こうとしています。

import javafx.application.Application; 
import javafx.stage.Stage; 
import javafx.scene.Scene; 
import javafx.scene.layout.Pane; 
import javafx.scene.control.*; 
import javafx.event.Event; 
import javafx.event.ActionEvent; 
import javafx.event.EventHandler; 
import javafx.scene.shape.*; 
import javafx.scene.paint.Color; 
import javafx.animation.PathTransition; 
import javafx.animation.Timeline; 
import javafx.util.Duration; 

public class Test__javafx extends Application{ 
    public void start(Stage stage) { 
     Pane p = new Pane(); 
     Button b = new Button("Play"); 
     b.setStyle("-fx-background-radius: 3em;" + 
       "-fx-background-color: #66a3ff;" + 
       "-fx-min-width: 120;" + 
       "-fx-min-height: 40;" + 
       "-fx-max-width: 120;" + 
       "-fx-min-height: 40;" + 
       "-fx-cursor: hand;" + 
       "-fx-text-fill: white;"); 
     b.setLayoutX(320); 
     b.setLayoutY(400); 


     b.setOnAction((ActionEvent event) -> { 

      Circle big = new Circle(); 
     // create rectangle for big circle 
     Rectangle bigRec = new Rectangle(); 
      Circle circ = new Circle(); 
      Rectangle r = new Rectangle(); 
      //event for small rectangle 
      r.setWidth(20); 
      r.setHeight(30); 
      r.setLayoutX(362); 
      r.setLayoutY(335); 

      r.setArcWidth(5); 
      r.setArcHeight(5); 
      r.setStyle("-fx-fill: #ff9933;" + 
        "-fix-stroke-width: 20;" + 
        "-fix-stroke: #ff4d4d;"); 

      //event for small circle 
      circ.setStyle("-fx-fill: #88ff4d;" + 
        "-fx-stroke-width: 12;" + 
        "-fx-stroke: #3399ff;"); 
      circ.setCenterX(370); 
      circ.setCenterY(400); 
      circ.setRadius(50); 

      // event for big circle's rectangle 
      bigRec.setLayoutX(205); 
      bigRec.setLayoutY(375); 
      bigRec.setWidth(30); 
      bigRec.setHeight(20); 
      bigRec.setArcWidth(5); 
      bigRec.setArcHeight(5); 
      bigRec.setStyle("-fx-fill: #ff9933;" + 
        "-fix-stroke-width: 20;" + 
        "-fix-stroke: #ff4d4d;"); 

      // big circle 
      big.setStyle("-fx-fill: #88ff4d;" + 
        "-fx-stroke-width: 12;" + 
        "-fx-stroke: #3399ff;"); 
      big.setCenterX(370); 
      big.setCenterY(400); 
      big.setRadius(150); 
      p.getChildren().addAll(big, bigRec, circ, r); 
      // transition for small circle and rectangle 

      PathTransition pt = new PathTransition(); 
      pt.setDuration(Duration.millis(2000)); 
      pt.setPath(bigRec); 
      pt.setNode(bigRec); 
      pt.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT); 
      pt.setCycleCount(Timeline.INDEFINITE); 
      pt.setAutoReverse(false); 
      // if you comment the play method it shows the rectangle 
      // but not any transitions obviously 
      pt.play(); 

      PathTransition pt2 = new PathTransition(); 
      pt2.setDuration(Duration.millis(2000)); 
      pt2.setPath(circ); 
      pt2.setNode(r); 
      pt2.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT); 
      pt2.setCycleCount(Timeline.INDEFINITE); 
      pt2.setAutoReverse(false); 
      // if you comment the play method it shows the rectangle 
      // but not any transitions obviously 
      pt2.play(); 

     }); 
     p.getChildren().add(b); 
     p.setStyle("-fx-background-color: #88ff4d;"); 
     Scene s = new Scene(p, 750, 650); 
     stage.setScene(s); 
     stage.show(); 
    } 
    // launch Application 
    public static void main(String[] args) { 
     Application.launch(args); 
    } 
} 

Answer 1

最初のPathTransitionでは、パスとノードの両方をbigRecとして設定しています。 bigRecの代わりにパスを大きく設定します。

PathTransition pt = new PathTransition(); 
pt.setDuration(Duration.millis(2000)); 
pt.setPath(big); // Make this change 
pt.setNode(bigRec); 
pt.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT); 
pt.setCycleCount(Timeline.INDEFINITE); 
pt.setAutoReverse(false); 

また、遷移が起こっていますが、あなたの四角形に設定した座標になります。円の矩形を表示するには、矩形からレイアウト値を削除します。私は以下のコードを削除します

//Code to be removed 
bigRec.setLayoutX(205); 
bigRec.setLayoutY(375); 

r.setLayoutX(362); 
r.setLayoutY(335);