FX

/* 
 * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER
 * 
 * Copyright © 2010, Oracle and/or its affiliates. All rights reserved.
 * Oracle is a registered trademark of Oracle Corporation and/or its affiliates. 
 * Oracle and Java are registered trademarks of Oracle and/or its affiliates. 
 * Other names may be trademarks of their respective owners.
 * 
 * This file is available and licensed under the following license:
 * 
 * Redistribution and use in source and binary forms, with or without modification, 
 * are permitted provided that the following conditions are met:

 *   *  Redistributions of source code must retain the above copyright notice, 
        trademark notice, this list of conditions, and the following disclaimer.

 *   *  Redistributions in binary form must reproduce the above copyright notice, 
        trademark notice, this list of conditions, and the following disclaimer in 
        the documentation and/or other materials provided with the distribution.

 *   *  Neither the name of Oracle nor the names of its contributors may be used 
        to endorse or promote products derived from this software without specific 
        prior written permission.
 
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. 
 * IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, 
 * INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, 
 * BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES LOSS OF USE, 
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF 
 * LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE 
 * OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
 * OF THE POSSIBILITY OF SUCH DAMAGE.
 */

package basicanimation;

import javafx.animation.Interpolator;
//import javafx.animation.KeyFrame; //required for alternate timeline
import javafx.animation.Timeline;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.scene.control.Button;

/**
 * @author nancyhildebrandt
 */


var slider1: Number = 20.0;
var slider2: Number = 120.0;
var slider3: Number = 110.0;


var t1 =
Timeline {
    repeatCount: 1
    keyFrames: [
        at (5s) {slider1 => 100.0 tween Interpolator.LINEAR}
        at (5s) {slider2 => 200.0 tween Interpolator.LINEAR}
        at (6s) {slider3 => 110.0 tween Interpolator.LINEAR} //start point for slider3
        at (11s) {slider3 => 10.0 tween Interpolator.LINEAR} //end point for slider3
    ]
};
t1.play();

/* Alernate notation with KeyFrame instances
var t1 = Timeline {
    repeatCount: 1
    keyFrames: [
        KeyFrame {
            time: 5s //Defines the state at 10 seconds of animation
            canSkip: true
            values: [
                slider1 => 100 tween Interpolator.LINEAR
            ] //close values

        } // close KeyFrame
        KeyFrame {
            time: 5s
            canSkip: true
            values: [
                slider2 => 200.0 tween Interpolator.LINEAR
            ] //close values

        } // close KeyFrame
        KeyFrame {
            time: 6s
            canSkip: true
            values: [
                slider3 => 110.0
            ] //close values

        } //close KeyFrame
        KeyFrame {
            time: 11s
            canSkip: true
            values: [
                slider3 => 10.0 tween Interpolator.LINEAR
            ] //close values

        } //close KeyFrame
    ] //close keyFrames

};
t1.play(); */

Stage {
    title: "Horizontal Animation"
    width: 240
    height: 200
    scene: Scene {
        content: [
            // Draw the vertical lines
            for(num in [0..9]) {
                Line {
                    startX: 30+num*20,
                    startY: 60
                    endX: 30+num*20,
                    endY: 80  
                    strokeWidth: 1
                    stroke: Color.BLACK
                }
            }
            Rectangle {    // Orange rectangle
                translateX: bind slider1  //Value derived from the keyframes
                y: 60   //Vertical value is constant
                width: 20,
                height: 20
                fill: Color.web("#FD8500")
            }
            Rectangle {    // Black rectangle
                translateX: bind slider2
                y: 60
                width: 20,
                height: 20
                fill: Color.BLACK
            }
            Circle {  //Turquoise circle
                translateX: bind slider3
                centerY: 70
                radius: 10
                fill: Color.web("#0A8CEC")
            }

            /* Reload button 1.2 */
            Button {
                translateX: 80,
                translateY: 135
                text: "Reload"
                action: function() {
                    t1.playFromStart();
                }
            }
        ] 
    }
}