Planet JFX
Register
Advertisement

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

AnimationSimple.fx

AnimationSimple
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
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
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
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
Advertisement