Planet JFX
(4 simple animation examples with Timeline{}/KeyFrame{})
 
(Update for javafxgui.*)
Line 6: Line 6:
   
 
<code><pre>
 
<code><pre>
import javafx.ui.*;
+
import javafx.gui.*;
import javafx.ui.canvas.*;
 
 
import javafx.animation.*;
 
import javafx.animation.*;
 
import java.lang.System;
 
import java.lang.System;
Line 29: Line 28:
   
 
Frame {
 
Frame {
onClose : function(): Void {System.exit(0);}
+
closeAction: function(): Void {System.exit(0);}
background: Color.WHITE;
 
 
 
title : 'Animation: Simple'
+
title : 'Animation: Simple'
width : 550
+
background : Color.WHITE;
height : 200
+
width : 550
 
visible : true
 
centerOnScreen: true
 
visible: true
 
   
 
content: BorderPanel{
 
content: BorderPanel{
 
top: Canvas {content:
 
top: Canvas {content:
Rect {x : bind x
+
Rectangle {x : bind x
y : 0
+
y : 0
width : 100
+
width : 100
height: 100
+
height: 100
fill : Color.BLUE
+
fill : Color.BLUE
 
}
 
}
 
}//Canvas
 
}//Canvas
Line 73: Line 69:
   
 
<code><pre>
 
<code><pre>
import javafx.ui.*;
+
import javafx.gui.*;
import javafx.ui.canvas.*;
 
 
import javafx.animation.*;
 
import javafx.animation.*;
 
import java.lang.System;
 
import java.lang.System;
Line 99: Line 94:
   
 
Frame {
 
Frame {
onClose : function(): Void {System.exit(0);}
+
closeAction: function(): Void {System.exit(0);}
background: Color.WHITE;
 
 
 
title : 'Animation: Two values'
+
title : 'Animation: Two values'
width : 550
+
background : Color.WHITE;
height : 400
+
width : 550
  +
height : 400
 
centerOnScreen: true
+
visible : true
visible: true
 
   
 
content: BorderPanel{
 
content: BorderPanel{
 
top: Canvas {content:
 
top: Canvas {content:
Rect {x : bind x
+
Rectangle {x : bind x
y : bind y
+
y : bind y
width : 100
+
width : 100
height: 100
+
height: 100
fill : Color.BLUE
+
fill : Color.BLUE
 
}
 
}
 
}//Canvas
 
}//Canvas
Line 143: Line 136:
   
 
<code><pre>
 
<code><pre>
import javafx.ui.*;
+
import javafx.gui.*;
import javafx.ui.canvas.*;
 
 
import javafx.animation.*;
 
import javafx.animation.*;
 
import java.lang.System;
 
import java.lang.System;
Line 193: Line 185:
   
 
Frame {
 
Frame {
onClose : function(): Void {System.exit(0);}
+
closeAction: function(): Void {System.exit(0);}
background: Color.WHITE;
 
 
 
title : 'Animation: Nested timelines'
+
title : 'Animation: Nested timelines'
width : 550
+
background : Color.WHITE;
height : 500
+
width : 550
 
visible : true
 
centerOnScreen: true
 
visible: true
 
   
 
content: BorderPanel{
 
content: BorderPanel{
 
top: Canvas {content: [
 
top: Canvas {content: [
Rect {x : bind xRed
+
Rectangle {x : bind xRed
y : 0
+
y : 0
width : 100
+
width : 100
height: 100
+
height: 100
fill : Color.RED
+
fill : Color.RED
 
},
 
},
 
 
Rect {x : bind xGreen
+
Rectangle {x : bind xGreen
y : 110
+
y : 110
width : 100
+
width : 100
height: 100
+
height: 100
fill : Color.GREEN
+
fill : Color.GREEN
 
},
 
},
 
 
Rect {x : bind xBlue
+
Rectangle {x : bind xBlue
y : 220
+
y : 220
width : 100
+
width : 100
height: 100
+
height: 100
fill : Color.BLUE
+
fill : Color.BLUE
 
}
 
}
 
]}//Canvas
 
]}//Canvas
Line 251: Line 240:
   
 
<code><pre>
 
<code><pre>
import javafx.ui.*;
+
import javafx.gui.*;
import javafx.ui.canvas.*;
 
 
import javafx.animation.*;
 
import javafx.animation.*;
 
import java.lang.System;
 
import java.lang.System;
Line 274: Line 262:
   
 
Frame {
 
Frame {
onClose : function(): Void {System.exit(0);}
+
closeAction: function(): Void {System.exit(0);}
  +
background: Color.WHITE;
 
 
title : 'Animation: Fading'
 
 
background : Color.WHITE;
title : 'Animation: Fading'
 
width : 450
+
width : 450
height : 550
+
height : 550
 
visible : true
 
centerOnScreen: true
 
visible: true
 
   
 
content: BorderPanel{
 
content: BorderPanel{
 
top: Canvas {content:
 
top: Canvas {content:
Rect {x : 20
+
Rectangle {x : 20
y : 20
+
y : 20
width : 400
+
width : 400
height : 400
+
height : 400
fill : Color.BLUE
+
fill : Color.BLUE
opacity: bind opacity
+
opacity: bind opacity
}
+
}// Rectangle
 
}//Canvas
 
}//Canvas
   

Revision as of 16:59, 26 May 2008

Simple animation examples with Timeline{}/KeyFrame{} for the JavaFX Script Compiler.

AnimationSimple.fx

AnimationSimple.png

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

AnimationTwoValues.png

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

AnimationNested.png

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

AnimationFading.png

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