Scribd
Upload
14 views15 pages

6 Animation

Uploaded by

مصباح موسى
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views15 pages

6 Animation

Uploaded by

مصباح موسى
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

VISUAL

PROGRAMMING
Animation

MUSBAH J. MOUSA
IYAS A. I. ESHAIKHKHALIL

1
OUTLINES
• Introduction
• Path Transition
• Fade Transition
• Timeline

2
INTRODUCTION
• In general, animating an object implies creating illusion of
its motion by rapid display.
• In JavaFX, a node can be animated by changing its
property over time.
• JavaFX provides a package named javafx.animation.
• JavaFX provides the Animation class with the core
functionality for all animations.

3
ANIMATION CLASS

4
ANIMATION
• Animation in JavaFX can be divided into timeline animation
and transitions.
• Timeline and Transition are subclasses of the
javafx.animation.Animation class.

5
TRANSITION EXAMPLES
• Fade Transition
• Fill Transition
• Rotate Transition
• Scale Transition
• Stroke Transition
• Translate Transition
• Path Transition
• Sequential Transition
• Parallel Transition

6
PATH TRANSITION
• A path transition moves a node along a path from one end
to the other over a given time.

7
PATH TRANSITION

8
PATH TRANSITION EXAMPLE
PathTransitionDemo
// Create a path transition
PathTransition pt = new PathTransition();
pt.setDuration(Duration.millis(4000));
pt.setPath(circle);
pt.setNode(rectangle);
pt.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT);
pt.setCycleCount(Timeline.INDEFINITE);
pt.setAutoReverse(true);
pt.play(); // Start animation

9
PATH TRANSITION
• Duration:
• The duration of this Transition in milliseconds.
• Node:
• The target node of this PathTransition.
• Orientation:
• Specifies the upright orientation of node along the path.
• Orientation has two possible values:
• NONE
• The targeted node's rotation matrix stays unchange along the
geometric path.
• ORTHOGONAL_TO_TANGENT
• The targeted node's rotation matrix is set to keep node
perpendicular to the path's tangent along the geometric path.
• Path:
• The shape on which outline the node should be animated.

10
FADE TRANSITION
• The FadeTransition class animates the change of the
opacity in a node over a given time.

11
FADE TRANSITION EXAMPLE
FadeTransitionDemo
// Apply a fade transition to ellipse
FadeTransition ft = new FadeTransition(Duration.millis(3000), ellipse);
ft.setFromValue(1.0);
ft.setToValue(0.1);
ft.setCycleCount(Timeline.INDEFINITE);
ft.setAutoReverse(true);
ft.play(); // Start animation

12
TIMELINE
• The Timeline class can be used to program any animation
using one or more KeyFrames.
• Each KeyFrame is executed sequentially at a specified
time interval.
• Timeline inherits from Animation.

Key Frames

0 sec
Duration
onFinished: EventHandler<ActionEvent>

13
TIMELINE
TimelineDemo
// Create a handler for changing text
EventHandler<ActionEvent> eventHandler = e -> {
if (text.getText().length() != 0) {
text.setText("");
} else {
text.setText("Programming is fun");
}
};
// Create an animation for alternating text
Timeline animation = new Timeline(new KeyFrame(Duration.millis(500), eventHandler));
animation.setCycleCount(Timeline.INDEFINITE);
animation.play(); // Start animation

14
ANY QUESTIONS?

15

You might also like