Expression Based PathTransitions in JavaFX

In JavaFX you are able to animate nodes along a path using PathTransition objects. PathTransitions use Shape objects to describe the path they need to animate along. JavaFX provides various types of Shapes (e.g. Polygon, Circle, PolyLine, Path). The Path shape is interesting in that it allows you to create complicated shapes using various movements called PathElement. Some PathElements are ArcTo, CubicCurveTo, HLineTo, LineTo, MoveTo, QuadCurveTo, VLineTo. Their names imply what they do.

While the PathElemetns are great for descrbing complex paths, I found that I would rather describe my paths using mathematical expressions. All the years of working with graphs in math class have affected the way my mind thinks. Quadratic and trigonometric expressions have a warm and cozy feel to them. As such, I sought to create PathTransitions that are described using mathematical expressions. I describe my solution in this post in the case that anyone wishes to accomplish the same.

To accomplish this, the first thing one needs is a way to solve mathematical expressions, like x*sin(x), or x^2/45, or (x^2)/sin(x-2), or whatever else you can imagine. For this I was lucky enough to stumble upon Lawrence Dol’s Software Monkey web site. Lawrence created a super light Java class, named MathEval, that evaluates mathematical expressions. The class is only 31KB and is very easy to use. I used MathEval to plot the points of given expression.

The JavaFx class Polyline is used to store the plotted points that MathEval solved for and turn them into a Shape object that PathTransition can take as input.

The class I ended up creating is called ExpressionTransitionMaker – sorry, no Javadoc, but you can find the source code here. This class is supposed to be very easy to use. It has two main methods that are worth mentioning. The first is:

public void addExpressionEntry(double start, double end, double poll, GraphType type, String expression) throws IllegalArgumentException;

This method is used to add expression entries, which consist of an expression with supporting information like the start and end positions on a graph, poll interval, and GraphType. ExpressionTransitionMaker can make three different types of graphs described by this GraphType enum:

public enum GraphType {

        vertical("y"), horizontal("x"), polar("a");
        private String var;

        GraphType(String var) {
            this.var = var;
        }

        public String getVar() {
            return var;
        }
    }

Each expression entry requires one expression. For horizontal graphs the expression needs to be in the form f(x); g(y) for vertical; and r(a) for polar. That is to say that the horizontal graph needs an expressions where the only variable is the letter “x”, and the vertical graph needs an expression where the only variable is the letter “y”, and the polar graph needs an expression where the only variable is the letter “a”, where “a” signifies the angle in radians. Muliple expression entries can be added.

As the names imply the horizontal and vertical graphs are intended for graphs that go left-and-right and up-and-down respectively. Polar graphs are intended for graphs that move along a circular or spiral path. All three can go in the opposite direction if given a negative poll value and the appropriate start and end points.

The second method worth mentioning is:

public SequentialTransition getSequentialTransition();

Because multiple expressions can be added into the ExpressionTransitionMaker, a SequentialTransition object is used to play all the PathTransitions that ExpressionTransitionMaker can create. The returned SequentialTransition is populated with multiple PathTransitions, one for each expression added. The SequentialTransition will play all its transitions in sequential order.

Well that’s about it. There is one or two more public methods in ExpressionTransitionMaker that a user might find handy but was left out for brevity. I created a simple little app that tests out the ExpressionTransitionMaker and can be found here. The app can be played over a browser and it allows you to enter in multiple expressions which are used to animate an image along the screen.

If you have any feedback to provide I would love to read it.

Reference: Expression Based PathTransitions in JavaFX from our W4G partner Jose Martinez

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

JPA Mini Book

Learn how to leverage the power of JPA in order to create robust and flexible Java applications. With this Mini Book, you will get introduced to JPA and smoothly transition to more advanced concepts.

JVM Troubleshooting Guide

The Java virtual machine is really the foundation of any Java EE platform. Learn how to master it with this advanced guide!

Given email address is already subscribed, thank you!
Oops. Something went wrong. Please try again later.
Please provide a valid email address.
Thank you, your sign-up request was successful! Please check your e-mail inbox.
Please complete the CAPTCHA.
Please fill in the required fields.

Leave a Reply


2 × = twelve



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy | Contact
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.
Do you want to know how to develop your skillset and become a ...
Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

Get ready to Rock!
You can download the complementary eBooks using the links below:
Close