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

Related Whitepaper:

Java Essential Training

Author David Gassner explores Java SE (Standard Edition), the language used to build mobile apps for Android devices, enterprise server applications, and more!

The course demonstrates how to install both Java and the Eclipse IDE and dives into the particulars of programming. The course also explains the fundamentals of Java, from creating simple variables, assigning values, and declaring methods to working with strings, arrays, and subclasses; reading and writing to text files; and implementing object oriented programming concepts. Exercise files are included with the course.

Get it Now!  

Leave a Reply


eight − = 1



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy
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.

Sign up for our Newsletter

20,709 insiders are already enjoying weekly updates and complimentary whitepapers! Join them now to gain exclusive access to the latest news in the Java world, as well as insights about Android, Scala, Groovy and other related technologies.

As an extra bonus, by joining you will get our brand new e-books, published by Java Code Geeks and their JCG partners for your reading pleasure! Enter your info and stay on top of things,

  • Fresh trends
  • Cases and examples
  • Research and insights
  • Two complimentary e-books