Сделать уведомление об уведомлении javafx

Question

Я хотел бы спросить, как можно сделать значок уведомления по существующему узлу! Вот ссылка, которую я использую как вдохновение! http://www.red-team-design.com/notification-bubble-css3-keyframe-animation Было бы действительно спасти меня, если кто-нибудь может дать мне помощь ^^

Answer 1

Я просто решить эту проблему. Я использовал анимацию, созданную billman, но не расширив StackPane на этот раз, но расширив Button Node, и я установил значок уведомления, который будет расширяться из 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; 

}

Answer 2

Вы можете найти пример здесь: http://www.billmann.de/2012/08/05/javafx-miniiconanimationbutton/