Simple animation examples with Timeline{}/KeyFrame{} for the JavaFX Script Compiler.
AnimationSimple.fx
import javafx.gui.*;
import javafx.animation.*;
import java.lang.System;
var x = 0;
var t = Timeline {
repeatCount: 3
autoReverse: true
keyFrames: [KeyFrame{time : 0s
values: x => 0},
KeyFrame{time : 2s
values: x => 400 tween Interpolator.LINEAR}
]//keyFrames
}//Timeline;
Frame {
closeAction: function(): Void {System.exit(0);}
title : 'Animation: Simple'
background : Color.WHITE;
width : 550
visible : true
content: BorderPanel{
top: Canvas {content:
Rectangle {x : bind x
y : 0
width : 100
height: 100
fill : Color.BLUE
}
}//Canvas
bottom: FlowPanel{content: [
Button{text : "Start"
action: function(): Void{t.start();}},
Button{text : "Pause"
action: function(): Void{t.pause();}},
Button{text : "Resume"
action: function(): Void{t.resume();}},
Button{text : "Stop"
action: function(): Void{t.stop();}}
]}//FlowPanel
}//BorderPanel
}//Frame
AnimationTwoValues.fx
import javafx.gui.*;
import javafx.animation.*;
import java.lang.System;
var x = 0;
var y = 0;
var t = Timeline {
repeatCount: 3
autoReverse: true
keyFrames: [KeyFrame{time : 0s
values: [x => 0,
y => 0]},
KeyFrame{time : 2s
values: [x => 400 tween Interpolator.LINEAR,
y => 200 tween Interpolator.LINEAR]}
]//keyFrames
}//Timeline;
Frame {
closeAction: function(): Void {System.exit(0);}
title : 'Animation: Two values'
background : Color.WHITE;
width : 550
height : 400
visible : true
content: BorderPanel{
top: Canvas {content:
Rectangle {x : bind x
y : bind y
width : 100
height: 100
fill : Color.BLUE
}
}//Canvas
bottom: FlowPanel{content: [
Button{text : "Start"
action: function(): Void{t.start();}},
Button{text : "Pause"
action: function(): Void{t.pause();}},
Button{text : "Resume"
action: function(): Void{t.resume();}},
Button{text : "Stop"
action: function(): Void{t.stop();}}
]}//FlowPanel
}//BorderPanel
}//Frame
AnimationNested.fx
import javafx.gui.*;
import javafx.animation.*;
import java.lang.System;
var xRed = 0;
var xGreen = 0;
var xBlue = 0;
var t = Timeline {
repeatCount: 3
autoReverse: true
keyFrames: [KeyFrame{time : 0s
action: function(): Void{System.out.println("Start red");}
values: xRed => 0},
KeyFrame{time : 250ms
timelines: [Timeline {
keyFrames: [KeyFrame{time : 0s
action: function(): Void{System.out.println("Start green");}
values: xGreen => 0},
KeyFrame{time : 250ms
timelines: [Timeline {
keyFrames: [KeyFrame{time : 0s
action: function(): Void{System.out.println("Start blue");}
values: xBlue => 0},
KeyFrame{time : 2s
values: xBlue => 400 tween Interpolator.LINEAR}
]// keyFrames blue
}]//timelines blue
},
KeyFrame{time : 2s
values: xGreen => 400 tween Interpolator.LINEAR}
]//keyFrames green
}]//timelines green
},
KeyFrame{time : 2s
values: xRed => 400 tween Interpolator.LINEAR}
]//keyFrames red
}//Timeline;
Frame {
closeAction: function(): Void {System.exit(0);}
title : 'Animation: Nested timelines'
background : Color.WHITE;
width : 550
visible : true
content: BorderPanel{
top: Canvas {content: [
Rectangle {x : bind xRed
y : 0
width : 100
height: 100
fill : Color.RED
},
Rectangle {x : bind xGreen
y : 110
width : 100
height: 100
fill : Color.GREEN
},
Rectangle {x : bind xBlue
y : 220
width : 100
height: 100
fill : Color.BLUE
}
]}//Canvas
bottom: FlowPanel{content: [
Button{text : "Start"
action: function(): Void{t.start();}},
Button{text : "Pause"
action: function(): Void{t.pause();}},
Button{text : "Resume"
action: function(): Void{t.resume();}},
Button{text : "Stop"
action: function(): Void{t.stop();}}
]}//FlowPanel
}//BorderPanel
}//Frame
AnimationFading.fx
import javafx.gui.*;
import javafx.animation.*;
import java.lang.System;
var opacity = 0.0;
var t = Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [KeyFrame{time : 0s
values: opacity => 0.0},
KeyFrame{time : 3.5s
values: opacity => 1.0 tween Interpolator.EASEBOTH}
]//keyFrames
}//Timeline;
Frame {
closeAction: function(): Void {System.exit(0);}
title : 'Animation: Fading'
background : Color.WHITE;
width : 450
height : 550
visible : true
content: BorderPanel{
top: Canvas {content:
Rectangle {x : 20
y : 20
width : 400
height : 400
fill : Color.BLUE
opacity: bind opacity
}// Rectangle
}//Canvas
bottom: FlowPanel{content: [
Button{text : "Start"
action: function(): Void{t.start();}},
Button{text : "Pause"
action: function(): Void{t.pause();}},
Button{text : "Resume"
action: function(): Void{t.resume();}},
Button{text : "Stop"
action: function(): Void{t.stop();}}
]}//FlowPanel
}//BorderPanel
}//Frame