Archive

Posts Tagged ‘animation’

JavaFX – Animation

April 23, 2009 4 comments

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

Advertisements
Categories: javafx Tags: ,

"Can JavaFX do this?"

March 1, 2009 13 comments

Couple of weeks back I had a session and booth at Sun Tech Days, Hyderabad. Many asked if JavaFX can really do all what Flex does? We demonstrated many samples that we had. But still wanted to show some sample which matches real website. So here is a sample which mimics Adobe – Discover your Shortcut to Brilliant” website.

For Applet mode, click on above image

For standalone mode

Let me know your comments/suggestions…

Categories: javafx Tags: ,