Home > javafx > JavaFX – Animation

JavaFX – Animation

JavaFX provides animation support based on Timeline API. Timeline has a set of KeyFrame which get processed based on the time attribute of KeyFrame.

For Applet mode, click on above image

For standalone mode

Example, in order to change value of opacity we can create a Timeline as shown below

var timeline:Timeline = Timeline {
    repeatCount: 1
    autoReverse: true
        KeyFrame {
            time: 2s
            values: opacity => 1.0 tween Interpolator.EASEOUT 

Above code will change the value of opacity to 1.0 over a period of 2 seconds using values calculated by specified interpolator. There are many built-in interpolators such as DISCRETE, EASEBOTH, EASEIN, EASEOUT and LINEAR.

This may look a bit complicated for just changing the opacity value. The actual power of Timeline will be visible only when used for complex animations. For simple animations which involve just changing some attributes of Node we can use transition APIs.

javafx.animation.transition package has animation APIs specific to various attributes of Node.

PathTransition is already covered by JavaFX Sample – PathAnimation. Please refer to sample for more information.

FadeTransition can be used as shown below. We associate the node for which the opacity is to be changed to FadeTransition using node attribute. Then we specify the fromValue and toValue for opacity. The animation is started using play method.

var fadeTransition = FadeTransition {
    duration: 2s
    node: node
    fromValue: 1.0
    toValue: 0.1
    repeatCount: 2
    autoReverse: true

RotateTransition is used for rotating a node. The node is associated with RotateTransition and fromAngle and toAngle is specified in degrees.

var rotateTransition = RotateTransition {
    duration: 2s
    node: node
    fromAngle: 0
    toAngle: 360
    repeatCount: 2
    autoReverse: true

ScaleTransition is used for scaling node along x and y axis. The node is associated with ScaleTransition and attributes fromX, toX, fromY, toY specified to indicate the percentage of change – 0.0 to 1.0.

var scaleTransition = ScaleTransition {
    duration: 2s
    node: node
    fromX: 1.0
    toX: 0.5
    fromY: 1.0
    toY: 0.5
    repeatCount: 2
    autoReverse: true

TranslateTransition can be used for moving a node over x and y coordinates. The node is associated with TranslateTransition and range for fromX, fromY, toX and toY attributes are specified so as to move the node from source (fromX, fromY) point to destination point (toX, toY).

var translateTransition = TranslateTransition {
    duration: 2s
    node: node
    fromX: 0
    toX: 100
    repeatCount: 2
    autoReverse: true

Hope this helps as a good starting point. For more information please refer to JavaFX API Documentation


Categories: javafx Tags: ,
  1. Marc Kossa
    April 23, 2009 at 6:31 AM

    Animations do not work (neither applet nor standalone).

  2. April 23, 2009 at 9:49 PM

    @Marc Kossa Is it giving an error or application doesn’t start? In Main.fx (http://blogs.sun.com/rakeshmenonp/resource/Animation/Main_fx.html) since I don’t have a KeyFrame at 0s, it will start the start first animation only after 4 seconds

  3. Marc Kossa
    April 24, 2009 at 6:42 AM

    Today it works in standalone mode (go figure…) but still not in Applet mode (it links to a page that doesn’t exist).

  4. April 24, 2009 at 8:59 AM

    @Marc Kossa Then may be issue with JavaScript, here is the actual link to Applet. I’m just embedding this page in that region – http://blogs.sun.com/rakeshmenonp/resource/Animation/Animation.html

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: