- Basic Transitions
- Compound Transitions
- Custom Transitions
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Compound Transitions
The eight basic transition classes are supplemented by ParallelTransition and SequentialTransition classes for creating compound transitions. ParallelTransition lets you play a list of Animations (Transition subclasses and Timelines) in parallel, whereas SequentialTransition lets you play this list in sequence. Each class provides constructors for specifying these lists.
Because ParallelTransition and SequentialTransition extend Transition, they can be treated as basic transitions. For example, you can specify the number of cycles and auto-reverse. Also, their instances can be included in the lists of transitions to play in parallel or in sequence, for creating arbitrarily complex transition hierarchies. Listing 10 demonstrates these compound transition classes.
Listing 10—PSTDemo.java.
import javafx.animation.FadeTransition;
import javafx.animation.FillTransition;
import javafx.animation.ParallelTransition;
import javafx.animation.PauseTransition;
import javafx.animation.ScaleTransition;
import javafx.animation.SequentialTransition;
import javafx.application.Application;
import javafx.geometry.VPos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.paint.CycleMethod;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.scene.shape.Circle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.util.Duration;
public class PSTDemo extends Application
{
final static int SCENE_WIDTH = 250;
final static int SCENE_HEIGHT = 250;
@Override
public void start(Stage primaryStage)
{
Circle circle = new Circle();
circle.setCenterX(SCENE_WIDTH / 2);
circle.setCenterY(SCENE_HEIGHT / 2);
circle.setRadius(90);
circle.setFill(new RadialGradient(0.0, 0.0, 0.25, 0.25, 0.5, true,
CycleMethod.NO_CYCLE,
new Stop(0.0, Color.BLUE),
new Stop(1.0, Color.DARKBLUE)));
Text text = new Text();
text.setText("PSTransition Demo");
text.setFont(new Font("Arial BOLD", 14));
text.setX(circle.getCenterX());
text.setY(circle.getCenterY());
text.setTranslateX(-text.getLayoutBounds().getWidth() / 2);
text.setTranslateY(-text.getLayoutBounds().getHeight() / 2);
text.setTextOrigin(VPos.TOP);
text.setFill(Color.WHITE);
FadeTransition fadet_circ = new FadeTransition();
fadet_circ.setNode(circle);
fadet_circ.setFromValue(1.0);
fadet_circ.setToValue(0.0);
fadet_circ.setDuration(new Duration(2000));
fadet_circ.setCycleCount(4);
fadet_circ.setAutoReverse(true);
FadeTransition fadet_text_out = new FadeTransition();
fadet_text_out.setNode(text);
fadet_text_out.setFromValue(1.0);
fadet_text_out.setToValue(0.0);
fadet_text_out.setDuration(new Duration(4000));
FadeTransition fadet_text_in = new FadeTransition();
fadet_text_in.setNode(text);
fadet_text_in.setFromValue(0.0);
fadet_text_in.setToValue(1.0);
fadet_text_in.setDuration(new Duration(4000));
ScaleTransition scalt_circ = new ScaleTransition();
scalt_circ.setNode(circle);
scalt_circ.setFromX(1.0);
scalt_circ.setFromY(1.0);
scalt_circ.setToX(0.25);
scalt_circ.setToY(0.25);
scalt_circ.setDuration(new Duration(2000));
scalt_circ.setCycleCount(4);
scalt_circ.setAutoReverse(true);
PauseTransition paust = new PauseTransition();
paust.setDuration(new Duration(2000));
FillTransition fillt_text = new FillTransition();
fillt_text.setShape(text);
fillt_text.setDuration(new Duration(2000));
fillt_text.setToValue(Color.YELLOW);
ParallelTransition part = new ParallelTransition(fadet_circ, scalt_circ);
SequentialTransition seqt = new SequentialTransition(fadet_text_out, part,
fadet_text_in,
paust, fillt_text);
seqt.playFromStart();
Group root = new Group();
root.getChildren().addAll(circle, text);
Scene scene = new Scene(root, SCENE_WIDTH, SCENE_HEIGHT,
new LinearGradient(0.0, 0.0, 0.0, 1.0, true,
CycleMethod.NO_CYCLE,
new Stop(0.0, Color.BEIGE),
new Stop(1.0, Color.CORAL)));
primaryStage.setTitle("PSTransition Demo");
primaryStage.setScene(scene);
primaryStage.show();
primaryStage.setResizable(false);
}
}
Listing 10 creates a scene consisting of a circle overlaid by text. It also creates transitions for fading the circle and text, for scaling the circle, for pausing, and for changing the text's fill color. A sequential transition fades out the text, runs a parallel transition that fades out/in and scales up/down the circle a couple of times, fades in the text, pauses, and finally changes the text's fill color. Figure 9 shows the final result.
){kind=link}
Figure 9 The text color changes from white to yellow during the final transition.