Planet JFX
(Update for new gui packages javafx.scene.*)
Cdea (talk | contribs)
 
(5 intermediate revisions by 2 users not shown)
Line 6: Line 6:
   
 
<code><pre>
 
<code><pre>
  +
/*
import javafx.ext.swing.*;
 
  +
* AnimationSimple.fx
import javafx.scene.geometry.*;
 
  +
* 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.paint.*;
import javafx.animation.*;
+
import javafx.scene.Scene;
import java.lang.System;
+
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 x = 0;
Line 18: Line 29:
 
repeatCount: 3
 
repeatCount: 3
 
autoReverse: true
 
autoReverse: true
  +
 
keyFrames: [KeyFrame{time : 0s
+
keyFrames: [KeyFrame{
values: x => 0},
+
time: 0s
+
values: x => 0},
  +
KeyFrame{time : 2s
 
  +
KeyFrame{
values: x => 400 tween Interpolator.LINEAR}
 
 
time: 2s
]//keyFrames
 
 
values: x => 400 tween Interpolator.LINEAR}
 
]//keyFrames
 
}//Timeline;
 
}//Timeline;
   
   
  +
var startButton = SwingButton{
 
text: "Start"
 
translateX: 75
  +
translateY: sceneHeight - buttonFromBottom
 
action: function(): Void{
 
t.playFromStart();
 
}
  +
};
   
  +
var pauseButton = SwingButton{
Frame {
 
  +
translateX: startButton.translateX + startButton.width + 5
closeAction: function(): Void {System.exit(0);}
 
  +
translateY: sceneHeight - buttonFromBottom
 
title : 'Animation: Simple'
+
text: "Pause"
 
action: function(): Void{
background : Color.WHITE;
 
width : 550
+
t.pause();
visible : true
+
}
  +
};
  +
  +
var resumeButton = SwingButton{
  +
translateX: pauseButton.translateX + pauseButton.width + 5
  +
translateY: sceneHeight - buttonFromBottom
 
text: "Resume"
 
action: function(): Void{
 
t.play();
 
}
  +
};
   
  +
var stopButton = SwingButton{
content: BorderPanel{
 
  +
translateX: resumeButton.translateX + resumeButton.width + 5
top: Canvas {content:
 
Rectangle {x : bind x
+
translateY: sceneHeight - buttonFromBottom
y : 0
+
text: "Stop"
width : 100
+
action: function(): Void{
height: 100
+
t.stop();
fill : Color.BLUE
+
}
  +
};
  +
  +
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
 
}
 
}
}//Canvas
 
   
  +
startButton,
   
bottom: FlowPanel{content: [
+
pauseButton,
Button{text : "Start"
 
action: function(): Void{t.start();}},
 
   
Button{text : "Pause"
+
resumeButton,
action: function(): Void{t.pause();}},
 
   
Button{text : "Resume"
+
stopButton
action: function(): Void{t.resume();}},
+
  +
] //content
  +
  +
} // Scene
  +
}//Stage
   
Button{text : "Stop"
 
action: function(): Void{t.stop();}}
 
]}//FlowPanel
 
}//BorderPanel
 
}//Frame
 
 
</pre></code>
 
</pre></code>
  +
[[User:Cdea|Cdea]] 06:22, 21 December 2008 (UTC)
 
   
 
== AnimationTwoValues.fx ==
 
== AnimationTwoValues.fx ==
Line 97: Line 138:
   
   
  +
SwingFrame {
Frame {
 
 
closeAction: function(): Void {System.exit(0);}
 
closeAction: function(): Void {System.exit(0);}
 
 
Line 118: Line 159:
   
 
bottom: FlowPanel{content: [
 
bottom: FlowPanel{content: [
Button{text : "Start"
+
SwingButton{text : "Start"
action: function(): Void{t.start();}},
+
action: function(): Void{t.start();}},
   
Button{text : "Pause"
+
SwingButton{text : "Pause"
action: function(): Void{t.pause();}},
+
action: function(): Void{t.pause();}},
   
Button{text : "Resume"
+
SwingButton{text : "Resume"
action: function(): Void{t.resume();}},
+
action: function(): Void{t.resume();}},
   
Button{text : "Stop"
+
SwingButton{text : "Stop"
action: function(): Void{t.stop();}}
+
action: function(): Void{t.stop();}}
 
]}//FlowPanel
 
]}//FlowPanel
 
}//BorderPanel
 
}//BorderPanel
}//Frame
+
}//SwingFrame
 
</pre></code>
 
</pre></code>
   
Line 190: Line 231:
   
   
  +
SwingFrame {
Frame {
 
 
closeAction: function(): Void {System.exit(0);}
 
closeAction: function(): Void {System.exit(0);}
 
 
Line 224: Line 265:
   
 
bottom: FlowPanel{content: [
 
bottom: FlowPanel{content: [
Button{text : "Start"
+
SwingButton{text : "Start"
action: function(): Void{t.start();}},
+
action: function(): Void{t.start();}},
   
Button{text : "Pause"
+
SwingButton{text : "Pause"
action: function(): Void{t.pause();}},
+
action: function(): Void{t.pause();}},
   
Button{text : "Resume"
+
SwingButton{text : "Resume"
action: function(): Void{t.resume();}},
+
action: function(): Void{t.resume();}},
   
Button{text : "Stop"
+
SwingButton{text : "Stop"
action: function(): Void{t.stop();}}
+
action: function(): Void{t.stop();}}
 
]}//FlowPanel
 
]}//FlowPanel
 
}//BorderPanel
 
}//BorderPanel
}//Frame
+
}//SwingFrame
 
</pre></code>
 
</pre></code>
   
Line 246: Line 287:
   
 
<code><pre>
 
<code><pre>
  +
/*
import javafx.ext.swing.*;
 
  +
* AnimationFading.fx
import javafx.scene.geometry.*;
 
  +
* 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.paint.*;
import javafx.animation.*;
+
import javafx.scene.Scene;
import java.lang.System;
+
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
 
keyFrames: [KeyFrame{time : 0s
 
values: opacity => 0.0},
 
 
KeyFrame{time : 3.5s
 
values: opacity => 1.0 tween Interpolator.EASEBOTH}
 
]//keyFrames
 
}//Timeline;
 
   
 
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
 
   
  +
var startButton = SwingButton{
 
text: "Start"
  +
translateX: 75
  +
translateY: sceneHeight - buttonFromBottom
 
action: function(): Void{
  +
t.playFromStart();
 
}
  +
}; // SwingButton
   
  +
var pauseButton = SwingButton{
bottom: FlowPanel{content: [
 
  +
translateX: startButton.translateX + startButton.width + 5
Button{text : "Start"
 
  +
translateY: sceneHeight - buttonFromBottom
action: function(): Void{t.start();}},
 
 
text: "Pause"
 
action: function(): Void{
  +
t.pause();
  +
}
  +
}; // SwingButton
   
  +
var resumeButton = SwingButton{
Button{text : "Pause"
 
  +
translateX: pauseButton.translateX + pauseButton.width + 5
action: function(): Void{t.pause();}},
 
  +
translateY: sceneHeight - buttonFromBottom
 
text: "Resume"
 
action: function(): Void{
  +
t.play();
  +
}
  +
}; // SwingButton
   
  +
var stopButton = SwingButton{
Button{text : "Resume"
 
  +
translateX: resumeButton.translateX + resumeButton.width + 5
action: function(): Void{t.resume();}},
 
  +
translateY: sceneHeight - buttonFromBottom
 
text: "Stop"
 
action: function(): Void{
  +
t.stop();
  +
}
  +
}; // SwingButton
   
  +
Stage {
Button{text : "Stop"
 
  +
title: 'Animation: Fading'
action: function(): Void{t.stop();}}
 
  +
scene: Scene{
]}//FlowPanel
 
  +
width: sceneWidth
}//BorderPanel
 
  +
height: sceneHeight
}//Frame
 
 
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
 
</pre></code>
 
</pre></code>
   
Line 310: 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.png

/*
 * 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

AnimationTwoValues.png

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

AnimationNested.png

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.png

/*
 * 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)