FXMLからJavaFXへの要素取得時のエラー（InvocationTargetException、NullPointerException）

前提・実現したいこと

SceneBuilderとJavaFXで円が既定の位置から水平方向に移動するアニメーションを作成したいと考えています。

発生している問題・エラーメッセージ

エラー文を見て調べたところ、
java.lang.reflect.InvocationTargetException　から
circle1がFXMLからうまく取得できていないことが問題だと思うのですが、解決法がわかりません。

Exception in Application start method
java.lang.reflect.InvocationTargetException
        at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
        at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:77)
        at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
        at java.base/java.lang.reflect.Method.invoke(Method.java:568)
Caused by: java.lang.NullPointerException: Cannot invoke "javafx.scene.shape.Circle.getLayoutX()" because "this.circle1" is null
        at application.Main.start(Main.java:39)
        at javafx.graphics/com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$9(LauncherImpl.java:847)
        at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runAndWait$12(PlatformImpl.java:484)
        at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runLater$10(PlatformImpl.java:457)
        at java.base/java.security.AccessController.doPrivileged(AccessController.java:399)
        at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runLater$11(PlatformImpl.java:456)
        at javafx.graphics/com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:96)
        at javafx.graphics/com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
        at javafx.graphics/com.sun.glass.ui.win.WinApplication.lambda$runLoop$3(WinApplication.java:184)
        ... 1 more
Exception running application application.Main

該当のソースコード

java
package application;
import java.net.URL;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
import javafx.fxml.FXML;
import javafx.scene.shape.*;
// import javafx.animation.PathTransition;
import javafx.animation.TranslateTransition;
import javafx.util.Duration;
// import javafx.animation.Transition.*;

public class Main extends Application {

    @FXML
    private Circle circle1;

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

    @Override
    public void start(Stage primaryStage) throws Exception {
        Path path = new Path();
        path.getElements().add(new MoveTo(0f, 50f));

        TranslateTransition tt = new TranslateTransition(Duration.seconds(2), circle1);
        double c1X = circle1.getLayoutX();//エラー発生
        // tt.setFromX(c1X);
        // tt.setToX(c1X + 20);


        URL location = getClass().getResource( "Main.fxml" );

        FXMLLoader fxmlLoader = new FXMLLoader( location );
        Pane root = (Pane) fxmlLoader.load();
        Scene scene = new Scene( root , 600 , 400 );
        primaryStage.setScene( scene );
        primaryStage.show();
    }
}

FXML
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.shape.Circle?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1">
   <top>
      <HBox prefHeight="31.0" prefWidth="600.0" BorderPane.alignment="CENTER">
         <children>
            <Button mnemonicParsing="false" text="Button" />
            <Button mnemonicParsing="false" text="Button" />
         </children>
      </HBox>
   </top>
   <bottom>
      <Slider BorderPane.alignment="CENTER" />
   </bottom>
   <center>
      <AnchorPane prefHeight="331.0" prefWidth="600.0" BorderPane.alignment="CENTER">
         <children>
            <ImageView fitHeight="100.0" fitWidth="80.0" layoutX="71.0" layoutY="67.0" pickOnBounds="true" preserveRatio="true" AnchorPane.bottomAnchor="169.0" AnchorPane.leftAnchor="71.0" AnchorPane.rightAnchor="449.0" AnchorPane.topAnchor="67.0">
               <image>
                  <Image url="@../../img/green.png" />
               </image>
            </ImageView>
            <ImageView fitHeight="100.0" fitWidth="80.0" layoutX="260.0" layoutY="67.0" pickOnBounds="true" preserveRatio="true">
               <image>
                  <Image url="@../../img/red.png" />
               </image>
            </ImageView>
            <ImageView fitHeight="100.0" fitWidth="80.0" layoutX="458.0" layoutY="67.0" pickOnBounds="true" preserveRatio="true">
               <image>
                  <Image url="@../../img/yellow.png" />
               </image>
            </ImageView>
            <Circle fx:id="circle1" fill="#ff1f1f" layoutX="362.0" layoutY="92.0" radius="10.0" stroke="TRANSPARENT" strokeType="INSIDE" />
            <Circle fx:id="circle2" fill="#ff1f1f" layoutX="398.0" layoutY="92.0" radius="10.0" stroke="TRANSPARENT" strokeType="INSIDE" />
            <Circle fx:id="circle3" fill="#ff1f1f" layoutX="432.0" layoutY="92.0" radius="10.0" stroke="TRANSPARENT" strokeType="INSIDE" />
         </children>
      </AnchorPane>
   </center>
</BorderPane>