Fandom

Planet JFX

Animation

118pages on
this wiki
Add New Page
Talk0 Share

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

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

AnimationSimple.fx Edit

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

AnimationTwoValues
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 Edit

AnimationNested
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 Edit

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

Also on Fandom

Random Wiki