java - 如何在 Javafx 中制作弧线动画

Question

我正在开发一个简单的应用程序，它具有饼图。我的目标是，如果用户将鼠标悬停在图表的任何部分上，它将展开并显示更多信息。在我的程序中，图表由 3 条弧线组成。这是我的代码。

 import javafx.scene.Group; //Maybe too many imports, I just use em all
 import javafx.scene.Scene; //because I'm lazy
 import javafx.stage.Stage;
 import javafx.util.Duration;
 import javafx.scene.paint.Color; 
 import javafx.scene.shape.Arc; 
 import javafx.scene.shape.Rectangle;
 import javafx.event.EventHandler;
 import javafx.event.ActionEvent;
 import javafx.event.Event;
 import javafx.application.Application; 
 import javafx.scene.shape.*;
 import javafx.scene.shape.Line;
 import javafx.scene.text.Text;
 import javafx.scene.text.Font;
 import javafx.scene.text.FontWeight;
 import javafx.scene.input.MouseEvent;
 import javafx.animation.ScaleTransition;
 import java.lang.Thread;

public class AnimatingDemo extends Application{
    public static void main(String[] args) {
        launch(args);
    }
    @Override
    public void start(Stage stage) {
      //create 3 arc variables
      Arc arc1 = new Arc();
      Arc arc2 = new Arc();
      Arc arc3 = new Arc();
          //set up arc1 in place and to right color
      arc1.setFill(Color.rgb(35,25,43,1.0));
      arc1.setCenterX(250);
      arc1.setCenterY(250);
      arc1.setRadiusX(100.0f);
      arc1.setRadiusY(100.0f);
      arc1.setStartAngle(315);
      arc1.setLength(-90);
      arc1.setType(ArcType.ROUND);
      //set up and color arc2
      arc2.setFill(Color.rgb(39,70,144,1.0));
      arc2.setCenterX(250);
      arc2.setCenterY(250);
      arc2.setRadiusX(100.0f);
      arc2.setRadiusY(100.0f);
      arc2.setStartAngle(90);
      arc2.setLength(-135);
      arc2.setType(ArcType.ROUND);
      //set up and color arc3
      arc3.setFill(Color.rgb(54,65,86,1.0));
      arc3.setCenterX(250);
      arc3.setCenterY(250);
      arc3.setRadiusX(100.0f);
      arc3.setRadiusY(100.0f);
      arc3.setStartAngle(225);
      arc3.setLength(-135);
      arc3.setType(ArcType.ROUND);

      //create root group
      Group root = new Group();
      //set up window
      //add nodes to root
      root.getChildren().addAll(arc1,arc2,arc3);
      Scene scene = new Scene(root, 500,500);
      stage.setTitle("Testing arc animation");
      stage.setScene(scene);
      stage.show();
    }
}

这只是我制作的一个示例，以便我可以重现问题，但它说明了要点。我研究了 Javafx 中的各种动画方法。动画类似乎最可行，所以我在我的程序中尝试了它。我使用了以下代码:

  arc1.addEventFilter(MouseEvent.MOUSE_PRESSED, new   EventHandler<MouseEvent>() {
        @Override
        public void handle(MouseEvent mouseEvent) {
            ScaleTransition st = new ScaleTransition(Duration.millis(1500),arc1);
            st.setByX(0.3);
            st.setByY(0.3);
            st.setCycleCount(1);
            st.setAutoReverse(false);
            st.play();

        }
  });

我对每个弧重复了 3 次，但这在这里是多余的。

无论如何，结果是圆弧的两端都缩放了，所以圆周率图看起来很乱，不再居中，而且缩放比例根据圆弧的大小而增加，所以不一致。

然后我决定转向更基本的方法，使用 thread.sleep()。

  arc1.addEventFilter(MouseEvent.MOUSE_PRESSED, new EventHandler<MouseEvent>() {
        @Override
        public void handle(MouseEvent mouseEvent) {
            for(int a = 0; a < 10; a++) {
                try {
                    arc1.setRadiusX(arc1.getRadiusX() + 1);
                    arc1.setRadiusY(arc1.getRadiusY() + 1);
                    Thread.sleep(100);
                }
                catch(InterruptedException e) {
                    e.printStackTrace();
                }
            }

        }
  });

这也不起作用，圆圈会立即扩展我想要的给定数量的单位(立即)。

所以我的问题是，我能做什么？有没有一种方法可以防止动画类中的倾斜？我可以以某种方式使 thread.sleep 动画流畅吗？任何建议都会有所帮助，感谢您的宝贵时间!

附注如果需要更多评论请告诉我

Answer 1

我不确定这正是您正在寻找的，因为您使用的是 Arc 而不是正确的 PieChart，但我使用了 >PieChart 类并完成了您所做的一切，效果很好。

在这里，我采用了 PieChart.Data 类并制作了三个单独的类用于测试。

我通过在 PieChart.Data 变量上调用 .getNode() 添加了一个 EventFilter，然后粘贴您上面提供的方法.

再次，我认为您使用 Arc 而不是 PieChart 是有原因的，但我让它以这种方式工作。

@Override
    public void start(Stage stage) {
        ObservableList<PieChart.Data> data = FXCollections.observableArrayList();
        PieChart pieChart = new PieChart(data);
        PieChart.Data one = new PieChart.Data("one", 50.0);
        PieChart.Data two = new PieChart.Data("two", 33.0);
        PieChart.Data three = new PieChart.Data("three", 17.0);
        data.addAll(one, two, three);
        one.getNode().addEventFilter(MouseEvent.MOUSE_PRESSED, mouseEvent -> {
            ScaleTransition st = new ScaleTransition(Duration.millis(1500),one.getNode());
            st.setByX(0.3);
            st.setByY(0.3);
            st.setCycleCount(1);
            st.setAutoReverse(false);
            st.play();

        });
        two.getNode().addEventFilter(MouseEvent.MOUSE_PRESSED, mouseEvent -> {
            ScaleTransition st = new ScaleTransition(Duration.millis(1500),two.getNode());
            st.setByX(0.3);
            st.setByY(0.3);
            st.setCycleCount(1);
            st.setAutoReverse(false);
            st.play();

        });
        three.getNode().addEventFilter(MouseEvent.MOUSE_PRESSED, mouseEvent -> {
            ScaleTransition st = new ScaleTransition(Duration.millis(1500),three.getNode());
            st.setByX(0.3);
            st.setByY(0.3);
            st.setCycleCount(1);
            st.setAutoReverse(false);
            st.play();

        });

        //create root group
        Group root = new Group();
        //set up window
        //add nodes to root
        root.getChildren().addAll(pieChart);
        Scene scene = new Scene(root, 500,500);
        stage.setTitle("Testing arc animation");
        stage.setScene(scene);
        stage.show();
    }