JavaFX Tutorial - JavaFX Timeline Animation
An animation is created by changing the Node's properties, such as size, location, and color etc.
Timeline animation updates the property values as time goes by.
JavaFX supports key frame animation. The animated state scene are declared by start and end key frames at certain times.
What are Key Values?
The JavaFX allows us to create timed events that can interpolate over pre-defined values to produce animation.
For example, to produce a fade-out effect, we would target a node's opacity property to interpolate its value starting from 1 which is fully opaque to 0 which is transparent over a period of time.
The following code defines a KeyValue that targets a rectangle's opacity property starting at 1 and ending with the value 0.
Rectangle rectangle = new Rectangle(0, 0, 50, 50); KeyValue keyValue = new KeyValue(rectangle.opacityProperty(), 0);
The KeyValue object doesn't actually interpolate the value. It defines the start and end values of a property.
By default, a KeyValue object will have a linear interpolator.
The KeyValue can be defined with different types of interpolators such as linear, ease in, or ease out.
The following code defines a key value that will animate a rectangle from left to right by 100 pixels with an Interpolator.EASE_OUT interpolator. Easing out will slow down the fade before the end key value.
Rectangle rectangle = new Rectangle(0, 0, 50, 50); KeyValue keyValue = new KeyValue(rectangle.xProperty(), 100, Interpolator.EASE_OUT);
What are Key Frames?
When an animation occurs, each step is called a keyframe which is defined by a KeyFrame object.
The key frame interpolates key values defined in KeyValue objects over a period of time which is defined in javafx.util.Duration.
When creating a KeyFrame object, the constructor requires a timed duration (Duration). KeyFrame constructors accept one or more key values.
Suppose we would like to move a rectangle from upper left to lower right, we defines a keyframe that has a duration of 1000 milliseconds and two key values that represent the rectangle's x and y properties.
The following code defines a keyframe to move a rectangle's upper-left corner (0, 0) to point (100, 100) in one second or 1000 milliseconds.
Rectangle rectangle = new Rectangle(0, 0, 50, 50); KeyValue xValue = new KeyValue(rectangle.xProperty(), 100); KeyValue yValue = new KeyValue(rectangle.yProperty(), 100); KeyFrame keyFrame = new KeyFrame(Duration.millis(1000), xValue, yValue);
What is a Timeline?
A Timeline is one animation sequence consisting of many KeyFrame objects. Each KeyFrame object is run sequentially.
A Timeline is a subclass of javafx.animation.Animation class, it has standard attributes such as its cycle count and auto-reverse.
The cycle count is the number of times to play the animation.
To play the animation indefinitely, use the value Timeline.INDEFINITE.
The auto-reverse property is a Boolean flag to indicate that the
animation can play the timeline backward.
By default, the cycle count is set to 1, and auto-reverse is set to false.
To add key frames to a Timeline object, use the getKeyFrames().addAll() method.
The following code demonstrates a timeline playing indefinitely with auto-reverse set to true.
Timeline timeline = new Timeline();
timeline.setCycleCount(Timeline.INDEFINITE);
timeline.setAutoReverse(true);
timeline.getKeyFrames().addAll(keyFrame1, keyFrame2);
timeline.play();
Example
/*//from w ww.ja va 2s . com * Copyright (c) 2011, 2012 Oracle and/or its affiliates. * All rights reserved. Use is subject to license terms. * * 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, this list of conditions and the following disclaimer. * - Redistributions in binary form must reproduce the above copyright * 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 colorfulcircles; import javafx.animation.KeyFrame; import javafx.animation.KeyValue; import javafx.animation.Timeline; import javafx.application.Application; import javafx.scene.Group; import javafx.scene.Node; import javafx.scene.Scene; import javafx.scene.effect.BlendMode; import javafx.scene.effect.BoxBlur; import javafx.scene.paint.Color; import javafx.scene.paint.CycleMethod; import javafx.scene.paint.LinearGradient; import javafx.scene.paint.Stop; import javafx.scene.shape.Circle; import javafx.scene.shape.Rectangle; import javafx.scene.shape.StrokeType; import javafx.stage.Stage; import javafx.util.Duration; import static java.lang.Math.random; public class Main extends Application { public static void main(String[] args) { launch(args); } @Override public void start(Stage primaryStage) { Group root = new Group(); Scene scene = new Scene(root, 800, 600, Color.BLACK); primaryStage.setScene(scene); Group circles = new Group(); for (int i = 0; i < 30; i++) { Circle circle = new Circle(150, Color.web("white", 0.05)); circle.setStrokeType(StrokeType.OUTSIDE); circle.setStroke(Color.web("white", 0.16)); circle.setStrokeWidth(4); circles.getChildren().add(circle); } Rectangle colors = new Rectangle(scene.getWidth(), scene.getHeight(), new LinearGradient(0f, 1f, 1f, 0f, true, CycleMethod.NO_CYCLE, new Stop[]{ new Stop(0, Color.web("#f8bd55")), new Stop(0.14, Color.web("#c0fe56")), new Stop(0.28, Color.web("#5dfbc1")), new Stop(0.43, Color.web("#64c2f8")), new Stop(0.57, Color.web("#be4af7")), new Stop(0.71, Color.web("#ed5fc2")), new Stop(0.85, Color.web("#ef504c")), new Stop(1, Color.web("#f2660f")),})); Group blendModeGroup = new Group(new Group(new Rectangle(scene.getWidth(), scene.getHeight(), Color.BLACK), circles), colors); colors.setBlendMode(BlendMode.OVERLAY); root.getChildren().add(blendModeGroup); circles.setEffect(new BoxBlur(10, 10, 3)); Timeline timeline = new Timeline(); for (Node circle : circles.getChildren()) { timeline.getKeyFrames().addAll( new KeyFrame(Duration.ZERO, // set start position at 0 new KeyValue(circle.translateXProperty(), random() * 800), new KeyValue(circle.translateYProperty(), random() * 600)), new KeyFrame(new Duration(40000), // set end position at 40s new KeyValue(circle.translateXProperty(), random() * 800), new KeyValue(circle.translateYProperty(), random() * 600))); } // play 40s of animation timeline.play(); primaryStage.show(); } }
The code above generates the following result.
Timeline Events
/* w w w . ja v a 2s. com*/ /* * Copyright (c) 2011, Pro JavaFX Authors * All rights reserved. * * Redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions are met: * 1. Redistributions of source code must retain the above copyright notice, * this list of conditions and the following disclaimer. * 2. Redistributions in binary form must reproduce the above copyright notice, * this list of conditions and the following disclaimer in the documentation * and/or other materials provided with the distribution. * 3. Neither the name of JFXtras 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. * * Metronome1Main.fx - A simple example of animation using a Timeline * * Developed 2011 by James L. Weaver jim.weaver [at] javafxpert.com * as a JavaFX SDK 2.0 example for the Pro JavaFX book. */ import javafx.animation.AnimationTimer; import javafx.animation.KeyFrame; import javafx.animation.KeyValue; import javafx.animation.Timeline; import javafx.application.Application; import javafx.event.ActionEvent; import javafx.event.EventHandler; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.effect.Lighting; import javafx.scene.layout.StackPane; import javafx.scene.paint.Color; import javafx.scene.shape.Circle; import javafx.scene.text.Text; import javafx.stage.Stage; import javafx.util.Duration; public class Main extends Application { //main timeline private Timeline timeline; private AnimationTimer timer; //variable for storing actual frame private Integer i=0; @Override public void start(Stage stage) { Group p = new Group(); Scene scene = new Scene(p); stage.setScene(scene); stage.setWidth(500); stage.setHeight(500); p.setTranslateX(80); p.setTranslateY(80); //create a circle with effect final Circle circle = new Circle(20, Color.rgb(156,216,255)); circle.setEffect(new Lighting()); //create a text inside a circle final Text text = new Text (i.toString()); text.setStroke(Color.BLACK); //create a layout for circle with text inside final StackPane stack = new StackPane(); stack.getChildren().addAll(circle, text); stack.setLayoutX(30); stack.setLayoutY(30); p.getChildren().add(stack); stage.show(); //create a timeline for moving the circle timeline = new Timeline(); timeline.setCycleCount(Timeline.INDEFINITE); timeline.setAutoReverse(true); //You can add a specific action when each frame is started. timer = new AnimationTimer() { @Override public void handle(long l) { text.setText(i.toString()); i++; } }; //create a keyValue with factory: scaling the circle 2times KeyValue keyValueX = new KeyValue(stack.scaleXProperty(), 2); KeyValue keyValueY = new KeyValue(stack.scaleYProperty(), 2); //create a keyFrame, the keyValue is reached at time 2s Duration duration = Duration.millis(2000); //one can add a specific action when the keyframe is reached EventHandler onFinished = new EventHandler<ActionEvent>() { public void handle(ActionEvent t) { stack.setTranslateX(java.lang.Math.random()*200-100); //reset counter i = 0; } }; KeyFrame keyFrame = new KeyFrame(duration, onFinished , keyValueX, keyValueY); //add the keyframe to the timeline timeline.getKeyFrames().add(keyFrame); timeline.play(); timer.start(); } public static void main(String[] args) { Application.launch(args); } }
The code above generates the following result.
