Sunday 3 September 2017

JavaFx - Animated CSS Gradient Border

(Inspired by)/(Copied from): https://codepen.io/mike-schultz/pen/NgQvGO




  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package animated.css.gradient.border_1504238771462;

import java.util.ArrayList;
import java.util.List;
import java.util.stream.Stream;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyCodeCombination;
import javafx.scene.layout.Border;
import javafx.scene.layout.BorderStroke;
import javafx.scene.layout.BorderStrokeStyle;
import javafx.scene.layout.BorderWidths;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.paint.CycleMethod;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.util.Duration;

/**
 *
 * @author Sameer
 */
public class AnimatedCssGradientBorder_1504238771462 extends Application {

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

    @Override
    public void start(Stage primaryStage) {

        Scene scene = new Scene(getroot(), 600, 600);
        scene.getAccelerators().put(new KeyCodeCombination(KeyCode.ESCAPE), () -> System.exit(0));
        scene.getStylesheets().add("https://fonts.googleapis.com/css?family=Baloo+Bhaijaan");
        scene.getStylesheets().add(ClassLoader.getSystemResource("css/style.css").toString());

        primaryStage.setScene(scene);
        primaryStage.sizeToScene();
        primaryStage.show();
    }

    private Pane getroot() {
        VBox root = new VBox();
        root.setId("root-box");

        StackPane pane = new StackPane();
        pane.setPrefSize(400, 200);
        pane.setMinSize(400, 200);
        pane.setMaxSize(400, 200);
        setborder(pane);

        Text text = new Text("Animated\nCss\nborder");
        text.setId("text");

        pane.getChildren().add(text);

        root.getChildren().add(pane);
        root.setAlignment(Pos.CENTER);

        return root;
    }

    private void setborder(StackPane pane) {

        Color[] colors = Stream.of("darkorange", "tomato", "deeppink", "blueviolet", "steelblue", "cornflowerblue", "lightseagreen", "#6fba82", "chartreuse", "crimson")
                .map(Color::web)
                .toArray(Color[]::new);
        
        List<Border> list = new ArrayList<>();
        
        int mills[] = {-200};
        KeyFrame keyFrames[]  = Stream.iterate(0, i -> i+1)
                .limit(100)
                .map(i -> new LinearGradient(0, 0, 1, 1, true, CycleMethod.NO_CYCLE, new Stop[]{new Stop(0, colors[i%colors.length]), new Stop(1, colors[(i+1)%colors.length])}))
                .map(lg -> new Border(new BorderStroke(lg, BorderStrokeStyle.SOLID, new CornerRadii(5), new BorderWidths(2))))
                .map(b -> new KeyFrame(Duration.millis(mills[0]+=200), new KeyValue(pane.borderProperty(), b, Interpolator.EASE_IN)))
                .toArray(KeyFrame[]::new);
        
        Timeline timeline = new Timeline(keyFrames);
        timeline.setCycleCount(Timeline.INDEFINITE);
        timeline.play();
    }

}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
// style.css

#root-box {
    -fx-background-color:#1E1E1E;
}

#text {
    -fx-font-family:'Baloo Bhaijaan', cursive;
    -fx-font-size:3em;
    -fx-fill:white;
    -fx-line-spacing:0;
}
#text-pane {
    -fx-border-width: 2px;
    -fx-border-radius: 5px;
}
styled using hilite.me

No comments:

Post a Comment