What aspect of a a JavaFX animation is missing from this? - animation

I am trying to get this simple animation to play over an image background however I cannot get it to start.
I have tried adding in a button as well as using playFromStart() instead of play().
I also tried adding in the set orientation to the path, I didn't think it would do anything because I'm just moving a circle, and it hasn't helped.
I also tried messing with the timing and number of repetitions of the animation just in case somehow it was just all happening really quickly or slowly and I just missed it.
I feel like I'm probably missing something really simple but from everything that I've looked at, all the things that the examples have, I also have.
The background image also went away when I added the button, for that I have tried moving it up and other things but I feel like this is also a simple issue that my brain has just glazed over.
package javafxapplication10;
import javafx.animation.PathTransition;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.*;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.paint.ImagePattern;
import javafx.scene.shape.*;
import javafx.stage.Stage;
import javafx.util.Duration;
public class JavaFXApplication10 extends Application {
#Override
public void start(Stage stage) {
stage.setScene(scene);
stage.setResizable(false);
stage.sizeToScene();
ImagePattern pattern = new ImagePattern(image);
scene.setFill(pattern);
stage.setScene(scene);
stage.show();
Circle cir = new Circle (19);
cir.setLayoutX(170);
cir.setLayoutY(100);
cir.setFill(Color.KHAKI);
pane.getChildren().add(cir);
Path path1 = new Path();
path1.getElements().add(new MoveTo(170,650));
path1.getElements().add(new MoveTo(1335,650));
path1.getElements().add(new MoveTo(1335,100));
PathTransition pl = new PathTransition();
pl.setDuration(Duration.seconds(8));
pl.setPath(path1);
pl.setNode(cir);
pl.setCycleCount(1);
//pl.setOrientation(OrientationType.ORTHOGONAL_TO_TANGENT);
pl.setAutoReverse(false);
//pl.play();
Button begin = new Button("Begin");
begin.setLayoutX(780);
begin.setLayoutY(105);
begin.setOnAction(new EventHandler<ActionEvent> () {
#Override
public void handle(ActionEvent press) {
pl.play();
}
});
pane.getChildren().add(begin);
}
Image image = new Image("file:Figure one.png");
Pane pane = new Pane();
Scene scene = new Scene (pane,1474,707);
public static void main(String[] args) {
launch(args);
}
}

PathTransition only moves the node along a path that would actually be drawn. MoveTo elements do not draw anything, but simply set the current position. You need to use LineTo (and/or ClosePath) to draw something in the Path. Furthermore PathTransition sets the translate poperties, not the layout properties, i.e. final position of the circle is determined by adding the layout coordinates to the coodrinates provided by the Path. Therefore you should either position the Circle using the translate properties or start the path at (0, 0):
Path path1 = new Path(
new MoveTo(0, 0),
new LineTo(0, 550),
new LineTo(1165, 550),
new LineTo(1165, 0),
new ClosePath()
);
// path1.getElements().add(new MoveTo(170,650));
// path1.getElements().add(new MoveTo(1335,650));
// path1.getElements().add(new MoveTo(1335,100));

Related

How to animate several nodes with pause between each one?

I am trying to animate a series of nodes one after the other in a loop. The goal is to have the first node begin its animation, followed by a short pause before the next node begins to animate.
However, when running this within a loop, it executes too fast and all nodes appear to be animating at the same time.
For simplicity, I am using the AnimateFX library to handle the animations, but I assume the functionality needed here would apply in other situations?
How would I add a pause between each of the HBox animations?
import animatefx.animation.Bounce;
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class AnimationTest extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
final VBox root = new VBox(10);
root.setAlignment(Pos.CENTER);
final HBox tiles = new HBox(5);
tiles.setAlignment(Pos.CENTER);
// Create 5 tiles
for (int i = 0; i < 5; i++) {
HBox tile = new HBox();
tile.setPrefSize(50, 50);
tile.setStyle("-fx-border-color: black; -fx-background-color: lightblue");
tiles.getChildren().add(tile);
}
Button button = new Button("Animate");
button.setOnAction(event -> {
// Animate each tile, one at a time
for (Node child : tiles.getChildren()) {
Bounce animation = new Bounce(child);
animation.play();
}
});
root.getChildren().add(tiles);
root.getChildren().add(button);
primaryStage.setWidth(500);
primaryStage.setHeight(200);
primaryStage.setScene(new Scene(root));
primaryStage.show();
}
}
I don't know AnimateFX, but using the standard libraries you can add animations to a SequentialTransition.
For example, to animate each node but starting at a later time, add PauseTransitions of increasing duration and the desired animation to SequentialTransitions, and play the SequentialTransitions.
As I said, I'm not familiar with the library you're using, but I think it would look like this:
Button button = new Button("Animate");
button.setOnAction(event -> {
Duration offset = Duration.millis(500);
Duration start = new Duration();
// Animate each tile, one at a time
for (Node child : tiles.getChildren()) {
Bounce bounce = new Bounce(child);
PauseTransition delay = new PauseTransition(start);
SequentialTransition animation = new SequentialTransition(delay, bounce.getTimeline());
animation.play();
start = start.add(offset);
}
});

JavaFX draggable background - alternative to using a camera?

I am trying to implement a navigational feature for an editor I am working on, that would allow you to move around in the window by dragging on the background - basically like you can move around in Open Maps.
My current approach is to move a scene-camera around via DragEvent-Listeners on the scene, in which the displayed objects are children to the root Group.
However, I am wondering whether there is another way to implement this that would not require the use of a camera.
The following works as a simple test:
import javafx.application.Application;
import javafx.geometry.Point2D;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
public class InfinitePanning extends Application {
#Override
public void start(Stage primaryStage) {
Pane drawingPane = new Pane();
drawingPane.setStyle("-fx-background-color: white;");
Scene scene = new Scene(drawingPane, 800, 800, Color.WHITE);
scene.setOnScroll(e -> {
drawingPane.setTranslateX(drawingPane.getTranslateX() + e.getDeltaX());
drawingPane.setTranslateY(drawingPane.getTranslateY() + e.getDeltaY());
});
scene.setOnMouseClicked(e -> {
if (e.getClickCount() == 2) {
Point2D center = drawingPane.sceneToLocal(new Point2D(e.getX(), e.getY()));
Circle c = new Circle(center.getX(), center.getY(), 25, Color.CORNFLOWERBLUE);
drawingPane.getChildren().add(c);
}
});
Circle c = new Circle(50, 50, 25, Color.CORNFLOWERBLUE);
drawingPane.getChildren().add(c);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Double-click to add a new circle, scroll with the mouse (scroll button/wheel or scroll gesture on a trackpad) to move around.
There are some subtleties here. The pane is initially sized to fit the scene; as you scroll around the mouse will be outside the bounds of the pane. If you double-click outside the bounds of the pane (so you add a new node whose parameters are outside the bounds), then the pane expands at that point to include the new child.

JavaFX "quickfixes" with tooltips and hyperlinks

does JavaFX provide something like Eclipse Quickfixes? Meaning that you hover over a thing that is broken and got some solutions for it that you can apply immediately.
I know that there are tooltips but they can only contain text, I would need something clickable. Another solution would be something like Dialogs, but I don't want to open another window. I want it to appear on the current stage.
Any suggestions?
Edit: to make it clear, I want to adopt the concept of eclipse quickfixes onto a JavaFX based application, maybe showing a "quickfix" when hovering over a circle instance. I don't want to check any (java/javafx) source code.
Edit2: I've got a hyperlink on a tooltip now:
HBox box = new HBox();
Tooltip tooltip = new Tooltip();
tooltip.setText("Select an option:");
tooltip.setGraphic(new Hyperlink("Option 1"));
Tooltip.install(box, tooltip);
I've got three new problems now:
How to make the tooltip not disappear when leaving the HBox and staying there when entering the mouse into the tooltip?
How to add mulitple graphics / hyperlinks? Is it even possible?
How to first show the text and then, in a new line, display the graphics?
Thanks in advance!
You can add any node to a tooltip using the setGraphic() method. Here is a simple example demonstrating using a tooltip for "quick fix" functionality:
import java.util.Random;
import javafx.application.Application;
import javafx.css.PseudoClass;
import javafx.scene.Scene;
import javafx.scene.control.Hyperlink;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.control.TextFormatter;
import javafx.scene.control.Tooltip;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class TooltipWithQuickfix extends Application {
#Override
public void start(Stage primaryStage) {
TextField textField = new TextField();
textField.pseudoClassStateChanged(PseudoClass.getPseudoClass("invalid"), true);
textField.setTextFormatter(new TextFormatter<Integer>(c -> {
if (c.getText().matches("\\d*")) {
return c ;
}
return null ;
}));
textField.textProperty().isEmpty().addListener((obs, wasEmpty, isNowEmpty) ->
textField.pseudoClassStateChanged(PseudoClass.getPseudoClass("invalid"), isNowEmpty));
Tooltip quickFix = new Tooltip();
Hyperlink setToDefault = new Hyperlink("Set to default");
Hyperlink setToRandom = new Hyperlink("Set to random");
setToDefault.setOnAction(e -> {
textField.setText("42");
quickFix.hide();
});
Random rng = new Random();
setToRandom.setOnAction(e -> {
textField.setText(Integer.toString(rng.nextInt(100)));
quickFix.hide();
});
VBox quickFixContent = new VBox(new Label("Field cannot be empty"), setToDefault, setToRandom);
quickFixContent.setOnMouseExited(e -> quickFix.hide());
quickFix.setGraphic(quickFixContent);
textField.setOnMouseEntered(e -> {
if (textField.getText().isEmpty()) {
quickFix.show(textField, e.getScreenX(), e.getScreenY());
}
});
VBox root = new VBox(textField);
root.getStylesheets().add("style.css");
primaryStage.setScene(new Scene(root));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
with the stylesheet (style.css):
.root {
-fx-alignment: center ;
-fx-padding: 24 10 ;
}
.text-field:invalid {
-fx-control-inner-background: #ff7979 ;
-fx-focus-color: red ;
}

changing rate of Animation/Transition

I'm trying to do some basic animations, but am failing at the most simple things:
Rectangle rect = new Rectangle(100.0, 10.0);
mainPane.getChildren().add(rect); //so the rectangle is on screen
Animation anim = new Timeline(new KeyFrame(Duration.seconds(30.0),
new KeyValue(rect.widthProperty(), 0.0, Interpolator.LINEAR)));
rect.setOnMouseClicked(e -> {
if (anim.getStatus() == Status.RUNNING) {
anim.pause();
} else {
anim.setRate(Math.random() * 5.0);
anim.play();
System.out.println(anim.getRate());
}
});
The problem I am facing is that when I click the rectangle multiple times, the size will randomly jump around, instead of just changing the speed at which it drops. So for example, I let it run to about 50% size at speed ~2.5 and then stop it. When I start it up again, it will jump to a totally different size, smaller for a lower speed, bigger for a higher speed, so for example to ~20% for ~1.0 speed or ~80% for ~4.5 speed.
At first I thought animation was pre-calculated for the new speed and thus jumped to the position at which it would be, had it been played with the new speed from the beginning for the time that it was already playing before the pause, but it's bigger for a smaller speed, which doesn't really make sense then.
How do I change the speed/rate of an animation without having it jump around?
I think your diagnosis is correct: the current value is interpolated given the current time and current rate. If you decrease the rate without changing the current time, you are then earlier in the animation. Since the animation is shrinking this has the effect of making the rectangle bigger.
The easiest way is probably just to start a new animation each time:
import javafx.animation.Animation;
import javafx.animation.Animation.Status;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class VariableRateAnimation extends Application {
private Animation anim ;
#Override
public void start(Stage primaryStage) {
Pane mainPane = new Pane();
Rectangle rect = new Rectangle(100.0, 10.0);
mainPane.getChildren().add(rect); //so the rectangle is on screen
rect.setOnMouseClicked(e -> {
if (anim != null && anim.getStatus() == Status.RUNNING) {
System.out.println("Paused (" + anim.getTotalDuration().subtract(anim.getCurrentTime())+ " remaining)");
anim.pause();
} else {
Duration duration = Duration.seconds(30.0 * rect.getWidth() / (100 * Math.random() * 5.0));
System.out.println("Starting: ("+duration+ " to go)");
double currentWidth = rect.getWidth() ;
if (anim != null) {
anim.stop();
}
anim = new Timeline(
new KeyFrame(Duration.ZERO, new KeyValue(rect.widthProperty(), currentWidth, Interpolator.LINEAR)),
new KeyFrame(duration, new KeyValue(rect.widthProperty(), 0.0, Interpolator.LINEAR)));
anim.play();
}
});
primaryStage.setScene(new Scene(mainPane, 600, 600));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}

RotationInterpolator interfering with translate in java3d

I expected the following code to translate the ColorCube, and then rotate it around itself, instead it doesn't translate, it just rotates around the origin. What am I doing wrong here?
import javax.media.j3d.Alpha;
import javax.media.j3d.BoundingSphere;
import javax.media.j3d.BranchGroup;
import javax.media.j3d.RotationInterpolator;
import javax.media.j3d.Transform3D;
import javax.media.j3d.TransformGroup;
import javax.media.j3d.View;
import javax.vecmath.Vector3f;
import com.sun.j3d.utils.geometry.ColorCube;
import com.sun.j3d.utils.universe.SimpleUniverse;
public class TestRotTrans {
public TestRotTrans(){
SimpleUniverse su = new SimpleUniverse();
BranchGroup root = new BranchGroup();
TransformGroup tg = new TransformGroup();
tg.setCapability(TransformGroup.ALLOW_TRANSFORM_WRITE);
root.addChild(tg);
// Move to center
Transform3D translater = new Transform3D();
translater.setTranslation(new Vector3f(-0.3f, -0.3f, -0.3f));
tg.setTransform(translater);
// Rotate around y
TransformGroup tgRot = new TransformGroup();
RotationInterpolator rotator = new RotationInterpolator(new Alpha(-1,5000), tg);
BoundingSphere bounds = new BoundingSphere();
rotator.setSchedulingBounds(bounds);
tgRot.addChild(rotator);
tg.addChild(tgRot);
tg.addChild(new ColorCube(0.4f));
su.addBranchGraph(root);
su.getViewingPlatform().setNominalViewingTransform();
su.getViewer().getView().setProjectionPolicy(View.PERSPECTIVE_PROJECTION);
}
public static void main(String[] args) {
new TestRotTrans();
}
}
Well... It does seem to translate for a split second, before the rotation kicks in and undoes the translation.
The solution to the problem was to make tgRot the parent of tg, and make rotator look at tgRot, so that the tree ends up looking like this:
BranchGroup root
---- TransformGroup tgRot
---- RotationInterpolator rotator
---- TransformGroup tg
---- ColorCube cube
---- Transform3D translator

Resources