Question

我想问一下如何在现有节点上制作通知图标！这是我用作灵感的链接！ http://www.red-team-design.com/notification-bubble-css3-keyframe-animation 如果有人能给我一个帮助，它真的会救我^^

Answer 1

你可以在这里找到一个例子：
https://www.billmann.de/post/2012/08/05/javafx-miniiconanimationbutton/

Answer 2

我刚刚解决了这个问题。我已经使用了billman创建的动画但这次没有扩展StackPane，但是通过扩展Button Node，我已经将Notification图标设置为从StackPane扩展而且它完美地运行了!!

这样做的方法是：

AnimatedButton.java

import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.animation.TranslateTransition;
import javafx.scene.Node;
import javafx.scene.control.MenuItem;
import javafx.util.Duration;


public class Icons extends MenuItem {

private final Node icon;

private AnimationType type;

public Icons(String text, Node icon, AnimationType type) {
    setText(text);
    setGraphic(icon);
    this.icon = icon;
    this.type = type;
    addAnimation();
}

private void addBlinkAnimation() {
    final Timeline timeline = new Timeline();
    timeline.setCycleCount(Timeline.INDEFINITE);
    timeline.setAutoReverse(true);
    final KeyValue kv = new KeyValue(icon.opacityProperty(), 0.0);
    final KeyFrame kf = new KeyFrame(Duration.millis(700), kv);
    timeline.getKeyFrames().add(kf);
    timeline.play();
}

private void addJumpAnimation() {
    final TranslateTransition translateTransition = new TranslateTransition(Duration.millis(200), icon);
    final double start = 0.0;
    final double end = start - 4.0;
    translateTransition.setFromY(start);
    translateTransition.setToY(end);
    translateTransition.setCycleCount(-1);
    translateTransition.setAutoReverse(true);
    translateTransition.setInterpolator(Interpolator.EASE_BOTH);
    translateTransition.play();
}

public enum AnimationType {

    BLINK, JUMP, NONE;
};

private void addAnimation() {
    switch (type) {
        case BLINK:
            addBlinkAnimation();
            break;
        case JUMP:
            addJumpAnimation();
            break;
        case NONE:
            break;
        default:
            break;
    }
}

}

这是main.java

import javafx.application.Application;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.MenuButton;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;


public class Main extends Application {

@Override
public void start(Stage primaryStage) {
    MenuButton menu = new MenuButton("Bienvenue, Yassine", new ImageView(new Image("http://cdn1.iconfinder.com/data/icons/fs-icons-ubuntu-by-franksouza-/32/google-chrome.png", 20, 20, true, true)));
    menu.setCenterShape(true);
    Icons btn = new Icons("Notification", createNotification("5"), Icons.AnimationType.JUMP);
    Icons btn2 = new Icons("Mails", createNotification("4"), Icons.AnimationType.JUMP);
    Icons btn3 = new Icons("Private Messages", createNotification("10"), Icons.AnimationType.JUMP);
    menu.getItems().addAll(btn, btn2, btn3);
    StackPane root = new StackPane();
    Scene scene = new Scene(root, 300, 250);
    scene.getStylesheets().add(getClass().getResource("notification_icon.css").toExternalForm());
    root.getChildren().add(menu);
    primaryStage.setTitle("Hello World!");
    primaryStage.setScene(scene);
    primaryStage.show();
}

public static void main(String[] args) {
    launch(args);
}

private Node createNotification(String number) {
    StackPane p = new StackPane();
    Label lab = new Label(number);
    lab.setStyle("-fx-text-fill:white");
    Circle cercle = new Circle(10, Color.rgb(200, 0, 0, .9));
    cercle.setStrokeWidth(2.0);
    cercle.setStyle("-fx-background-insets: 0 0 -1 0, 0, 1, 2;");
    cercle.setSmooth(true);
    p.getChildren().addAll(cercle, lab);
    return p;
}

}

和css

.label{
-fx-font-size: 12;
-fx-font-weight: bold;
-fx-text-fill: black;
-fx-padding:5;

}

制作图标通知javafx

2 个答案: