November 23, 2014
Hot Topics:

JavaFX Animation APIs, Page 2

  • April 3, 2012
  • By Manoj Debnath
  • Send Email »
  • More Articles »

FillTransition (javafx.animation.PathTransition): This Transition changes the filling of a shape over duration. This is done by updating the fill variable of the shape at regular intervals. It starts from the fromValue, if provided; otherwise, it uses the shape's fill value and stops at thetoValue value.

public Shape startFillTransition() {
Circle circle = new Circle(300, 300, 50);
FillTransition fill = new FillTransition(Duration.millis(3000), circle);
fill.setFromValue(Color.rgb(0, 0, 0));
fill.setToValue(Color.rgb(255, 0, 0));
fill.setCycleCount(Transition.INDEFINITE);
fill.setAutoReverse(true);
fill.play();
return circle;
}

 

RotateTransition (javafx.animation.RotateTransition): This Transition creates a rotation animation that spans its duration. This is done by updating the rotate variable of the node at regular intervals. The angle value is specified in degrees. It starts from the fromAngle, if provided; otherwise, it uses the node's rotate value. It stops at the toAngle value, if provided; otherwise, it will use start value plus byAngle. The toAngle takes precedence if both toAngle and byAngle are specified.

public Shape startRotateTransition() {
Rectangle rect = new Rectangle(100, 40, 100, 100);
rect.setArcHeight(50);
rect.setArcWidth(50);
rect.setFill(Color.BLUE);

RotateTransition rotate = new RotateTransition(Duration.millis(3000), rect);
rotate.setByAngle(180);
rotate.setCycleCount(Transition.INDEFINITE);
rotate.setAutoReverse(true);
rotate.play();
return rect;
}

 

ScaleTransition (javafx.animation.ScaleTransition): This Transition creates a scale animation that spans its duration. This is done by updating the scaleX, scaleY and scaleZ variables of the node at regular intervals. It starts from the (fromX, fromY, fromZ) value, if provided; otherwise, it uses the node's (scaleX, scaleY, scaleZ) value. It stops at the (toX, toY, toZ) value, if provided; otherwise, it will use the start value plus the (byX, byY, byZ) value.

public Shape startScaleTransition() {
Rectangle rect = new Rectangle(100, 40, 50, 50);
rect.setArcHeight(0);
rect.setArcWidth(0);
rect.setFill(Color.VIOLET);

ScaleTransition scale = new ScaleTransition(Duration.millis(2000), rect);
scale.setByX(1.5f);
scale.setByY(1.5f);
scale.setCycleCount(Transition.INDEFINITE);
scale.setAutoReverse(true);
scale.play();
return rect;
}

 

SequentialTransition (javafx.animation.SequentialTransition): This transition executes several transitions one after another in a sequential manner.

public Shape startSequentialTransition() {
Rectangle rect = new Rectangle(100, 40, 100, 100);
rect.setArcHeight(50);
rect.setArcWidth(50);
rect.setFill(Color.VIOLET);

final Duration SEC_2 = Duration.millis(2000);
final Duration SEC_3 = Duration.millis(3000);

PauseTransition pause = new PauseTransition(Duration.millis(1000));
FadeTransition fade = new FadeTransition(SEC_3);
fade.setFromValue(1.0f);
fade.setToValue(0.3f);
fade.setCycleCount(Transition.INDEFINITE);
fade.setAutoReverse(true);
TranslateTransition translate = new TranslateTransition(SEC_2);
translate.setFromX(-100f);
translate.setToX(100f);
translate.setCycleCount(Transition.INDEFINITE);
translate.setAutoReverse(true);
RotateTransition rotate = new RotateTransition(SEC_3);
rotate.setByAngle(180f);
rotate.setCycleCount(Transition.INDEFINITE);
rotate.setAutoReverse(true);
ScaleTransition scale = new ScaleTransition(SEC_2);
scale.setByX(1.5f);
scale.setByY(1.5f);
scale.setCycleCount(Transition.INDEFINITE);
scale.setAutoReverse(true);

SequentialTransition seq = new SequentialTransition(rect, pause, fade, translate,
rotate, scale);
seq.play();
return rect;
}

StrokeTransition (javafx.animation.StrokeTransition): This Transition creates an animation that changes the stroke color of a shape over duration. This is done by updating the stroke variable of the shape at regular intervals. It starts from the fromValue, if provided; otherwise, it uses the shape's stroke value. It stops at the toValue value.

public Shape startStrokeTransition() {
Rectangle rect = new Rectangle(100, 40, 100, 100);
rect.setArcHeight(50);
rect.setArcWidth(50);
rect.setFill(null);

StrokeTransition stroke = new StrokeTransition(Duration.millis(3000), rect,
Color.RED, Color.BLUE);
stroke.setCycleCount(Transition.INDEFINITE);
stroke.setAutoReverse(true);
stroke.play();
return rect;
}

 

TranslateTransition (javafx.animation.TranslateTransition): This Transition creates a move/translate animation that spans its duration. This is done by updating the translateX, translateY and translateZ variables of the node at regular intervals. It starts from the (fromX, fromY, fromZ) value, if provided; otherwise, it uses the node's (translateX, translateY, translateZ) value. It stops at the (toX, toY, toZ) value, if provided; otherwise, it will use the start value plus the (byX, byY, byZ) value.

public Shape startTranslateTransition() {
Rectangle rect = new Rectangle(100, 40, 100, 100);
rect.setFill(Color.CORNFLOWERBLUE);
TranslateTransition translate = new TranslateTransition(Duration.millis(2000), rect);
translate.setByX(200f);
translate.setCycleCount(Transition.INDEFINITE);
translate.setAutoReverse(true);
translate.play();
return rect;
}

 

Timeline (javafx.animation.Timeline): Animation is basically driven by the scaling, rotation, translation and filling properties. The class Timeline allows you to update these property values along the progression of time. The KeyFrame (javafx.animation.KeyFrame) class provided by JavaFX can be used to declare start and end snapshots of the scene's state transition. The system can automate the animation or can stop, pause and resume, reverse or repeat the transition upon request.

JavaFX vs. Flash

Adobe Flash's UI for creating animation offers the best advantages a tool can provide. The animator can actually see the timeline and its shape/motion tweening effect on the object created in real-time. Moreover the support of ActionScript, a scripting language to interact with the stage animation and graphic object in Flash, can be used to give another dimension to the animation. The usability and ease of creation has made Flash movies so popular that nowadays it is difficult to find a Web page without any flash animation.

JavaFX vs. Flash_2.jpg
Sophisticated Adobe Flash user interface for creating animation
JavaFX vs. Flash_3.jpg
Eclipse IDE, a tool for creating animation in JavaFX

Juvenile JavaFX lacks in this arena but provides some excellent API support for animation through code. It is definite that JavaFX is nowhere near Adobe Flash on designing creative animation and visualization of animation in real-time, but I believe there is no conflict. Rather JavaFX has a different purpose to serve. Imagine JavaFX (inseparable with Java) as a robust language with all the potentialities for creating Web/enterprise level application, which also has a wing to support animation. If Adobe Flash can be the primary choice for the core animators, JavaFX can be the primary choice for programmers (especially Java programmers) to inject life in to their applications.

Conclusion

The main purpose of JavaFX animation is to leverage data visualization and user experiences -- not to create a Flash movie. I believe the present API support for animation, charts and graphics is well suited and wish to see the support for 3D animation/graphics in its future release, as promised.


Tags: Flash, JavaFX, animation

Originally published on http://www.developer.com.

Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Rocket Fuel