JavaFX Animation - Start, Pause, Resume

If you’re learning JavaFX and want to create interactive animations, this tutorial is perfect for you! 🎨 We’ll show you how to start, pause, resume, and stop animations using Timeline and JavaFX properties. This is a core skill for building dynamic UIs, games, or interactive applications in Java.

Why JavaFX Animation is Important 🎯​

JavaFX provides powerful animation tools that let you:

• Create smooth object movements
• Control animations dynamically
• Bind animations to UI properties
• Make your applications interactive and visually appealing

Using Timeline with KeyFrames is one of the most common approaches to handle animations in JavaFX.

---

Key Components in This Animation Example 🔑​

1. DoubleProperty for Animation​

DoubleProperty startXVal = new SimpleDoubleProperty(100.0);

• Represents the X coordinate of the animated object
• Using JavaFX properties allows binding to shapes

---

2. The Animated Line ✨​

line = LineBuilder.create()
    .startY(50)
    .endX(200)
    .endY(400)
    .strokeWidth(4)
    .stroke(Color.BLUE)
    .build();

• This Line object moves horizontally
• strokeWidth sets thickness and Color.BLUE sets color

---

3. Timeline and KeyFrames ⏳​

Timeline anim = TimelineBuilder.create()
    .autoReverse(true)
    .keyFrames(
        new KeyFrame(new Duration(0.0), new KeyValue(startXVal, 100.0)),
        new KeyFrame(new Duration(1000.0), new KeyValue(startXVal, 300.0, Interpolator.LINEAR))
    )
    .cycleCount(Timeline.INDEFINITE)
    .build();

• Moves startXVal from 100 to 300
• Interpolator.LINEAR ensures smooth motion
• autoReverse(true) makes the animation bounce back automatically
• cycleCount(Timeline.INDEFINITE) loops forever

---

4. Control Buttons – Start, Pause, Resume, Stop 🎛️​

startButton.setOnAction(e -> anim.playFromStart());
pauseButton.setOnAction(e -> anim.pause());
resumeButton.setOnAction(e -> anim.play());
stopButton.setOnAction(e -> anim.stop());

• startButton begins animation from the start
• pauseButton temporarily stops the animation
• resumeButton continues from where it paused
• stopButton completely stops the animation

Button states are dynamically enabled or disabled using bindings:

startButton.disableProperty().bind(anim.statusProperty().isNotEqualTo(Animation.Status.STOPPED));
pauseButton.disableProperty().bind(anim.statusProperty().isNotEqualTo(Animation.Status.RUNNING));
resumeButton.disableProperty().bind(anim.statusProperty().isNotEqualTo(Animation.Status.PAUSED));
stopButton.disableProperty().bind(anim.statusProperty().isEqualTo(Animation.Status.STOPPED));

---

5. Binding Line Position 📍​

line.startXProperty().bind(startXVal);

• Ensures the line moves smoothly according to the property
• Demonstrates JavaFX binding concept, very useful for interactive apps

---

Full JavaFX Animation Example 🚀​

1. Create a class extending Application
2. Initialize DoubleProperty for animation
3. Build the Line shape to animate
4. Set up Timeline with KeyFrames
5. Add Start, Pause, Resume, Stop buttons
6. Bind line position to property
7. Set Scene and Stage

This pattern works for any moving shape or UI animation you want to create.

Benefits of Learning JavaFX Animations 🌟​

• Makes Java GUI apps more interactive
• Prepares you for game development and interactive simulations
• Teaches key concepts like Timeline, KeyFrame, Property Binding, and Interpolators
• Helps build professional desktop applications with dynamic effects

💡 Tip: Experiment with different durations, colors, and shapes to create your own animation effects.