Introduction to JavaFX™ Technology-based Graphics & Animation
Richard BairChien YangStuart Marks
• Scenegraph• CSS• Media• Animation• Transitions• Futures
Agenda
2
3
Group
Image
Media
Group
Circle
Group
Image
Media
Group
Circle
4
• bounds• input events• transforms• effects• opacity
Node
5
6
Media
translateX: 100
rotate: 45
Circle
Group
• 0+ child Nodes• Order of nodes indicates painting order
• Blend modes
7
• CSS Stylesheets• Background fill• Width / Height
Scene
8
• Top-level container• Transparent, Undecorated, Decorated• Potentially represented by:
• JFrame on desktop• JApplet on web page• SVG player on mobile
• Stage Extensions
Stage
9
• Primary method of extending the Scene Graph• Simply override the create() method
• Return a Node of your choice
Custom Node
10
11
Group
Image
Media
CustomNode
Circle
• Arc• Circle• Ellipse• Line• Path• Polygon• Rectangle
• stroke• strokeWidth• fill• smooth
Shapes - Building Blocks
12
13
Demo
• Colors• 150+ built in colors (all the HTML & CSS built in values)• Color.web(“#aabbcc”)• Color.web(“blue”)• Color.rgb(128, 222, 21)
Colors
14
• startX, startY, endX, endY• Define the direction of the gradient• On the unit square
• Stops define each step in the gradient. Each stop• Has an offset between 0...1• Has a Color
Linear Gradients
15
16
strokeWidth: 3 Stop { offset: 0, Color.rgb(0, 124, 175) }
Stop { offset: 1, Color.rgb(0, 63, 90) }
stroke: Color.BLACK
17
Demo
• Image represents an in-memory Image• ImageView is a Node containing an Image• Image loaded synchronously or asynchronously
• For asynch, can specify a placeholder image
• Both ImageView and Image can scale• Preserve ratio• Fit within a specific width/height• When fit used on Image, keeps smaller image in memory
Images: Image and ImageView Classes
18
19
Demo
• x, y, TextOrigin• By default, text positioned such that (x, y) is left
baseline• Fonts can be specified on Text• Favor “fill” over “stroke”• Supports multiline text• Use alignment to align multiline text• To center text, compute the center via layout bounds
Text Node
20
21
Example(0, 0)
(0, -10)
Controls and Layout
• Controls• Button• CheckBox• Label• ListView• ProgressBar• ProgressIndicator• ScrollBar• Slider• TextBox
• Layout• Flow• HBox + VBox• Panel• Stack
22
• Effects are placed on Nodes• Many standard built in
• DropShadow• ColorAdjust• BoxBlur• Glow• Reflection• more...
Effects
23
24
Demo
CSS
25
Text { font-family: "Helvetica"; font-size: 20pt;}
Selector
Declaration
Rule
Cascading Style Sheets (CSS)
26
• Use JavaFX class name in selectors• Selectors can also have id, style class, pseudoclass
• Use JavaFX variables as property in declaration• Rectangle { fill: red }
• Styleable property can be a Skin variable• Use Boolean state variables as pseudoclasses
• Rectangle:hover { fill: red }
Cascading Style Sheets (CSS)
27
• Controls are styled through skin• .hotbutton { base: red }
• Must include stylesheet in stylesheets of Scene:• stylesheets: [ "{__DIR__}style.css" ]
• Canʼt style bound variables!
Cascading Style Sheets (CSS)
28
• Useful (not definitive) links • http://forums.sun.com/thread.jspa?threadID=5357325• https://javacss.dev.java.net/
• Samples• http://www.javafx.com/samples/Sudoku/• http://www.javafx.com/samples/CSSFun/
CSS: ID selector
29
/* style.css */
Text#title { font-family: "Helvetica"; font-size: 20pt;}
// SomeClass.fx
Text { id: “title” content: “Hello World!”}
CSS: Style class selector
30
/* style.css */
Text.bold { font-family: "Helvetica"; font-weight: bold;}
// SomeClass.fx
Text { styleClass: “bold” content: “Hello World!”}
CSS: Pseudoclass Selector
31
/* style.css */
Text:hover { fill: red;}
// SomeClass.fx
Text { content: “Hello World!”}
CSS: Some examples of valid selectors
32
TextBox Selects instances of TextBox
.bold Selects nodes with styleCass “bold”
#title Selects nodes with id “title”
Rectangle.rounded Selects Rectangles with styleClass “rounded”
#tree.folder Selects nodes with id “tree” and styleClass “folder”
TextBox:focused Selects instances of TextBox when focused
CSS: style attribute of Node class
33
/* style.css */
Text:hover { fill: red;}
// SomeClass.fx
Text { content: “Hello World!”}
• JavaFX supports both visual and audio media• Cross platform JavaFX Media file (fxm, mp3)• Also plays native formats (mov, wmv)• Media class represents a media file• MediaPlayer plays a Media file• MediaView is the Node which displays the Media• No built in Movie playing Control (yet!)
Media
34
35
Demo
• Animation is a key feature of every rich graphics application platform
• There are two supported animation types in JavaFX• Keyframe animations• Transitions
Animation
36
37
� � �
� � � � � � � � � � � � � � � � � � � � � � � � � � �
38
Key Value Interpolator Interpolated Value
KeyFrame Animation
• Timeline + KeyFrame + Interpolator• Just modifies the values of variables over time• Doesnʼt actually do any animation
• How to animate?• Arrange for KeyFrame to modify an interesting Node variable
• x, rotate, opacity, fill, ...
• Or bind a Node variable to a KeyFrame variable• Can animate Group variables to animate a hierarchy
39
40
Demo
KeyFrame Animation Setup
var x:Number;
def ball = Circle {fill: Color.REDradius: 10translateX: bind xtranslateY: 100 };
Stage {title: "KeyFrame Example"scene: Scene {
width: 300 height: 200fill: Color.WHITEcontent: ball
}}
41
KeyFrame Animation Example
Timeline {repeatCount: Timeline.INDEFINITEautoReverse: truekeyFrames: [
KeyFrame {time: 0svalues: x => 0.0
},KeyFrame {
time: 5svalues: x => 300.0 tween Interpolator.LINEAR
}]
}.play();
42
KeyFrame Animation Example (simplified)
Timeline {repeatCount: Timeline.INDEFINITEautoReverse: truekeyFrames: [
at (0s) { x => 0.0 },at (5s) { x => 300.0 tween Interpolator.LINEAR }
]}.play();
43
• Predefined, single-purpose animations• extends Timeline; can be nested and composed
• Leaf transitions:• Fade, Path, Pause, Rotate, Scale, Translate
• Can specify to, from, and by values
• Container transitions:• Parallel, Sequential
• Replace nested transitions in Java 1.1 and earlier
Transitions
44
45
Demo
Simple Transition Example
TranslateTransition {repeatCount: Timeline.INDEFINITEautoReverse: truenode: ballduration: 5sfromX: 0toX: 300
}.play();
46
Nested Transition Example (1)
def rotate360 = RotateTransition {duration: 3snode: targetbyAngle: 360 }
def scaleUp = ScaleTransition {duration: 4snode: targetbyX: 2 byY: 2 }
def fade = FadeTransition {duration: 5snode: targetfromValue: 1.0toValue: 0.1 }
47
Nested Transition Example (2)
48
SequentialTransition {content: [
PauseTransition { duration: 1s },ParallelTransition {
content: [rotate360,scaleUp
]},fade
]}.play();
Animation On A Path
def path = Path {elements: [
MoveTo { ... },CubicCurveTo { ... }
]}
PathTransition {node: pointerpath: AnimationPath.createFromPath(path)orientation: OrientationType.ORTHOGONAL_TO_TANGENTduration: 5srepeatCount: Timeline.INDEFINITEautoReverse: true
}.play();
49
50
Demo
• Full hardware acceleration• 3D Transforms• 3D Model Imports• More Controls• More Layouts• Faster & Smaller
Futures
51
• TS-5575: Extreme GUI Makeover• Wednesday 9:45am Room 135
• TS-5578: JavaFX UI Controls• Thursday 9:30am Room 124
Also See
52