如何在FXML中正确定义关键帧动画？去除控制器绑定代码

如果能在FXML里直接定义关键帧动画，很多带动画的文件格式就能无损迁移到FXML了。我已经熟悉RotateTransition这类简单的动画，但尝试用$text.translateX这类写法声明KeyValue的目标时，总会遇到类型检查的运行时错误。调试后写出了无报错的代码，但目标绑定没生效——现在我得在控制器里加一行text.xProperty().bind(count)才能让Text的X坐标更新，怎么去掉这行代码，纯用FXML实现？$text.translateX这种写法到底行不行？

原代码 #

animated.fxml

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

<?import javafx.animation.*?>
<?import javafx.beans.property.SimpleDoubleProperty?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.Group?>
<?import javafx.scene.Scene?>
<?import javafx.scene.text.Text?>
<?import javafx.util.Duration?>
<?import java.lang.Double?>
<Scene xmlns:fx="http://javafx.com/fxml" fx:controller="org.example.demo.AnimatedController">
    <height>240.0</height>
    <width>320.0</width>
    <fx:define>
        <SimpleDoubleProperty fx:id="count"/>
        <Timeline fx:id="timeline">
            <keyFrames>
                <fx:define>
                    <Double fx:id="endValue0" fx:value="0.0"/>
                    <Double fx:id="endValue1" fx:value="100.0"/>
                </fx:define>
                <KeyFrame fx:id="keyFrame0">
                    <values>
                        <KeyValue fx:id="keyValue0" endValue="$endValue0">
                            <target>
                                <fx:reference source="count"/>
                            </target>
                        </KeyValue>
                    </values>
                    <time>
                        <Duration fx:constant="ZERO"/>
                    </time>
                </KeyFrame>
                <KeyFrame fx:id="keyFrame1">
                    <values>
                        <KeyValue fx:id="keyValue1" endValue="$endValue1">
                            <target>
                                <fx:reference source="count"/>
                            </target>
                        </KeyValue>
                    </values>
                    <time>
                        <Duration millis="1000"/>
                    </time>
                </KeyFrame>
            </keyFrames>
        </Timeline>
    </fx:define>
    <Group>
        <Text fx:id="text" y="60" x="${count.value}">Hello, World!</Text>
        <Button onAction="#play">Play</Button>
    </Group>
</Scene>

AnimatedController.java

package org.example.demo;

import javafx.animation.Timeline;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.text.Text;

public class AnimatedController {

    @FXML
    private Text text;

    @FXML
    private Timeline timeline;

    @FXML
    private SimpleDoubleProperty count = new SimpleDoubleProperty(0);

    public void play(ActionEvent ignoredActionEvent) {
        text.xProperty().bind(count); // 去掉这行就无法更新Text的X坐标
        count.addListener((_, oldVal, newVal) -> System.out.printf("%s, %s, %s\n", text.getX(), oldVal, newVal));
        timeline.play();
    }
}

HelloApplication.java

package org.example.demo;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.io.IOException;

public class HelloApplication extends Application {
    @Override
    public void start(Stage stage) throws IOException {
        FXMLLoader fxmlLoader = new FXMLLoader(HelloApplication.class.getResource("animated.fxml"));
        Scene scene = fxmlLoader.load();
        stage.setScene(scene);
        stage.show();
    }

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

解决方案：直接在FXML中让动画操控Text的X属性 #

不需要中间的SimpleDoubleProperty作为中转，也不需要控制器里的绑定代码，直接让Timeline的关键帧作用于Text的xProperty即可。

修改后的animated.fxml

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

<?import javafx.animation.*?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.Group?>
<?import javafx.scene.Scene?>
<?import javafx.scene.text.Text?>
<?import javafx.util.Duration?>
<Scene xmlns:fx="http://javafx.com/fxml" fx:controller="org.example.demo.AnimatedController">
    <height>240.0</height>
    <width>320.0</width>
    <fx:define>
        <Timeline fx:id="timeline">
            <keyFrames>
                <!-- 初始帧：X坐标0 -->
                <KeyFrame time="0ms">
                    <values>
                        <KeyValue target="$text.xProperty" endValue="0.0"/>
                    </values>
                </KeyFrame>
                <!-- 1秒后：X坐标100 -->
                <KeyFrame time="1000ms">
                    <values>
                        <KeyValue target="$text.xProperty" endValue="100.0"/>
                    </values>
                </KeyFrame>
            </keyFrames>
        </Timeline>
    </fx:define>
    <Group>
        <Text fx:id="text" y="60" x="0.0">Hello, World!</Text>
        <Button onAction="#play">Play</Button>
    </Group>
</Scene>

修改后的AnimatedController.java

package org.example.demo;

import javafx.animation.Timeline;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.text.Text;

public class AnimatedController {

    @FXML
    private Text text;

    @FXML
    private Timeline timeline;

    public void play(ActionEvent ignoredActionEvent) {
        // 移除了text.xProperty().bind(count)这行代码
        text.xProperty().addListener((_, oldVal, newVal) -> 
            System.out.printf("%s, %s, %s\n", text.getX(), oldVal, newVal)
        );
        timeline.play();
    }
}

关键问题解释 #

1. 原代码的静态绑定无效：x="${count.value}"只是在FXML加载时给Text的X属性设置初始值，后续count变化不会自动同步——这种写法是一次性赋值，不是动态绑定。
2. $text.translateX写法错误：要引用节点的属性对象，必须用对应的xxxProperty()方法名，比如$text.xProperty或者$text.translateXProperty，直接写属性名translateX会导致类型不匹配，因为KeyValue需要的是ObservableValue类型的目标。
3. 中间属性冗余：原代码用count作为中转属性完全没必要，直接让动画操控目标节点的属性，不仅更简洁，还能避免绑定带来的额外开销。

内容的提问来源于stack exchange，提问作者Johannes Riecken