我的轉換不起作用

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。將路徑設置爲big而不是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); 

此外，您的過渡正在發生，但在您爲矩形設置的座標。爲了看到圓上的矩形，從矩形中刪除佈局值。 I.e刪除下面的代碼

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

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