首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >生成图标通知javafx

生成图标通知javafx
EN

Stack Overflow用户
提问于 2013-11-18 05:38:18
回答 2查看 2.2K关注 0票数 0

我想问一下,如何在现有节点上创建通知图标!这里有一个我正在用来作为灵感的链接!http://www.red-team-design.com/notification-bubble-css3-keyframe-animation如果有人能帮我的话就太好了^^

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-11-22 04:00:44

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

下面是这样做的方法:

AnimatedButton.java

代码语言:javascript
复制
    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

代码语言:javascript
复制
    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

代码语言:javascript
复制
    .label{
    -fx-font-size: 12;
    -fx-font-weight: bold;
    -fx-text-fill: black;
    -fx-padding:5;
}
票数 2
EN

Stack Overflow用户

发布于 2013-11-19 17:24:48

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20036505

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档