JavaFX：如何在动画中修改多边形的顶点？

你已经会用Timeline动画圆形的位置了，那修改多边形顶点的思路其实是相通的——核心都是找到要动画的可观察属性，然后用KeyValue绑定属性的起始和结束状态，交给Timeline处理过渡。

关键原理：Polygon的points属性 #

JavaFX的Polygon类有个pointsProperty()，它是一个ObservableList<Double>，里面按顺序存储着多边形所有顶点的x、y坐标（比如第一个顶点是x0,y0，第二个是x1,y1，以此类推）。我们可以直接对这个列表属性做动画，让它在起始顶点列表和结束顶点列表之间平滑过渡。

完整代码示例 #

下面是一个完整的例子，我们创建一个五边形，让它在4秒内从一组随机顶点动画到另一组随机顶点，并且循环播放：

import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Polygon;
import javafx.stage.Stage;
import javafx.util.Duration;

import java.util.ArrayList;
import java.util.List;

public class PolygonAnimation extends Application {

    @Override
    public void start(Stage stage) {
        Pane root = new Pane();
        Polygon polygon = new Polygon();
        root.getChildren().add(polygon);

        // 生成随机起始顶点（5个顶点，每个顶点存x、y两个值）
        List<Double> startPoints = generateRandomPoints(5);
        // 生成随机结束顶点
        List<Double> endPoints = generateRandomPoints(5);

        // 初始化多边形的初始顶点
        polygon.getPoints().addAll(startPoints);

        // 创建时间线动画
        Timeline timeline = new Timeline(
                // 起始帧：设置初始顶点
                new KeyFrame(Duration.ZERO, new KeyValue(polygon.pointsProperty(), startPoints)),
                // 结束帧：4秒后切换到目标顶点，用EASE_BOTH让动画更平滑
                new KeyFrame(Duration.seconds(4), new KeyValue(polygon.pointsProperty(), endPoints, Interpolator.EASE_BOTH))
        );
        // 设置循环播放，自动反向
        timeline.setCycleCount(Timeline.INDEFINITE);
        timeline.setAutoReverse(true);
        timeline.play();

        Scene scene = new Scene(root, 800, 600);
        stage.setTitle("Polygon Vertex Animation");
        stage.setScene(scene);
        stage.show();
    }

    // 生成指定数量顶点的随机坐标列表
    private List<Double> generateRandomPoints(int vertexCount) {
        List<Double> points = new ArrayList<>();
        for (int i = 0; i < vertexCount; i++) {
            points.add(Math.random() * 800); // x坐标范围0-800
            points.add(Math.random() * 600); // y坐标范围0-600
        }
        return points;
    }

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

注意事项 #

• 顶点数量必须一致：起始和结束的顶点列表长度要相同（也就是顶点个数一样），否则JavaFX无法正确插值，动画会出问题。
• 自定义插值器：如果默认的线性插值不符合需求，可以替换成Interpolator.EASE_IN、Interpolator.EASE_OUT或者自定义插值器，让动画更符合你的场景。
• 单个顶点动画：如果只需要动画某个特定顶点，也可以直接操作points列表的对应索引（比如polygon.getPoints().set(0, newX)），但用列表整体动画的方式会更连贯自然。

内容的提问来源于stack exchange，提问作者so.koni