Как сделать анимацию с CSS в JavaFX?
Я хочу изменить стиль Node
путем изменения класса style.
Button button = new Button();
button.getStyleClass().add("class1")
button.setOnMouseClicked(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent mouseEvent) {
button.getStyleClass().add("class2");
}
});
можно ли постепенно менять стиль, чтобы сделать что-то вроде перехода?
2 ответов
можно ли менять стиль постепенно, например сделать какой-то переход?
Да.
вам нужно будет использовать setStyle, а не классы стилей, потому что классы будут статическими вещами, определенными в css. В JavaFX css нет прямой поддержки анимации. Вам нужно выполнить шаги анимации в коде Java, чтобы изменить стиль css.
Я бы рекомендовал этот подход только тогда, когда вы хотите использовать css для выполнения переход, потому что нет соответствующих API Java, легко доступных.
для обработки анимации вы можете использовать стандартную анимацию javafx хронология для управления свойствами, от которых зависит свойство стиля css.
например, привяжите свойство style к string. Затем измените компонент, который вы хотите изменить (в данном случае colorStringProperty) на временной шкале.
warningButton.styleProperty().bind(
new SimpleStringProperty("-fx-base: ")
.concat(colorStringProperty)
.concat(";")
.concat("-fx-font-size: 20px;")
);
вот пример, который мигает кнопкой с помощью css с помощью постепенный переход цвета его основного цвета от серого к красному при нажатии.
import javafx.animation.*;
import javafx.application.Application;
import javafx.beans.property.*;
import javafx.beans.value.*;
import javafx.event.*;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.*;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.util.Duration;
/** Shows how you can modify css styles dynamically using a timeline. */
public class Warning extends Application {
private static final String BACKGROUND = "http://bobgreiner.tripod.com/1cc2ce10.jpg";
@Override
public void start(Stage stage) throws Exception{
final ObjectProperty<Color> warningColor = new SimpleObjectProperty<>(Color.GRAY);
final StringProperty colorStringProperty = createWarningColorStringProperty(warningColor);
StackPane layout = new StackPane();
layout.getChildren().addAll(
new ImageView(new Image(BACKGROUND)),
createWarningButton(
warningColor,
colorStringProperty
)
);
stage.setScene(new Scene(layout));
stage.show();
}
private StringProperty createWarningColorStringProperty(final ObjectProperty<Color> warningColor) {
final StringProperty colorStringProperty = new SimpleStringProperty();
setColorStringFromColor(colorStringProperty, warningColor);
warningColor.addListener(new ChangeListener<Color>() {
@Override
public void changed(ObservableValue<? extends Color> observableValue, Color oldColor, Color newColor) {
setColorStringFromColor(colorStringProperty, warningColor);
}
});
return colorStringProperty;
}
private Button createWarningButton(final ObjectProperty<Color> warningColor, StringProperty colorStringProperty) {
final Button warningButton = new Button("Warning! Warning!");
warningButton.styleProperty().bind(
new SimpleStringProperty("-fx-base: ")
.concat(colorStringProperty)
.concat(";")
.concat("-fx-font-size: 20px;")
);
warningButton.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent actionEvent) {
Timeline flash = new Timeline(
new KeyFrame(Duration.seconds(0), new KeyValue(warningColor, Color.GRAY, Interpolator.LINEAR)),
new KeyFrame(Duration.seconds(0.25), new KeyValue(warningColor, Color.GRAY, Interpolator.LINEAR)),
new KeyFrame(Duration.seconds(1), new KeyValue(warningColor, Color.RED, Interpolator.LINEAR)),
new KeyFrame(Duration.seconds(1.25), new KeyValue(warningColor, Color.RED, Interpolator.LINEAR))
);
flash.setCycleCount(6);
flash.setAutoReverse(true);
flash.play();
}
});
return warningButton;
}
private void setColorStringFromColor(StringProperty colorStringProperty, ObjectProperty<Color> color) {
colorStringProperty.set(
"rgba("
+ ((int) (color.get().getRed() * 255)) + ","
+ ((int) (color.get().getGreen() * 255)) + ","
+ ((int) (color.get().getBlue() * 255)) + ","
+ color.get().getOpacity() +
")"
);
}
public static void main(String[] args) {
launch(args);
}
}
JavaFX2 поддерживает переходы. Таким образом, вам не нужно делать анимацию шаг за шагом.
взгляните на это: http://docs.oracle.com/javafx/2/animations/basics.htm#CJAJJAGI