如何在JavaFX应用程序的CSS动画的变化？ [英] How to make the CSS changing animation in JavaFX application?

问题描述

我想通过更改样式类来更改节点的样式。

 按钮按钮=新按钮（）;
button.getStyleClass（）。添加（1级）
button.setOnMouseClicked（新的EventHandler＆LT;＆的MouseEvent GT;（）{
        @覆盖
        公共无效手柄（的MouseEvent的MouseEvent）{
            。button.getStyleClass（）加（类别2）;
        }
    }）;
 

是否有可能逐步改变风格，例如做一些过渡？

解决方案

  

是否有可能逐步改变风格，例如做一些过渡？

是

您将需要使用的setStyle而不是样式类，因为类将是在CSS定义的静态的东西。有一个在JavaFX的CSS动画没有直接的支持。您需要执行Java中的code动画步骤修改CSS样式。

我想，当你想使用CSS来进行过渡，因为没有相应的Java API容易获得的，只有真正推荐这种方法。

要处理的动画，你可以使用标准的JavaFX动画时间轴它的CSS样式属性取决于操纵属性。

例如，绑定你的样式属性字符串。然后改变所述组件要改变（在这种情况下colorStringProperty）中的时间表。

  warningButton.styleProperty（）。绑定（
    新SimpleStringProperty（ -  FX-基地）
        .concat（colorStringProperty）
        .concat（;）
        .concat（ -  FX-字体大小：20像素;）
）;
 

下面是闪烁使用CSS与它的渐变色过渡的一个按钮的样本是由灰色变为红色底色时pressed。

 进口javafx.animation *。
进口javafx.application.Application;
导入javafx.beans.property *。
导入javafx.beans.value *。
导入javafx.event *。
进口javafx.scene.Scene;
进口javafx.scene.control.Button;
导入javafx.scene.image *。
进口javafx.scene.layout.StackPane;
进口javafx.scene.paint.Color;
进口javafx.stage.Stage;
进口javafx.util.Duration;/ **显​​示了如何使用动态时间轴修改CSS样式。 * /
公共类警告扩展应用{    私有静态最后弦乐背景=htt​​p://bobgreiner.tripod.com/1cc2ce10.jpg;    @覆盖
    公共无效启动（阶段阶段）抛出异常{
        最后OBJECTPROPERTY＆LT;颜色和GT; warningColor =新SimpleObjectProperty＆LT;＆GT;（Color.GRAY）;
        最后StringProperty colorStringProperty = createWarningColorStringProperty（warningColor）;        StackPane布局=新StackPane（）;
        layout.getChildren（）的addAll（
                新ImageView的（新的图像（背景））
                createWarningButton（
                        warningColor，
                        colorStringProperty
                ）
        ）;
        stage.setScene（新场景（布局））;
        stage.show（）;
    }    私人StringProperty createWarningColorStringProperty（最终OBJECTPROPERTY＆LT;颜色＆GT; warningColor）{
        最后StringProperty colorStringProperty =新SimpleStringProperty（）;
        setColorStringFromColor（colorStringProperty，warningColor）;
        warningColor.addListener（新的ChangeListener＆LT;颜色＆GT;（）{
            @覆盖
            公共无效改变（ObservableValue＆LT ;?扩展色彩与GT; observableValue，颜色oldColor，颜色newColor）{
                setColorStringFromColor（colorStringProperty，warningColor）;
            }
        }）;        返回colorStringProperty;
    }    私人按钮createWarningButton（最终OBJECTPROPERTY＆LT;颜色＆GT; warningColor，StringProperty colorStringProperty）{
        最终按钮warningButton =新按钮（！警告警告！）;
        warningButton.styleProperty（）。绑定（
                新SimpleStringProperty（ -  FX-基地）
                        .concat（colorStringProperty）
                        .concat（;）
                        .concat（ -  FX-字体大小：20像素;）
        ）;        warningButton.setOnAction（新的EventHandler＆LT;＆ActionEvent的GT;（）{
            @覆盖
            公共无效手柄（ActionEvent的ActionEvent的）{
                时间轴闪光灯=新的时间轴（
                    新的关键帧（Duration.seconds（0），新的键值（warningColor，Color.GRAY，Interpolator.LINEAR））
                    新的关键帧（Duration.seconds（0.25），新的键值（warningColor，Color.GRAY，Interpolator.LINEAR））
                    新的关键帧（Duration.seconds（1），新的键值（warningColor，Color.RED，Interpolator.LINEAR））
                    新的关键帧（Duration.seconds（1.25），新的键值（warningColor，Color.RED，Interpolator.LINEAR））
                ）;
                flash.setCycleCount（6）;
                flash.setAutoReverse（真）;
                flash.play（）;
            }
        }）;        返回warningButton;
    }    私人无效setColorStringFromColor（StringProperty colorStringProperty，OBJECTPROPERTY＆LT;颜色＆GT;彩色）{
        colorStringProperty.set（
                RGBA（
                        +（（int）的（color.get（）。getRed（）* 255））+，
                        +（（int）的（color.get（）。getGreen（）* 255））+，
                        +（（int）的（color.get（）。GetBlue进行（）* 255））+，
                        + color.get（）。getOpacity（）+
                ）
        ）;
    }    公共静态无效的主要（字串[] args）{
        启动（参数）;
    }
}
 

I want to change the style of Node by changing the style class.

Button button = new Button();
button.getStyleClass().add("class1")   
button.setOnMouseClicked(new EventHandler<MouseEvent>() {
        @Override
        public void handle(MouseEvent mouseEvent) {
            button.getStyleClass().add("class2");
        }
    });

Is it possible to change style gradually, for example make some transition?

解决方案

Is it possible to change style gradually, for example make some transition?

Yes.

You will need to use setStyle rather than style classes because classes are going to be static things defined in a css. There is no direct support in JavaFX css for animation. You need to perform the animation steps in Java code to modify the css style.

I'd only really recommend this approach when you want to use css to perform the transition because there are no corresponding Java APIs easily available.

To handle the animation, you can use the standard javafx animation Timeline to manipulate properties which the css style property depends on.

For example, bind your style property to string. Then vary the component you want to change (in this case the colorStringProperty) in a timeline.

warningButton.styleProperty().bind(
    new SimpleStringProperty("-fx-base: ")
        .concat(colorStringProperty)
        .concat(";")
        .concat("-fx-font-size: 20px;")
);

Here is a sample which flashes a button using css with a gradual color transition of it's base color from gray to red when pressed.

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);
    }
}

这篇关于如何在JavaFX应用程序的CSS动画的变化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！