Planet JFX
(Add Swing prefix)
Cdea (talk | contribs)
Line 6: Line 6:
   
 
<code><pre>
 
<code><pre>
  +
/*
import javafx.ext.swing.*;
 
  +
* AnimationSimple.fx
import javafx.scene.geometry.*;
 
  +
* JavaFX version 1.0
import javafx.scene.paint.*;
 
  +
* Created on Dec 20, 2008, 9:25:19 PM
  +
*/
 
import javafx.animation.*;
 
import javafx.animation.*;
import java.lang.System;
+
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 x = 0;
Line 18: Line 29:
 
repeatCount: 3
 
repeatCount: 3
 
autoReverse: true
 
autoReverse: true
 
keyFrames: [KeyFrame{time : 0s
 
values: x => 0},
 
 
KeyFrame{time : 2s
 
values: x => 400 tween Interpolator.LINEAR}
 
]//keyFrames
 
}//Timeline;
 
   
 
keyFrames: [KeyFrame{
  +
time: 0s
 
values: x => 0},
   
  +
KeyFrame{
 
time: 2s
 
values: x => 400 tween Interpolator.LINEAR}
 
]//keyFrames
 
}//Timeline;
   
SwingFrame {
 
closeAction: function(): Void {System.exit(0);}
 
 
title : 'Animation: Simple'
 
background : Color.WHITE;
 
width : 550
 
visible : true
 
   
  +
var startButton: SwingButton = SwingButton{
content: BorderPanel{
 
top: Canvas {content:
+
text: "Start"
Rectangle {x : bind x
+
translateX: 75
y : 0
+
translateY: sceneHeight - buttonFromBottom
width : 100
+
action: function(): Void{
height: 100
+
t.playFromStart();
fill : Color.BLUE
+
}
  +
};
  +
var pauseButton: SwingButton = SwingButton{
  +
translateX: startButton.translateX + startButton.width + 5
  +
translateY: sceneHeight - buttonFromBottom
  +
text: "Pause"
 
action: function(): Void{
  +
t.pause();
  +
}
  +
};
  +
var resumeButton: SwingButton = SwingButton{
  +
translateX: pauseButton.translateX + pauseButton.width + 5
  +
translateY: sceneHeight - buttonFromBottom
  +
text: "Resume"
 
action: function(): Void{
 
t.play();
  +
}
  +
};
  +
var stopButton: SwingButton = 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
 
}
 
}
}//Canvas
 
   
  +
startButton,
   
bottom: FlowPanel{content: [
+
pauseButton,
SwingButton{text : "Start"
 
action: function(): Void{t.start();}},
 
   
SwingButton{text : "Pause"
+
resumeButton,
action: function(): Void{t.pause();}},
 
   
SwingButton{text : "Resume"
+
stopButton
 
action: function(): Void{t.resume();}},
 
 
] //content
   
  +
} // Scene
SwingButton{text : "Stop"
 
  +
}//Stage
action: function(): Void{t.stop();}}
 
]}//FlowPanel
 
}//BorderPanel
 
}//SwingFrame
 
</pre></code>
 
   
 
</pre></code>
   
 
== AnimationTwoValues.fx ==
 
== AnimationTwoValues.fx ==

Revision as of 05:40, 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 = SwingButton{
                    text: "Start"
                    translateX: 75
                    translateY: sceneHeight - buttonFromBottom
                    action: function(): Void{
                        t.playFromStart();
                    }
                 };
var pauseButton: SwingButton = SwingButton{
                    translateX: startButton.translateX + startButton.width + 5
                    translateY: sceneHeight - buttonFromBottom
                    text: "Pause"
                    action: function(): Void{
                        t.pause();
                    }
                 };
var resumeButton: SwingButton = SwingButton{
                    translateX: pauseButton.translateX + pauseButton.width + 5
                    translateY: sceneHeight - buttonFromBottom
                    text: "Resume"
                    action: function(): Void{
                        t.play();
                    }
                 };
var stopButton: SwingButton = 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

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

import javafx.ext.swing.*;
import javafx.scene.geometry.*;
import javafx.scene.paint.*;
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;



SwingFrame {
    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: [
            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