Thursday Apr 23, 2009

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>

About


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

Search

Categories
Archives
« April 2015
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