I want to change the color of a button to it's invert color and back as a transition.
I was able to use Timeline with ColorAdjust to do this with the brightness, but I didn't found a effect class to transition the color of a button with Timeline.
Hope someone out there is able to help me?
Thanks!
A inversion effect can be achieved by using a Blend effect with BlendMode.DIFFERENCE and a topInput that is black for no inversion and white for completely inverted colors. Example:
#Override
public void start(Stage primaryStage) {
Blend blendEffect = new Blend(BlendMode.DIFFERENCE);
ColorInput input = new ColorInput();
blendEffect.setTopInput(input);
Button btn = new Button("Inversion Animation");
input.widthProperty().bind(btn.widthProperty());
input.heightProperty().bind(btn.heightProperty());
btn.setEffect(blendEffect);
btn.setStyle("-fx-body-color: orange;");
DoubleProperty brightness = new SimpleDoubleProperty(0);
input.paintProperty().bind(Bindings.createObjectBinding(() -> Color.BLACK.interpolate(Color.WHITE, brightness.get()), brightness));
Timeline timeline = new Timeline(
new KeyFrame(Duration.ZERO, new KeyValue(brightness, 0d)),
new KeyFrame(Duration.seconds(1), new KeyValue(brightness, 1d))
);
timeline.setOnFinished(evt -> timeline.setRate(-timeline.getRate()));
btn.setOnAction((ActionEvent event) -> {
timeline.play();
});
StackPane root = new StackPane();
root.getChildren().add(btn);
Scene scene = new Scene(root, 500, 500);
primaryStage.setScene(scene);
primaryStage.show();
}
Related
How should I use my Buttons(red and blue).
Got four buttons on my pane. Two of them to draw the shapes circle and square on to the pane, and two to color them with either red or blue.
I want the color Buttons to only paint the last shape Button(Circle1 or Square) I clicked on.
Any suggestions?
public void start(Stage primaryStage) {
HBox hBox = new HBox();
Button circle = new Button("Circle");
Button square = new Button("Square");
Button red = new Button("Red");
Button blue = new Button("Blue");
hBox.getChildren().addAll(circle, square, red, blue);
Rectangle Square = new Rectangle();
square.setOnAction(e -> {
Square.setX(200);
Square.setY(200);
Square.setHeight(75);
Square.setWidth(75);
});
Circle Circle1 = new Circle();
red.setOnAction(e -> {
Square.setFill(Color.RED);
Circle1.setFill(Color.RED);
});
blue.setOnAction(e -> {
Square.setFill(Color.BLUE);
Circle1.setFill(Color.BLUE);
});
circle.setOnAction(e -> {
Circle1.setCenterX(100);
Circle1.setCenterY(100);
Circle1.setRadius(45);
});
BorderPane borderPane = new BorderPane();
borderPane.getChildren().addAll(Square, Circle1, hBox);
Scene scene = new Scene(borderPane, 600, 500);
primaryStage.setTitle("ShowBorderPane");
primaryStage.setScene(scene);
primaryStage.show();
}
}
I created scene, animations, list view, my problem is how to make animations play when I click on them in list view, and also, I need to create so more then one animation can play in one time.
Here is my code:
Group group = new Group();
Circle circle = new Circle(50, 300, 50);
circle.setFill(Color.RED);
TranslateTransition translate = new TranslateTransition();
translate.setByX(400);
translate.setDuration(Duration.millis(1000));
translate.setCycleCount(500);
translate.setAutoReverse(true);
translate.setNode(circle);
FadeTransition fade = new FadeTransition();
fade.setDuration(Duration.millis(1000));
fade.setFromValue(10);
fade.setToValue(0.1);
fade.setCycleCount(500);
fade.setAutoReverse(true);
fade.setNode(circle);
ScaleTransition transition = new ScaleTransition();
transition.setByX(1);
transition.setByY(1);
transition.setDuration(Duration.millis(1000));
transition.setCycleCount(500);
transition.setAutoReverse(true);
transition.setNode(circle);
ListView listView = new ListView();
listView.setPrefWidth(120);
listView.setPrefHeight(90);
listView.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
listView.getItems().add("Translate Transition");
listView.getItems().add("Fade Transition");
listView.getItems().add("Scale Transition");
group.getChildren().addAll(circle, listView);
Scene scene = new Scene(group, 600, 600);
primaryStage.setScene(scene);
primaryStage.show();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
So, I have problem just with:
How to start animation(can be more then one animation in same time) when I click on some animation in list view.
You can add a listener to your listview that listens when items are selected. Something like this:
listView.getSelectionModel().selectedItemProperty().addListener((obs, ov, nv) -> {
if(nv != null && "Translate Transition".equals(nv)){
translate.play();
}
//Etc...
});
How could I set an image in a circle. Is there a better way to set an image with a circled frame? (particularly the image frame on windows 10 login screen)
Circle cir2 = new Circle(250,200,80);
cir2.setStroke(Color.SEAGREEN);
cir2.setFill(Color.SNOW);
cir2.setEffect(new DropShadow(+25d, 0d, +2d, Color.DARKSEAGREEN));
ImagePattern is what you are looking for.
It fills a Shape with an Image, so your code might look like this
cir2.setFill(new ImagePattern(Image));
test code
public void start(Stage primaryStage) {
try {
BorderPane root = new BorderPane();
root.setPadding(new Insets(10));
Scene scene = new Scene(root,400,400);
Label l = new Label("SHAPE IMAGE OF MY SISTER");
l.setFont(Font.font(Font.getFontNames().get(23), FontWeight.EXTRA_BOLD, 14));
l.setAlignment(Pos.CENTER);
l.setPrefWidth(Double.MAX_VALUE);
root.setTop(l);
///////////////important code starts from here
Circle cir2 = new Circle(250,250,120);
cir2.setStroke(Color.SEAGREEN);
Image im = new Image("https://juicylinksmag.files.wordpress.com/2016/02/juliet-ibrahim.jpg",false);
cir2.setFill(new ImagePattern(im));
cir2.setEffect(new DropShadow(+25d, 0d, +2d, Color.DARKSEAGREEN));
//////////////important code ends here
root.setCenter(cir2);
primaryStage.setScene(scene);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
Button btn=new Button("Click Me");
Button btn2=new Button("Click");
btn2.setOnAction(e->System.exit(0));
btn.setOnAction(new EventHandler<ActionEvent>(){
public void handle(ActionEvent action){
System.out.println(5);
}
});
btn2.relocate(0, 0);
StackPane root=new StackPane();
root.getChildren().add(btn);
root.getChildren().add(btn2);
Scene sene=new Scene(root,500,265);
primaryStage.setScene(sene);
primaryStage.show();
I want to move button and using above code but I am unable to move my button?
What is the problem in code and is their any other way to do it???
The answer is :
http://docs.oracle.com/javafx/2/animations/jfxpub-animations.htm
JavaFX has ready libraries for animations.
An example (the rectangle will be faded):
final Rectangle rect1 = new Rectangle(10, 10, 100, 100);
rect1.setArcHeight(20);
rect1.setArcWidth(20);
rect1.setFill(Color.RED);
...
FadeTransition ft = new FadeTransition(Duration.millis(3000), rect1);
ft.setFromValue(1.0); ft.setToValue(0.1);
ft.setCycleCount(Timeline.INDEFINITE);
ft.setAutoReverse(true);
ft.play();
In your code you maybe need TranslateTranstition or just use translateX and translateY methods
In javaFX, I want make a imageview that can change border when I click.
When click once, then imageview has a border.
When click again, then imageview doesn't have a border.
How can I make that?
Thanks in advance!
Well you will need:
a PseudoClass for toggling the CSS state
a wrapping Region, because the ImageView itself does neither support a background nor a border.
A simple working example (the toggling of the PseudoClass is done with the help of a BooleanProperty, which is common practice and makes the management of its state easier):
#Override
public void start(Stage primaryStage) {
PseudoClass imageViewBorder = PseudoClass.getPseudoClass("border");
ImageView imageview = new ImageView(
new Image("http://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast,_Dhaka,_Bangladesh.JPG"));
BorderPane imageViewWrapper = new BorderPane(imageview);
imageViewWrapper.getStyleClass().add("image-view-wrapper");
BooleanProperty imageViewBorderActive = new SimpleBooleanProperty() {
#Override
protected void invalidated() {
imageViewWrapper.pseudoClassStateChanged(imageViewBorder, get());
}
};
imageview.setOnMouseClicked(ev -> imageViewBorderActive
.set(!imageViewBorderActive.get()));
BorderPane root = new BorderPane(imageViewWrapper);
root.setPadding(new Insets(15));
Scene scene = new Scene(root, 700, 400);
scene.getStylesheets().add(
getClass().getResource("application.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
}
and the necessary CSS:
.image-view-wrapper:border {
-fx-border-color: black;
-fx-border-style: solid;
-fx-border-width: 5;
}