JavaFX Stroke Transition

Introduction

JavaFX has support for animation through the timeline (one or more key frames that are processed sequentially), key frames (sets of key value variables holding node properties whose values are interpolated along a timeline), key values (properties, their end values, and interpolators), and interpolators (objects that calculate intermediate property values).

Although adaptable, this keyframe animation technique would generally necessitate the creation of the same (or nearly identical) animation boilerplate to execute fades, rotations, and other common transitions. Fortunately, the javafx.animation package has a collection of "canned" animated transition classes that spare you the trouble.

This article walks you through one such transition class in javafx.animation called javaFX stroke transition.

JavaFX Stroke Transition

The stroke color of the node is animated so that it can alternate between the two color values during the period given.

The class javafx.animation.FillTransition in javaFX, represents the Fill Transition. In order to generate an adequate Fill Transition, we must instantiate this class.

Properties

The following table describes the class's attributes and associated setter methods.

Constructors

The class contains five constructors.

1. public StokeTransition(): Initializes a new StrokeTransition object with the default parameters.
    
2. public StokeTransition(Duration duration): Creates a new Stroke Transition object with the given duration value.
    
3. public StokeTransition(Duration duration, Color fromValue, Color toValue): Generates a new instance of StrokeTransition with the provided duration, starting color value, and target color value.
    
4. public StokeTransition(Duration duration, Shape shape): Generates a new instance of StrokeTransition with the supplied duration and the shape to which the transition is to be applied.
    
5. public StokeTransition(Duration duration, Shape shape, Color fromValue, Color toValue): Generates a new StrokeTransition object with the supplied duration, shape, starting color value, and target color value.

Example

The stroke of the circle in the following example shifts from red to green.

import javafx.animation.StrokeTransition;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;
public
class NewFXExample extends Application
{
public
    static void main(String[] args)
    {
        launch(args);
    }
    @Override public void start(Stage primaryStage) throws Exception
    {
        Circle cir = new Circle(200, 150, 100);
        cir.setStroke(Color.PINK);
        cir.setFill(Color.YELLOW);
        cir.setStrokeWidth(10);


        StrokeTransition stroke = new StrokeTransition();
        // setting all the properties
        stroke.setAutoReverse(true);
        stroke.setCycleCount(500);
        stroke.setDuration(Duration.millis(1000));
        stroke.setFromValue(Color.RED);
        stroke.setToValue(Color.GREEN);
        stroke.setShape(cir);


        stroke.play();


        Group root = new Group();
        root.getChildren().addAll(cir);
        Scene scene = new Scene(root, 420, 300, Color.WHEAT);
        primaryStage.setScene(scene);
        primaryStage.setTitle("Stroke Transition example");
        primaryStage.show();
    }
}

Output:

With the help of the images below, the changing color of the stroke can be seen.