JFXBuilder Blog

In the last week we’ve been adding animation support to JFXBuilder. Fortunately, JFXBuilder’s existing key frame animation model matches well with JavaFX - in particular, using the JavaFX “dur” statement:

    var i = [1..100] dur 1000;

JFXBuilder already has an animation panel that lets you animate almost any shape attribute: x, y, width, height, rotation, scale, skew, opacity, color, stroke color and stroke width. To define an animation, you simply draw a shape or drop a component, move the animation time slider to a different time, and change the attributes for the new time. JFXBuilder will automatically interpolate all the values between the two key frames.

To support this in JavaFX, we simply needed to add these attributes to the existing Shape node and build a standard transform that would bind to these attributes:

    transform = bind [translate(width/2, height/2), rotate(rotation), ... ]

We did this in a new JFX class called ShapeX (which subclasses Shape). The benefit of having these attributes explicitly defined is that it was now easy for JFXBuilder to define animation records for these attributes using the JFX dur statement. This is a nice improvement over other graphics description languages which require a record definition for every shape (with a transform update) for every frame of the animation.

The second issue we faced was how to batch up groups of dur statements for each key frame. Josh came up with an elegant solution for this - a simple KeyFrame class with a “frame” ivar. We use a “master” dur statement on this frame ivar to iterate over the number of key frame, then we use a trigger to catch the individual key frames, where the individual shape-attribute dur statements are called:

    // Define class for key frame counter
    class KeyFrame {
        attribute frame: Number;
    }
    // Declare trigger for key frame changes
    trigger on KeyFrame.frame = value
    {
        // Trigger actions for key frame 0
        if(frame==0)
        {
            ((ShapeX)canvas.content[5]).x = [68..173] dur 2680;
            ((ShapeX)canvas.content[5]).y = [263,261.821..184] dur 2680;
            ((ShapeX)canvas.content[5]).roll = [0..322] dur 2680;
            ((ShapeX)canvas.content[5]).scale = [1.2,1.206..1.6] dur 2680;
        }
        // Trigger actions for key frame 1
        ...
    }
    // Start animation
    new KeyFrame.frame = 0;

So now we have real JFX generation for JFXBuilder’s key frame animation panel. Tomorrow we’ll post an applet showing a simple animation in action. In the meantime, run the app to see key frame animation in JFXBuilder/JavaFX now.

Launch JFXBuilder: