Animation

Table of Contents

Fazendo Animação

Fazer animação é muito fácil no JavaFX quando utilizamos as APIs embutidas de transição. Cada Transition do JavaFX controla um ou mais propriedades do Node (ou Shape).

Por exemplo, a FadeTransition controla a opacidade do node, variando a propriedade ao longo do tempo. Desaparecendo alguma coisa gradualmente, você pode mudar de totalmente opaco (1) para totalmente transparente (0).

O TranslateTransition move um node modificando as propriedades translateX e translateY (ou translateZ se você estiver trabalhando com 3D). Você pode jogar múltiplas transições em paralelo com um ParallelTransition ou sequencialmente com um SequentialTransition.

Para controlar o tempo entre duas transições sequenciais, utilize PauseTransition ou configure um delay antes da transição começar com o método Transition setDelay(). Você pode também definir uma ação quando uma Transition completa utiliza a ação de manipulação da propriedade onFinished da Transition.

Transitions começa com o método play() ou playFromStart(). O método play() começa na transição no tempo atual, o método playFromStart() começa no tempo 0. Há outros método o stop() e o pause(). Você pode ver o status da transição com o getStatus(), o qual retorna um Animation.Status enum com os valores: RUNNING, PAUSED ou STOPPED.

Todas as transições suportam propriedades comuns como duration, autoReverse, cycleCount, onFinished, currentTime e node ou shape (para transições específicas para o Shape). Vamos definir um RotateTransition para o programa MyShapes. A rotação começa quando um usuário clica dentro da janela do programa.

package sample;

import javafx.animation.Animation;
import javafx.animation.Interpolator;
import javafx.animation.RotateTransition;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.effect.Reflection;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Ellipse;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Main extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        Ellipse ellipse = new Ellipse(110, 70);
        ellipse.setFill(Color.LIGHTBLUE);
        Text text = new Text("Minhas Formas");
        text.setFont(new Font("Arial Bold", 24));

        Reflection r = new Reflection();
        r.setFraction(.8);
        r.setTopOffset(1.0);
        text.setEffect(r);

        StackPane stackPane = new StackPane();

        // Define RotateTransition
        RotateTransition rotate = new RotateTransition(
                Duration.millis(2500), stackPane);
        rotate.setToAngle(360);
        rotate.setFromAngle(0);
        rotate.setInterpolator(Interpolator.LINEAR);
        // configure mouse click handler
        stackPane.setOnMouseClicked(mouseEvent -> {
            if (rotate.getStatus().equals(Animation.Status.RUNNING)) {
                rotate.pause();
            } else {
                rotate.play();
            }
        });

        stackPane.getChildren().addAll(ellipse, text);
        Scene scene = new Scene(stackPane, 350, 230, Color.LIGHTYELLOW);
        stage.setTitle("Minhas Formas com JavaFX");
        stage.setScene(scene);
        stage.show();
    }


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

RotateTransition

O construtor RotateTransition especifica uma duração de 2500 milissegundos e aplica a transição ao node StackPane. A rotação da animação começa no ângulo 0 e processa linearmente para o ângulo 360, fornecendo uma rotação completa. A animação começa quando o usuário clica em qualquer lugar dentro do layout StackPane.

Vamos ver algumas coisas interessantes. Primeiro, porque definimos a transição no node StackPane, a rotação aplica a todos os filhos do StackPane. Significa que não apenas a Ellipse e Text vão rotacionar, mas também os efeitos de sobra e reflexão.

Segundo, o evento de manipulação checa o status da transição. Se a animação está em progresso (executando), o evento de manipulação pode pausar a transição. Se não está executando, pode ser iniciado com play(). Porque o play() começa a transição no tempo atual, o play() cancela o status de pause() e reinicia a transição de onde parou.