Animation

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)