Using JavaFX to Create Animated Login Form Using KeyFrame Properties.

Using JavaFX, we can design incrideble desktop application with awesome designs and smooth animations. In this tutorial shows how to design animated Login form with KeyFrame properties. The first thing you need to create Login class and Homepage class inside your project. Homepage it's a landing page.

Create method inside a Login class and write the code as follows for animations;

Timeline timeline = new Timeline();
        timeline.getKeyFrames().addAll(
                new KeyFrame(Duration.ZERO, new KeyValue(pane2.opacityProperty(), 1)),
                new KeyFrame(Duration.millis(1000), new KeyValue(pane2.opacityProperty(), 0.8)),
                new KeyFrame(Duration.millis(2000), new KeyValue(pane2.opacityProperty(), 0.3)),
                new KeyFrame(Duration.millis(3000), new KeyValue(pane2.opacityProperty(), 0))
        );
        timeline.setAutoReverse(false);
        timeline.play();
        timeline.setOnFinished(value -> {
            bpane.setCenter(null);
            bpane.setCenter(homepage.homepage());
            bpane.setTop(homepage.Topbar());
            bpane.setLeft(homepage.Sidenav());
        });

NOTE: Durations 1000 (1 second),2000 (2 seconds) and 3000 (3 seconds), it's a time interval for displaying animation effects.

Inside a Login class the use the code below.


package login;

import com.jfoenix.controls.JFXButton;
import com.jfoenix.controls.JFXPasswordField;
import com.jfoenix.controls.JFXTextField;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Hyperlink;
import javafx.scene.effect.DropShadow;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;

/**
 *
 * @author homepc
 */
public class Login extends Application {

    Pane pane1 = new Pane();
    Pane pane2 = new Pane();
    BorderPane bpane = new BorderPane();
    Homepage homepage = new Homepage();

    @Override
    public void start(Stage primaryStage) {
        JFXButton btn = new JFXButton("Sign In");

        btn.setButtonType(JFXButton.ButtonType.RAISED);
        btn.getStyleClass().add("button-raised");

        pane2.setLayoutX(220);
        pane2.setLayoutY(180);
        pane2.setStyle("-fx-background-color:white");
        pane2.setEffect(new DropShadow());
        pane2.setPrefSize(350, 250);

        JFXTextField txtusername = new JFXTextField();
        txtusername.setPromptText("Username");

        JFXPasswordField txtpassword = new JFXPasswordField();
        txtpassword.setPromptText("Password");

        Hyperlink label = new Hyperlink("Forgot password ?");

        btn.setOnAction(value -> {
            login(txtusername.getText(), txtpassword.getText()
            );
        });

        VBox vbox = new VBox(10, txtusername, txtpassword, btn, label);
        vbox.setLayoutX(55);
        vbox.setLayoutY(55);
        pane2.getChildren().add(vbox);

        pane1.getChildren().add(pane2);

        bpane.setCenter(pane1);

        Scene scene = new Scene(bpane, 800, 600);
        scene.getStylesheets().add(SuperMarketBilling.class.getResource("/css/StyleSheet.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public void login(String username, String password) {
        goHome();
        try {
           
        } catch (Exception e) {

        }
    }

    public void goHome() {

        Timeline timeline = new Timeline();
        timeline.getKeyFrames().addAll(
                new KeyFrame(Duration.ZERO, new KeyValue(pane2.opacityProperty(), 1)),
                new KeyFrame(Duration.millis(1000), new KeyValue(pane2.opacityProperty(), 0.8)),
                new KeyFrame(Duration.millis(2000), new KeyValue(pane2.opacityProperty(), 0.3)),
                new KeyFrame(Duration.millis(3000), new KeyValue(pane2.opacityProperty(), 0))
        );
        timeline.setAutoReverse(false);
        timeline.play();
        timeline.setOnFinished(value -> {
            bpane.setCenter(null);
            bpane.setCenter(homepage.homepage());
            bpane.setTop(homepage.Topbar());
            bpane.setLeft(homepage.Sidenav());
        });
    }

    public void Toggle_sidenave() {

        Timeline timeline = new Timeline();
        if (bpane.getLeft() == null) {
            timeline.getKeyFrames().addAll(
                
            );
        } else {

        }
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

}

In Homepage class use the code below.


package login;

import com.jfoenix.controls.JFXListView;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.control.Label;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.ToolBar;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.effect.Lighting;
import javafx.scene.layout.Pane;

/**
 *
 * @author homepc
 */
public class Homepage {

    ObservableList oblist = FXCollections.observableArrayList();

    public Pane homepage() {
        Pane pane_home = new Pane();
        TableView table = new TableView();
        TableColumn name = new TableColumn("Product Name");
        TableColumn price = new TableColumn("Product Price");
        TableColumn profit = new TableColumn("Product Profit");

        name.setCellValueFactory(new PropertyValueFactory("Product Name"));
        price.setCellValueFactory(new PropertyValueFactory("Product Price"));
        profit.setCellValueFactory(new PropertyValueFactory("Product Profit"));

        table.getColumns().addAll(name, price, profit);
        table.setItems(oblist);
        
        name.setPrefWidth(150);
        price.setPrefWidth(150);
        profit.setPrefWidth(100);

        pane_home.getChildren().add(table);

        return pane_home;
    }

    public class Table {
String name;
int price;
int profit;

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }

        public int getPrice() {
            return price;
        }

        public void setPrice(int price) {
            this.price = price;
        }

        public int getProfit() {
            return profit;
        }

        public void setProfit(int profit) {
            this.profit = profit;
        }

        public Table(String name, int price, int profit) {
            this.name = name;
            this.price = price;
            this.profit = profit;
        }


    }

    public ToolBar Topbar() {
        ToolBar toolbar = new ToolBar();
        toolbar.setPrefHeight(50);
        toolbar.setEffect(new Lighting());


        return toolbar;
    }

    public Pane Sidenav() {
        Pane pane_sidenav = new Pane();
        pane_sidenav.setPrefWidth(200);
        pane_sidenav.setStyle("-fx-background-color:white");

        JFXListView list = new JFXListView<>();
        for (int i = 0; i < 4; i++) {
            list.getItems().add(new Label("Item " + i));
        }
        list.getStyleClass().add("jfx-list-view");
        pane_sidenav.getChildren().add(list);
        return pane_sidenav;
    }
}


 


Login to comment


Comments