How to rotate the arc with in the Circle1 path continuously? - javafx

Question

I am designing the web pages for that I have to rotate the arc in the circle path. I don't have previous experience in javafx. How do I rotate the Arc in the circle?
<?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

You need to use a controller. In the controller you need to animate the startAngle property of the Arc using a Timeline.
Note: I recommend using centerX and centerY instead of the layout properties. Furthermore wrapping a AnchorPane inside another currently isn't necessary, even more so since you're not using any anchors. A simple Pane would do the trick.
<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>
The arc radius is calculated as outerRadius - strokeWidth/2 = (circle1.radius - circle1.strokeWidth) - arc.strokeWidth / 2, i.e. in this case (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();
}
}
For counter-clockwise animation add 360 instead of subtracting it for the KeyValue of the second KeyFrame.