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;<br><br>import javafx.animation.Animation;<br>import javafx.animation.Interpolator;<br>import javafx.animation.RotateTransition;<br>import javafx.application.Application;<br>import javafx.scene.Scene;<br>import javafx.scene.effect.Reflection;<br>import javafx.scene.layout.StackPane;<br>import javafx.scene.paint.Color;<br>import javafx.scene.shape.Ellipse;<br>import javafx.scene.text.Font;<br>import javafx.scene.text.Text;<br>import javafx.stage.Stage;<br>import javafx.util.Duration;<br><br>public class Main extends Application {<br><br>    @Override<br>    public void start(Stage stage) throws Exception {<br>        Ellipse ellipse = new Ellipse(110, 70);<br>        ellipse.setFill(Color.<em>LIGHTBLUE</em>);<br>        Text text = new Text("Minhas Formas");<br>        text.setFont(new Font("Arial Bold", 24));<br><br>        Reflection r = new Reflection();<br>        r.setFraction(.8);<br>        r.setTopOffset(1.0);<br>        text.setEffect(r);<br><br>        StackPane stackPane = new StackPane();<br><br>        <em>// Define RotateTransition<br></em><em>        </em>RotateTransition rotate = new RotateTransition(<br>                Duration.<em>millis</em>(2500), stackPane);<br>        rotate.setToAngle(360);<br>        rotate.setFromAngle(0);<br>        rotate.setInterpolator(Interpolator.<em>LINEAR</em>);<br>        <em>// configure mouse click handler<br></em><em>        </em>stackPane.setOnMouseClicked(mouseEvent -&gt; {<br>            if (rotate.getStatus().equals(Animation.Status.<em>RUNNING</em>)) {<br>                rotate.pause();<br>            } else {<br>                rotate.play();<br>            }<br>        });<br><br>        stackPane.getChildren().addAll(ellipse, text);<br>        Scene scene = new Scene(stackPane, 350, 230, Color.<em>LIGHTYELLOW</em>);<br>        stage.setTitle("Minhas Formas com JavaFX");<br>        stage.setScene(scene);<br>        stage.show();<br>    }<br><br><br>    public static void main(String[] args) {<br>        <em>launch</em>(args);<br>    }<br>}

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.