时间轴动画的问题

Question

所以我正在尝试创建一个雪人并为其左臂和右臂设置动画，我查看了 Oracle 文档并尝试将我的时间写得尽可能接近示例设置它的方式。

作为参考，这是我正在查看的代码示例：

final Rectangle rectBasicTimeline = new Rectangle(100, 50, 100, 50);
rectBasicTimeline.setFill(Color.RED);
...
final Timeline timeline = new Timeline();
timeline.setCycleCount(Timeline.INDEFINITE);
timeline.setAutoReverse(true);
final KeyValue kv = new KeyValue(rectBasicTimeline.xProperty(), 300);
final KeyFrame kf = new KeyFrame(Duration.millis(500), kv);
timeline.getKeyFrames().add(kf);
timeline.play();

现在，这是我创建左臂的代码，并且（如果可行的话）对其进行动画处理。我的缺陷在哪里，我该如何解决？

private void drawLeftArm(GraphicsContext gc)
    {
        leftArm = new Ellipse();
        leftArm.setCenterX(90.0);
        leftArm.setCenterY(160.0);
        leftArm.setRadiusX(100.0);
        leftArm.setRadiusY(30.0);

        gc.setFill(Color.AQUAMARINE);
        gc.fillOval(leftArm.getCenterX(), leftArm.getCenterY(),     leftArm.getRadiusX(), leftArm.getRadiusY());

        timeLine = new Timeline();
        timeLine.setCycleCount(Timeline.INDEFINITE);
        timeLine.setAutoReverse(true);


        KeyValue LeftValue = new KeyValue(leftArm.centerYProperty(), 100);
        KeyFrame keyFrame  = new KeyFrame(Duration.millis(1000), LeftValue);

        timeLine.getKeyFrames().addAll(keyFrame); 
        timeLine.play();

    }

Answer 1

在您发布的代码中，您创建了 leftArm，但没有将其添加到场景图中。因此，它是动画的，但不可见。上面的 fillOval 调用等同于

gc.fillOval(90.0, 160.0, 100.0, 30.0);

在某种意义上它没有任何对 leftArm 的引用。所以你做了两件（独立的）事情：在 canvas 上画了一个椭圆，然后开始了一个看不见的椭圆的动画。

对于动画，请勿使用 Canvas/GraphicsContext。只需使用 Group or Pane 作为动画节点的父节点。

时间轴动画的问题

Issues with timeline animation

java

javafx

timeline.js