如何连续在Circle1路径中旋转圆弧？

Question

我正在设计网页，因为我必须在圆路径中旋转圆弧。我不知道我以前使用javafx的经历。请帮我如何旋转圆弧？

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

<?import javafx.scene.shape.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>


<AnchorPane xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8">
   <children>
      <AnchorPane prefHeight="666.0" prefWidth="645.0">
         <children>
            <Circle fx:id="circcle2" fill="#f700001d" layoutX="323.0" layoutY="298.0" radius="50.0" stroke="#f50000" strokeType="INSIDE" strokeWidth="2.0" />
            <Circle fx:id="circle1" fill="#f110000d" layoutX="323.0" layoutY="298.0" radius="70.0" stroke="#ea0202" strokeType="INSIDE" strokeWidth="2.0" />
            <Arc fx:id="arc" fill="#ff252100" layoutX="314.0" layoutY="284.0" length="70.0" radiusX="50.0" radiusY="50.0" startAngle="96.0" stroke="#f20000" strokeLineCap="BUTT" strokeWidth="10.0" />
         </children>
      </AnchorPane>
   </children>
</AnchorPane>

Answer 1

您需要使用控制器。在控制器中，您需要使用startAngle为Arc的{​​{1}}属性设置动画。

注意：我建议使用Timeline和centerX而不是布局属性。此外，目前不需要将centerY包装在另一个AnchorPane中，甚至更不用说，因为您没有使用任何锚点。一个简单的Pane就可以解决问题。

<Pane xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8" fx:controller="mypackage.Controller"
      prefHeight="666.0" prefWidth="645.0">
   <children>
       <Circle fx:id="circcle2" fill="#f700001d" centerX="323.0" centerY="298.0" radius="50.0" stroke="#f50000" strokeType="INSIDE" strokeWidth="2.0" />
       <Circle fx:id="circle1" fill="#f110000d" centerX="323.0" centerY="298.0" radius="70.0" stroke="#ea0202" strokeType="INSIDE" strokeWidth="2.0" />
       <Arc fx:id="arc" fill="#ff252100" centerX="323.0" centerY="298.0" length="70.0" radiusX="63.0" radiusY="63.0" startAngle="96.0" stroke="#f20000" strokeLineCap="BUTT" strokeWidth="10.0" />
   </children>
</Pane>

弧半径计算为outerRadius - strokeWidth/2 = (circle1.radius - circle1.strokeWidth) - arc.strokeWidth / 2，即本例中为(70 - 2) - 10/2 = 63。

package mypackage;

import javafx.fxml.FXML;
import javafx.animation.Animation;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.scene.shape.Arc;
import javafx.util.Duration;

public class Controller {

    @FXML
    private Arc arc;

    @FXML
    private void initialize() {
        Timeline animation = new Timeline(
            new KeyFrame(Duration.ZERO, new KeyValue(arc.startAngleProperty(), arc.getStartAngle(), Interpolator.LINEAR)),
            new KeyFrame(Duration.seconds(2), new KeyValue(arc.startAngleProperty(), arc.getStartAngle() - 360, Interpolator.LINEAR))
        );
        animation.setCycleCount(Animation.INDEFINITE);
        animation.play();
    }

}

对于逆时针动画，添加360而不是减去第二KeyValue的{​​{1}}。