1

ボタンを使用してJavaFXでカスタム複合UIコントロールを構築しています。コントロールのどこかにホバリングすると、不透明度が0から0.1にフェードインします。ボタン自体の上にカーソルを置くと、不透明度が 1.0 に変更されます。これは、CSS を介して簡単に実現できます。

ここで FadeTransition:

// unfortunately, animations cannot be defined in CSS yet
FadeTransition fadeInButton =
    new FadeTransition(Duration.millis(300), settingsButton);
fadeInButton.setFromValue(0);
fadeInButton.setToValue(0.1);

ボタンの CSS は次のとおりです。

.settings-button {
    -fx-background-image: url("settings_32_inactive.png");
    -fx-background-repeat: no-repeat;   
    -fx-background-position: center center;
    -fx-opacity: 0; /* button shall be initially invisible, will be faded in */
}

.settings-button:hover {
    -fx-background-image: url("settings_32.png");
    -fx-opacity: 1.0; /* why is this ignored if used together with animations? */
}

アニメーションと CSS の両方のプロパティは、別々にうまく機能します。残念ながら、組み合わせて、アニメーションは CSS ファイルの -fx-opacity プロパティをオーバーライドするようです。アニメーションと CSS プロパティの両方を連携させる方法はありますか?

4

1 に答える 1

0

API 呼び出しで CSS を使用する方法はありません。次のトピックを参照してください: JavaFX: CSS によってフォントが設定された後、プログラムでフォント サイズを設定できません。

しかし、次のトリックを行うことができます:

  • ボタンの不透明度が 0.1 で、ホバーされている場合は 1 です。
  • ボタンをペインに配置し、このペインを 0 から 1 にアニメーション化します

次の CSS を参照してください。

/*Button*/
.b1 { -fx-opacity: 0.1; }
.b1:hover { -fx-opacity: 1.0; }
/*Pane*/
.p1 {
    -fx-border-color: red;
    -fx-opacity: 0;
}

そしてコード：

public class OpacityCss extends Application {

    private static final Duration DURATION = Duration.millis(300);

    @Override
    public void start(Stage primaryStage) {
        Pane pane = new Pane();
        pane.getStyleClass().add("p1");
        pane.setMinSize(100, 100);
        pane.setMaxSize(100, 100);

        final Button btn = new Button("Fading Button");
        btn.getStyleClass().add("b1");
        pane.getChildren().add(btn);

        final FadeTransition fade = new FadeTransition(DURATION, pane);
        fade.setAutoReverse(true);
        fade.setFromValue(0);
        fade.setToValue(1);

        pane.setOnMouseEntered(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent t) {
                fade.setCycleCount(1); // this way autoreverse wouldn't kick
                fade.playFromStart();
            }
        });

        pane.setOnMouseExited(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent t) {
                fade.setCycleCount(2); // starting from autoreverse
                fade.playFrom(DURATION);
            }
        });

        StackPane root = new StackPane();
        root.getChildren().addAll(pane);
        Scene scene = new Scene(root, 300, 250);
        scene.getStylesheets().add(getClass().getResource("/css/btn.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) { launch(); }
}
于 2013-03-01T13:18:13.320 に答える