ADD::Added animations to switching panes in extra activities

This commit is contained in:
Sem van der Hoeven
2019-04-10 12:04:17 +02:00
parent 78e050751f
commit cfc238af73
3 changed files with 84 additions and 61 deletions

View File

@@ -2,12 +2,15 @@ package greenify.client.controller;
import com.sun.javafx.scene.control.skin.ButtonSkin;
import greenify.client.rest.UserService;
import javafx.animation.FadeTransition;
import javafx.animation.ParallelTransition;
import javafx.animation.ScaleTransition;
import javafx.animation.TranslateTransition;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.Node;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
@@ -129,12 +132,26 @@ public class ExtraActivityController {
});
}
public void addFadeTransAnimation(Node node) {
FadeTransition fade = new FadeTransition(Duration.millis(350), node);
fade.setFromValue(0);
fade.setToValue(1.0);
TranslateTransition trans = new TranslateTransition(Duration.millis(350), node);
trans.setFromX(-800);
trans.setToX(0);
ParallelTransition par = new ParallelTransition();
par.setNode(node);
par.getChildren().addAll(fade, trans);
par.play();
}
/**
* displays the vegetarian meal section.
* @param event the click of the designated button
*/
public void displayVeganMeal(ActionEvent event) {
// System.out.println("display vm");
addFadeTransAnimation(veganMealPane);
veganMealPane.setVisible(true);
bikePane.setVisible(false);
temperaturePane.setVisible(false);
@@ -149,6 +166,7 @@ public class ExtraActivityController {
*/
public void displayBike(ActionEvent event) {
// System.out.println("display b");
addFadeTransAnimation(bikePane);
veganMealPane.setVisible(false);
bikePane.setVisible(true);
temperaturePane.setVisible(false);
@@ -163,6 +181,7 @@ public class ExtraActivityController {
*/
public void displayTemperature(ActionEvent event) {
// System.out.println("display t");
addFadeTransAnimation(temperaturePane);
veganMealPane.setVisible(false);
bikePane.setVisible(false);
temperaturePane.setVisible(true);
@@ -177,6 +196,7 @@ public class ExtraActivityController {
*/
public void displaySolarPanel(ActionEvent event) {
// System.out.println("display sp");
addFadeTransAnimation(solarPanelPane);
veganMealPane.setVisible(false);
bikePane.setVisible(false);
temperaturePane.setVisible(false);
@@ -190,6 +210,7 @@ public class ExtraActivityController {
* @param event the click of the designated button
*/
public void displayLocalProduce(ActionEvent event) {
addFadeTransAnimation(localProducePane);
veganMealPane.setVisible(false);
bikePane.setVisible(false);
temperaturePane.setVisible(false);
@@ -203,6 +224,7 @@ public class ExtraActivityController {
* @param event the click of the designated button
*/
public void displayPublicTransport(ActionEvent event) {
addFadeTransAnimation(publicTransportPane);
veganMealPane.setVisible(false);
bikePane.setVisible(false);
temperaturePane.setVisible(false);

View File

@@ -461,14 +461,14 @@
</Button>
<TableView fx:id="globalLeaderboard" layoutX="56.0" layoutY="220.0" prefHeight="333.0" prefWidth="200.0">
<columns>
<TableColumn fx:id="globalUser" prefWidth="75.0" text="User" />
<TableColumn fx:id="globalScore" prefWidth="124.0" text="Score" />
<TableColumn fx:id="globalUser" prefWidth="121.0" text="User" />
<TableColumn fx:id="globalScore" prefWidth="78.0" text="Score" />
</columns>
</TableView>
<TableView fx:id="developmentLeaderboard" layoutX="302.0" layoutY="220.0" prefHeight="333.0" prefWidth="200.0">
<columns>
<TableColumn fx:id="developmentUser" prefWidth="75.0" text="User" />
<TableColumn fx:id="developmentScore" prefWidth="124.0" text="Score" />
<TableColumn fx:id="developmentUser" prefWidth="126.0" text="User" />
<TableColumn fx:id="developmentScore" prefWidth="73.0" text="Score" />
</columns>
</TableView>
<Label layoutX="69.0" layoutY="177.0" prefHeight="46.0" prefWidth="187.0" text="Global Leaderboard" textAlignment="CENTER" textFill="#5f1616">

View File

@@ -1,5 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
@@ -8,63 +9,6 @@
<AnchorPane prefHeight="611.0" prefWidth="820.0" stylesheets="@../stylesheets/extraActivitiesStyle.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="greenify.client.controller.ExtraActivityController">
<children>
<AnchorPane prefHeight="611.0" prefWidth="107.0">
<children>
<Button fx:id="displayVeganMealButton" contentDisplay="TOP" layoutX="14.0" layoutY="62.0" mnemonicParsing="false" onAction="#displayVeganMeal" prefHeight="70.0" prefWidth="82.0" styleClass="navButton">
<graphic>
<ImageView fitHeight="45.0" fitWidth="45.0" pickOnBounds="true" preserveRatio="true" styleClass="navButton">
<image>
<Image url="@../icons/icons8-vegan-food-100.png" />
</image>
</ImageView>
</graphic>
</Button>
<Button fx:id="displayLocalProduceButton" contentDisplay="TOP" layoutX="14.0" layoutY="143.0" mnemonicParsing="false" onAction="#displayLocalProduce" prefHeight="70.0" prefWidth="82.0" styleClass="navButton">
<graphic>
<ImageView fitHeight="45.0" fitWidth="45.0" pickOnBounds="true" preserveRatio="true" styleClass="navButton">
<image>
<Image url="@../icons/localProduce.png" />
</image>
</ImageView>
</graphic>
</Button>
<Button fx:id="displayBikeButton" contentDisplay="TOP" layoutX="14.0" layoutY="224.0" mnemonicParsing="false" onAction="#displayBike" prefHeight="70.0" prefWidth="82.0" styleClass="navButton">
<graphic>
<ImageView fitHeight="45.0" fitWidth="48.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@../icons/icons8-bicycle-filled-100.png" />
</image>
</ImageView>
</graphic></Button>
<Button fx:id="displaySolarPanelButton" contentDisplay="TOP" layoutX="14.0" layoutY="467.0" mnemonicParsing="false" onAction="#displaySolarPanel" prefHeight="70.0" prefWidth="82.0" styleClass="navButton">
<graphic>
<ImageView fitHeight="45.0" fitWidth="48.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@../icons/icons8-solar-panel-filled-100.png" />
</image>
</ImageView>
</graphic>
</Button>
<Button fx:id="displayTemperatureButton" contentDisplay="TOP" layoutX="14.0" layoutY="386.0" mnemonicParsing="false" onAction="#displayTemperature" prefHeight="70.0" prefWidth="82.0" styleClass="navButton">
<graphic>
<ImageView fitHeight="45.0" fitWidth="48.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@../icons/icons8-temperature-inside-64.png" />
</image>
</ImageView>
</graphic>
</Button>
<Button fx:id="displayPublicTransportButton" contentDisplay="TOP" layoutX="14.0" layoutY="305.0" mnemonicParsing="false" onAction="#displayPublicTransport" prefHeight="70.0" prefWidth="82.0" styleClass="navButton">
<graphic>
<ImageView fitHeight="45.0" fitWidth="45.0" pickOnBounds="true" preserveRatio="true" styleClass="navButton">
<image>
<Image url="@../icons/publicTransport.png" />
</image>
</ImageView>
</graphic>
</Button>
</children>
</AnchorPane>
<AnchorPane fx:id="veganMealPane" layoutX="107.0" prefHeight="611.0" prefWidth="713.0">
<children>
<Line fx:id="line1" endX="79.0" layoutX="465.0" layoutY="7.0" stroke="#545b54" />
@@ -257,5 +201,62 @@
</HBox>
</children>
</AnchorPane>
<AnchorPane prefHeight="611.0" prefWidth="107.0">
<children>
<Button fx:id="displayVeganMealButton" contentDisplay="TOP" layoutX="14.0" layoutY="62.0" mnemonicParsing="false" onAction="#displayVeganMeal" prefHeight="70.0" prefWidth="82.0" styleClass="navButton">
<graphic>
<ImageView fitHeight="45.0" fitWidth="45.0" pickOnBounds="true" preserveRatio="true" styleClass="navButton">
<image>
<Image url="@../icons/icons8-vegan-food-100.png" />
</image>
</ImageView>
</graphic>
</Button>
<Button fx:id="displayLocalProduceButton" contentDisplay="TOP" layoutX="14.0" layoutY="143.0" mnemonicParsing="false" onAction="#displayLocalProduce" prefHeight="70.0" prefWidth="82.0" styleClass="navButton">
<graphic>
<ImageView fitHeight="45.0" fitWidth="45.0" pickOnBounds="true" preserveRatio="true" styleClass="navButton">
<image>
<Image url="@../icons/localProduce.png" />
</image>
</ImageView>
</graphic>
</Button>
<Button fx:id="displayBikeButton" contentDisplay="TOP" layoutX="14.0" layoutY="224.0" mnemonicParsing="false" onAction="#displayBike" prefHeight="70.0" prefWidth="82.0" styleClass="navButton">
<graphic>
<ImageView fitHeight="45.0" fitWidth="48.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@../icons/icons8-bicycle-filled-100.png" />
</image>
</ImageView>
</graphic></Button>
<Button fx:id="displaySolarPanelButton" contentDisplay="TOP" layoutX="14.0" layoutY="467.0" mnemonicParsing="false" onAction="#displaySolarPanel" prefHeight="70.0" prefWidth="82.0" styleClass="navButton">
<graphic>
<ImageView fitHeight="45.0" fitWidth="48.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@../icons/icons8-solar-panel-filled-100.png" />
</image>
</ImageView>
</graphic>
</Button>
<Button fx:id="displayTemperatureButton" contentDisplay="TOP" layoutX="14.0" layoutY="386.0" mnemonicParsing="false" onAction="#displayTemperature" prefHeight="70.0" prefWidth="82.0" styleClass="navButton">
<graphic>
<ImageView fitHeight="45.0" fitWidth="48.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@../icons/icons8-temperature-inside-64.png" />
</image>
</ImageView>
</graphic>
</Button>
<Button fx:id="displayPublicTransportButton" contentDisplay="TOP" layoutX="14.0" layoutY="305.0" mnemonicParsing="false" onAction="#displayPublicTransport" prefHeight="70.0" prefWidth="82.0" styleClass="navButton">
<graphic>
<ImageView fitHeight="45.0" fitWidth="45.0" pickOnBounds="true" preserveRatio="true" styleClass="navButton">
<image>
<Image url="@../icons/publicTransport.png" />
</image>
</ImageView>
</graphic>
</Button>
</children>
</AnchorPane>
</children>
</AnchorPane>