NAV Navbar
java
  • Introduction
  • Installation
  • Animation
  • Chaining
  • Interpolators
  • Animation State
  • Introduction

    Welcome to the Sprint guide! Sprint is an animation framework for JavaFX that makes animations incredibly easy.

    Installation

    Just add the .jar from the releases page of the GitHub repo to install.

    You can also run the .jar to look at a demo of some quick animations made with Sprint. Download the source from the GitHub Repository if you want to take a look at how the demo was made and learn by example.

    In the following guide, you can follow along with the example code shown on the right pane.

    You can check out the javadocs for a list of all methods and properties.

    Animation

    Setup Sprint

    Create an instance of the Sprint class and assign it a node to animate.

    Sprint sprint = new Sprint(button);
    

    First, create an instance of sprint by assigning it the node (element) you want to animate. Sprint can animate any object of the Node class, which includes Shapes and Control (UI) elements.

    Animate

    Next, animate the node using one of the following methods.

    Method Description
    move Moves the node to specified coordinates
    rotate Rotates the node by a number of degrees
    scale Scales the node by a factor
    fade Fades in or out to a new opacity value
    fillColor Changes the fill color (shapes only)
    strokeColor Changes the stroke/border color (shapes only)

    Each method has a to and from version. For example, move has a moveTo and a moveFrom method.

    To Methods: Animate a property to the new value given. Good for interaction animations.

    From Methods: First set the property to the given values, and then animate the property back to its original value. Good for presentation animations, such as making elements fade in or move in when a window first opens, or while transitioning between scenes.

    Parameters

    Each method comes has two parameters:

    An example animation of rotating the button.

    sprint.rotateTo(2, 360).sprint();
    

    For example, in the code to the right, we'll rotate by 360 degrees over a duration of 2 seconds.

    Chaining

    The best feature of Sprint is that you can easily chain animations to make complex sequences in single lines of code. By default, all animations that you chain will occur in parallel at the same time. However, you can use wait to change it to a sequential transition by making Sprint wait for all previous animations to complete before continuing. Here are three new methods you'll want to use.

    Use animation chaining and the wait method to create a complex animation sequence.

    Sprint sprint = new Sprint(titleLabel);
    sprint
      .moveFrom(duration, 0, -400)
      .setNode(captionLabel).moveFrom(duration, 0, -450).wait(0);
      .setNode(profileImage).moveFrom(duration, -400, 0)
      .setNode(headerImage).moveFrom(duration, -350, 0);
      .sprint();
    

    Here's a simple demo on the right. This first animates in the titleLabel and captionLabel from the top of the screen. Then, the wait method causes Sprint to wait until those nodes have finished animating, and then animates the profileImage and headerImage from the left of the screen.

    Interpolators

    Interpolator Types

    Interpolators make your animations awesome and fancy.

    They essentially provide mathematical functions to JavaFX to determine the speed vs. time graph for an animation. Rather than having an animation occur linearly, using an interpolator can make it stand out.

    JavaFX doesn't have many to choose from, so Sprint is also packed with lots of awesome Interpolator classes! With this, you can make an animation bounce, be elastic like a rubber band, and more. Credit to these interpolators go to Christian Schudt, who created them under the MIT License.

    setInterpolator(Interpolator interpolator) - change the interpolator Sprint is using. Pass in either a normal JavaFX interpolator, or one of the ones included in Sprint.

    Easing Modes

    Easing modes allow you to select whether the interpolator effect occurs at the start, end, or both. To use it, just pass it in to the constructor of the interpolator you're using. By default (if nothing is passed in), EasingMode.EASE_IN will be used.

    Assign an elastic interpolator to Sprint.

    // Uses the default easing mode of EASE_IN
    sprint.setInterpolator(new ElasticInterpolator());
    // Specify an easing mode
    sprint.setInterpolator(new ElasticInterpolator(EasingMode.EASE_OUT));
    

    Here's an example on the right. This will give the animation an elastic swing, and the second line shows how to use a different easing mode.

    Animation State

    Adds a listener to Sprint to run a method whenever an animation completes.

    sprint.isAnimating.addListener( (v, oldValue, newValue) -> {
      System.out.println("Animation state is now: " + newValue);
    });
    

    Many times, you will probably want to know when something has finished animating. Well, there's good news! Sprint also has a property called isAnimating, that, well, tells you if sprint is currently animating or not! You can detect changes using a ChangeListener, as shown below.