By Rakesh Menon on Apr 23, 2009
<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
Example, in order to change value of
opacity we can create a Timeline as shown below
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 - Moves node over specified path
- FadeTransition - For changing opacity of Node
- RotateTransition - For rotating Node
- ScaleTransition - For Scaling Node
- TranslateTransition - For moving Node over x and y coordinates
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
toValue for opacity. The animation is started using
RotateTransition is used for rotating a node. The node is associated with RotateTransition and
toAngle is specified in degrees.
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 -
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).
Hope this helps as a good starting point. For more information please refer to JavaFX API Documentation