I need to make an animation so that it plays when you hover over the button. I wrote something, but it looks crooked. Screenshots below.

This is how it looks, before I attached the graphics, using the setGraphic method, to the button. loginButton

This is how it looks after this code and the cursor on the element

 Rectangle rc = new Rectangle(0, 0, 84, 35); rc.setFill(Color.web("56c2e1")); ft = new FillTransition(); ft.setToValue(Color.web("3F9DB8")); ft.setShape(rc); ft.setDuration(new Duration(500)); loginButton.setGraphic(rc);

loginButton

So the essence of the question is, is it possible to put a square on the background somehow?

Clarification: I need to make the color of the element shimmer in another, when it is induced with a cursor. And FillTransition cannot be tied to a Node . So I had to do it as described above. Transfusion works as it should, but how to put on the background is not clear.

Example: http://www.demo.amitjakhu.com/login-form/

  • in the sense of when moving moves or what? - Herrgott
  • Do you have a cross pattern or something? - Alexey Shimansky
  • @Herrgott no, moves immediately, as I add graphics to the button - jessez
  • @ Alexey Shimansky forgot to clarify, I drew it, the cursor does not screen - jessez
  • @jessez so in the end, I personally do not understand what you need already?)) do you need the sign "enter" to change smoothly to the cross and another background? Or is this same cross stupid next to the inscription to arrange? Something I Am Lost - Aleksey Shimansky

1 answer 1

I wanted to do a more cumbersome way, but I will not. I will try to write a way through css .

Note: in general, when working with styles and css usually all styles are written in a separate file, and then this file is connected with styles and works directly with selectors. Like that:

 Scene scene = new Scene(root, 300, 250); scene.getStylesheets().addAll(this.getClass().getResource("style.css").toExternalForm()); primaryStage.setScene(scene); primaryStage.show();

Suppose you have a cross and a picture and this picture with the class is in the same folder (although of course it is better to put it in a separate folder with resources)

Therefore, the string with its path will be valid

 String declineImage = getClass().getResource("decline.png").toExternalForm();

At the button we set the styles:

 btn.setStyle("-fx-background-image: url('" + image + "'); -fx-background-repeat: no-repeat; -fx-background-position: 8px 4px;");

where we specify the picture in the background, position, etc. This is a regular css

And at the OnMouseEnter / OnMouseExit mouse event, we make a rectangle transparent:

  btn.setOnMouseEntered(new EventHandler<MouseEvent>() { @Override public void handle(MouseEvent event) { new Timeline( new KeyFrame(Duration.seconds(0), new KeyValue(rc.opacityProperty(), 1)), new KeyFrame(Duration.seconds(0.5), new KeyValue(rc.opacityProperty(), 0)) ).play(); } }); btn.setOnMouseExited(new EventHandler<MouseEvent>() { @Override public void handle(MouseEvent event) { new Timeline( new KeyFrame(Duration.seconds(0), new KeyValue(rc.opacityProperty(), 0)), new KeyFrame(Duration.seconds(0.5), new KeyValue(rc.opacityProperty(), 1)) ).play(); } });

The way to install the image in the background is not via css :

 // new Image(url) Image image = new Image(CurrentClass.class.getResource("/path/to/package/bg.jpg")); // new BackgroundSize(width, height, widthAsPercentage, heightAsPercentage, contain, cover) BackgroundSize backgroundSize = new BackgroundSize(100, 100, true, true, true, false); // new BackgroundImage(image, repeatX, repeatY, position, size) BackgroundImage backgroundImage = new BackgroundImage(image, BackgroundRepeat.REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.CENTER, backgroundSize); // new Background(images...) Background background = new Background(backgroundImage);

You can adapt it for yourself.