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.

<script src="http://dl.javafx.com/1.2/dtfx.js"></script><script src="/rakeshmenonp/resource/Animation/Animation.js"></script>

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
    keyFrames: 
        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

Source:

<script type="text/javascript">var dzone_url = "http://blogs.sun.com/rakeshmenonp/entry/javafx_sudoku_css_support";</script> <script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src="http://widgets.dzone.com/widgets/zoneit.js"></script>

Comments:

Animations do not work (neither applet nor standalone).

Posted by Marc Kossa on April 23, 2009 at 12:01 PM IST #

@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

Posted by Rakesh Menon on April 24, 2009 at 03:19 AM IST #

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

Posted by Marc Kossa on April 24, 2009 at 12:12 PM IST #

@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

Posted by Rakesh Menon on April 24, 2009 at 02:29 PM IST #

it's very helpful Rakesh, thank you very much ;)

Posted by Wardoyo Atmosudiro on February 02, 2010 at 07:00 PM IST #

@Wardoyo Atmosudiro Glad! Thanks! :)

Posted by Rakesh Menon on February 03, 2010 at 05:55 AM IST #

Post a Comment:
Comments are closed for this entry.
About


The views expressed on this blog are my own and do not necessarily reflect that of my organization

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today