(Update for javafxgui.*) |
|||
(6 intermediate revisions by 2 users not shown) | |||
Line 6: | Line 6: | ||
<code><pre> |
<code><pre> |
||
+ | /* |
||
⚫ | |||
+ | * AnimationSimple.fx |
||
+ | * JavaFX version 1.0 |
||
+ | * Created on Dec 20, 2008, 9:25:19 PM |
||
+ | */ |
||
import javafx.animation.*; |
import javafx.animation.*; |
||
− | import |
+ | import javafx.ext.swing.SwingButton; |
+ | import javafx.scene.paint.*; |
||
⚫ | |||
⚫ | |||
+ | import javafx.stage.Stage; |
||
+ | var stageX = 0; |
||
+ | var stageY = 0; |
||
+ | def sceneWidth = 500; |
||
+ | def sceneHeight = 250; |
||
+ | def buttonFromBottom = 70; |
||
var x = 0; |
var x = 0; |
||
Line 16: | Line 29: | ||
repeatCount: 3 |
repeatCount: 3 |
||
autoReverse: true |
autoReverse: true |
||
+ | |||
− | |||
− | keyFrames: [KeyFrame{ |
+ | keyFrames: [KeyFrame{ |
− | + | time: 0s |
|
− | + | values: x => 0}, |
|
+ | |||
⚫ | |||
+ | KeyFrame{ |
||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
}//Timeline; |
}//Timeline; |
||
+ | var startButton = SwingButton{ |
||
⚫ | |||
⚫ | |||
+ | translateY: sceneHeight - buttonFromBottom |
||
⚫ | |||
⚫ | |||
⚫ | |||
+ | }; |
||
+ | var pauseButton = SwingButton{ |
||
− | Frame { |
||
+ | translateX: startButton.translateX + startButton.width + 5 |
||
⚫ | |||
+ | translateY: sceneHeight - buttonFromBottom |
||
− | |||
− | + | text: "Pause" |
|
⚫ | |||
− | background : Color.WHITE; |
||
− | + | t.pause(); |
|
− | + | } |
|
+ | }; |
||
+ | |||
+ | var resumeButton = SwingButton{ |
||
+ | translateX: pauseButton.translateX + pauseButton.width + 5 |
||
+ | translateY: sceneHeight - buttonFromBottom |
||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
+ | }; |
||
+ | var stopButton = SwingButton{ |
||
⚫ | |||
+ | translateX: resumeButton.translateX + resumeButton.width + 5 |
||
⚫ | |||
− | + | translateY: sceneHeight - buttonFromBottom |
|
− | + | text: "Stop" |
|
− | + | action: function(): Void{ |
|
− | + | t.stop(); |
|
− | + | } |
|
+ | }; |
||
+ | |||
+ | Stage { |
||
⚫ | |||
+ | scene: Scene{ |
||
+ | width: sceneWidth |
||
+ | height: sceneHeight |
||
⚫ | |||
+ | Rectangle { // the moving blue square |
||
⚫ | |||
⚫ | |||
+ | width: 100 |
||
+ | height: 100 |
||
+ | fill: Color.BLUE |
||
} |
} |
||
⚫ | |||
+ | startButton, |
||
− | + | pauseButton, |
|
⚫ | |||
⚫ | |||
− | + | resumeButton, |
|
− | action: function(): Void{t.pause();}}, |
||
− | + | stopButton |
|
− | + | ||
+ | ] //content |
||
+ | |||
+ | } // Scene |
||
+ | }//Stage |
||
⚫ | |||
⚫ | |||
⚫ | |||
− | }//BorderPanel |
||
− | }//Frame |
||
</pre></code> |
</pre></code> |
||
+ | [[User:Cdea|Cdea]] 06:22, 21 December 2008 (UTC) |
||
− | |||
== AnimationTwoValues.fx == |
== AnimationTwoValues.fx == |
||
Line 69: | Line 112: | ||
<code><pre> |
<code><pre> |
||
− | import javafx. |
+ | import javafx.ext.swing.*; |
+ | import javafx.scene.geometry.*; |
||
+ | import javafx.scene.paint.*; |
||
import javafx.animation.*; |
import javafx.animation.*; |
||
import java.lang.System; |
import java.lang.System; |
||
Line 93: | Line 138: | ||
+ | SwingFrame { |
||
− | Frame { |
||
closeAction: function(): Void {System.exit(0);} |
closeAction: function(): Void {System.exit(0);} |
||
Line 114: | Line 159: | ||
bottom: FlowPanel{content: [ |
bottom: FlowPanel{content: [ |
||
− | + | SwingButton{text : "Start" |
|
− | action: function(): Void{t.start();}}, |
+ | action: function(): Void{t.start();}}, |
− | + | SwingButton{text : "Pause" |
|
− | action: function(): Void{t.pause();}}, |
+ | action: function(): Void{t.pause();}}, |
− | + | SwingButton{text : "Resume" |
|
− | action: function(): Void{t.resume();}}, |
+ | action: function(): Void{t.resume();}}, |
− | + | SwingButton{text : "Stop" |
|
− | action: function(): Void{t.stop();}} |
+ | action: function(): Void{t.stop();}} |
]}//FlowPanel |
]}//FlowPanel |
||
}//BorderPanel |
}//BorderPanel |
||
− | }// |
+ | }//SwingFrame |
</pre></code> |
</pre></code> |
||
Line 136: | Line 181: | ||
<code><pre> |
<code><pre> |
||
− | import javafx. |
+ | import javafx.ext.swing.*; |
+ | import javafx.scene.geometry.*; |
||
+ | import javafx.scene.paint.*; |
||
import javafx.animation.*; |
import javafx.animation.*; |
||
import java.lang.System; |
import java.lang.System; |
||
Line 184: | Line 231: | ||
+ | SwingFrame { |
||
− | Frame { |
||
closeAction: function(): Void {System.exit(0);} |
closeAction: function(): Void {System.exit(0);} |
||
Line 218: | Line 265: | ||
bottom: FlowPanel{content: [ |
bottom: FlowPanel{content: [ |
||
− | + | SwingButton{text : "Start" |
|
− | action: function(): Void{t.start();}}, |
+ | action: function(): Void{t.start();}}, |
− | + | SwingButton{text : "Pause" |
|
− | action: function(): Void{t.pause();}}, |
+ | action: function(): Void{t.pause();}}, |
− | + | SwingButton{text : "Resume" |
|
− | action: function(): Void{t.resume();}}, |
+ | action: function(): Void{t.resume();}}, |
− | + | SwingButton{text : "Stop" |
|
− | action: function(): Void{t.stop();}} |
+ | action: function(): Void{t.stop();}} |
]}//FlowPanel |
]}//FlowPanel |
||
}//BorderPanel |
}//BorderPanel |
||
− | }// |
+ | }//SwingFrame |
</pre></code> |
</pre></code> |
||
Line 240: | Line 287: | ||
<code><pre> |
<code><pre> |
||
+ | /* |
||
⚫ | |||
+ | * AnimationFading.fx |
||
+ | * JavaFX version 1.0 |
||
+ | * Created on Dec 20, 2008, 9:25:19 PM |
||
+ | */ |
||
import javafx.animation.*; |
import javafx.animation.*; |
||
− | import |
+ | import javafx.ext.swing.SwingButton; |
+ | import javafx.scene.paint.*; |
||
+ | import javafx.scene.Scene; |
||
+ | import javafx.scene.shape.Rectangle; |
||
+ | import javafx.stage.Stage; |
||
+ | var stageX = 0; |
||
+ | var stageY = 0; |
||
+ | def sceneWidth = 500.0; |
||
+ | def sceneHeight = 250.0; |
||
+ | def buttonFromBottom = 50; |
||
+ | |||
+ | var x = 0; |
||
var opacity = 0.0; |
var opacity = 0.0; |
||
var t = Timeline { |
var t = Timeline { |
||
− | repeatCount: Timeline.INDEFINITE |
+ | repeatCount: Timeline.INDEFINITE |
− | autoReverse: true |
+ | autoReverse: true |
− | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
− | }//Timeline; |
||
⚫ | |||
+ | time: 0s |
||
⚫ | |||
+ | KeyFrame{ |
||
+ | time: 3.5s |
||
⚫ | |||
⚫ | |||
⚫ | |||
− | Frame { |
||
⚫ | |||
⚫ | |||
− | background : Color.WHITE; |
||
⚫ | |||
− | height : 550 |
||
− | visible : true |
||
− | content: BorderPanel{ |
||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
+ | var startButton = SwingButton{ |
||
⚫ | |||
+ | translateX: 75 |
||
+ | translateY: sceneHeight - buttonFromBottom |
||
⚫ | |||
+ | t.playFromStart(); |
||
⚫ | |||
+ | }; // SwingButton |
||
+ | var pauseButton = SwingButton{ |
||
⚫ | |||
+ | translateX: startButton.translateX + startButton.width + 5 |
||
⚫ | |||
+ | translateY: sceneHeight - buttonFromBottom |
||
− | action: function(): Void{t.start();}}, |
||
⚫ | |||
⚫ | |||
+ | t.pause(); |
||
+ | } |
||
+ | }; // SwingButton |
||
+ | var resumeButton = SwingButton{ |
||
⚫ | |||
+ | translateX: pauseButton.translateX + pauseButton.width + 5 |
||
− | action: function(): Void{t.pause();}}, |
||
+ | translateY: sceneHeight - buttonFromBottom |
||
⚫ | |||
⚫ | |||
+ | t.play(); |
||
+ | } |
||
+ | }; // SwingButton |
||
+ | var stopButton = SwingButton{ |
||
⚫ | |||
+ | translateX: resumeButton.translateX + resumeButton.width + 5 |
||
− | action: function(): Void{t.resume();}}, |
||
+ | translateY: sceneHeight - buttonFromBottom |
||
⚫ | |||
⚫ | |||
+ | t.stop(); |
||
+ | } |
||
+ | }; // SwingButton |
||
+ | Stage { |
||
− | Button{text : "Stop" |
||
+ | title: 'Animation: Fading' |
||
⚫ | |||
+ | scene: Scene{ |
||
− | ]}//FlowPanel |
||
+ | width: sceneWidth |
||
− | }//BorderPanel |
||
+ | height: sceneHeight |
||
− | }//Frame |
||
⚫ | |||
+ | Rectangle { |
||
⚫ | |||
⚫ | |||
+ | width: sceneWidth |
||
+ | height: sceneHeight - buttonFromBottom - 20 |
||
+ | fill: Color.BLUE |
||
+ | opacity: bind opacity |
||
+ | },// Rectangle |
||
+ | |||
+ | |||
+ | startButton, |
||
+ | |||
+ | pauseButton, |
||
+ | |||
+ | resumeButton, |
||
+ | |||
+ | stopButton |
||
⚫ | |||
⚫ | |||
+ | } // Scene |
||
+ | }//Stage |
||
</pre></code> |
</pre></code> |
||
Line 302: | Line 394: | ||
[[Category:Code Example]] |
[[Category:Code Example]] |
||
+ | [[User:Cdea|Cdea]] 06:26, 21 December 2008 (UTC) |
Latest revision as of 21:21, 21 December 2008
Simple animation examples with Timeline{}/KeyFrame{} for the JavaFX Script Compiler.
AnimationSimple.fx
/*
* AnimationSimple.fx
* JavaFX version 1.0
* Created on Dec 20, 2008, 9:25:19 PM
*/
import javafx.animation.*;
import javafx.ext.swing.SwingButton;
import javafx.scene.paint.*;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
var stageX = 0;
var stageY = 0;
def sceneWidth = 500;
def sceneHeight = 250;
def buttonFromBottom = 70;
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;
var startButton = SwingButton{
text: "Start"
translateX: 75
translateY: sceneHeight - buttonFromBottom
action: function(): Void{
t.playFromStart();
}
};
var pauseButton = SwingButton{
translateX: startButton.translateX + startButton.width + 5
translateY: sceneHeight - buttonFromBottom
text: "Pause"
action: function(): Void{
t.pause();
}
};
var resumeButton = SwingButton{
translateX: pauseButton.translateX + pauseButton.width + 5
translateY: sceneHeight - buttonFromBottom
text: "Resume"
action: function(): Void{
t.play();
}
};
var stopButton = SwingButton{
translateX: resumeButton.translateX + resumeButton.width + 5
translateY: sceneHeight - buttonFromBottom
text: "Stop"
action: function(): Void{
t.stop();
}
};
Stage {
title: 'Animation: Simple'
scene: Scene{
width: sceneWidth
height: sceneHeight
content: [
Rectangle { // the moving blue square
x: bind x
y: 0
width: 100
height: 100
fill: Color.BLUE
}
startButton,
pauseButton,
resumeButton,
stopButton
] //content
} // Scene
}//Stage
Cdea 06:22, 21 December 2008 (UTC)
AnimationTwoValues.fx
import javafx.ext.swing.*;
import javafx.scene.geometry.*;
import javafx.scene.paint.*;
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;
SwingFrame {
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: [
SwingButton{text : "Start"
action: function(): Void{t.start();}},
SwingButton{text : "Pause"
action: function(): Void{t.pause();}},
SwingButton{text : "Resume"
action: function(): Void{t.resume();}},
SwingButton{text : "Stop"
action: function(): Void{t.stop();}}
]}//FlowPanel
}//BorderPanel
}//SwingFrame
AnimationNested.fx
import javafx.ext.swing.*;
import javafx.scene.geometry.*;
import javafx.scene.paint.*;
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;
SwingFrame {
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: [
SwingButton{text : "Start"
action: function(): Void{t.start();}},
SwingButton{text : "Pause"
action: function(): Void{t.pause();}},
SwingButton{text : "Resume"
action: function(): Void{t.resume();}},
SwingButton{text : "Stop"
action: function(): Void{t.stop();}}
]}//FlowPanel
}//BorderPanel
}//SwingFrame
AnimationFading.fx
/*
* AnimationFading.fx
* JavaFX version 1.0
* Created on Dec 20, 2008, 9:25:19 PM
*/
import javafx.animation.*;
import javafx.ext.swing.SwingButton;
import javafx.scene.paint.*;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
var stageX = 0;
var stageY = 0;
def sceneWidth = 500.0;
def sceneHeight = 250.0;
def buttonFromBottom = 50;
var x = 0;
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;
var startButton = SwingButton{
text: "Start"
translateX: 75
translateY: sceneHeight - buttonFromBottom
action: function(): Void{
t.playFromStart();
}
}; // SwingButton
var pauseButton = SwingButton{
translateX: startButton.translateX + startButton.width + 5
translateY: sceneHeight - buttonFromBottom
text: "Pause"
action: function(): Void{
t.pause();
}
}; // SwingButton
var resumeButton = SwingButton{
translateX: pauseButton.translateX + pauseButton.width + 5
translateY: sceneHeight - buttonFromBottom
text: "Resume"
action: function(): Void{
t.play();
}
}; // SwingButton
var stopButton = SwingButton{
translateX: resumeButton.translateX + resumeButton.width + 5
translateY: sceneHeight - buttonFromBottom
text: "Stop"
action: function(): Void{
t.stop();
}
}; // SwingButton
Stage {
title: 'Animation: Fading'
scene: Scene{
width: sceneWidth
height: sceneHeight
content: [
Rectangle {
x: 20
y: 20
width: sceneWidth
height: sceneHeight - buttonFromBottom - 20
fill: Color.BLUE
opacity: bind opacity
},// Rectangle
startButton,
pauseButton,
resumeButton,
stopButton
] //content
} // Scene
}//Stage
Cdea 06:26, 21 December 2008 (UTC)