Pular para o conteúdo principal

Animações em JavaFX com Duration e Timeline

A tipagem básica do JavaFX é formada por tipos numéricos, String, Boolean, - até aqui semelhante ao Java - Void, Function, Null e Duration. O type Duration foi criado para simplificar a definição de literais que determinam valores para uma duração/faixa/pedaço do tempo, veja alguns exemplos:

var milisegundos = 1500ms;
var segundos = 50s;
var minutos = 15m;
var hora = 1h;

var hs = 30m * 3; //1h e 30m 

Bem mais simples e pouco verboso em uma comparação com Java. Um detalhe importante é que o valor de qualquer uma das variáveis acima é mantido em milisegundos. Com println fica fácil conferir:

println("{hora} / {minutos} / {segundos} / {milisegundos}");
// Saída: 3600000ms / 900000ms / 50000ms / 1500ms

Uso de Duration se justifica, por exemplo, em animações gráficas e é por esse motivo que entra em cena o Timeline, outro importante elemento do JavaFX,  que provê a capacidade de atualização no estado dos componentes visuais em um intervalo de tempo, ou melhor, durante uma duration! Quando escrevo estado dos componentes, me refiro as propriedades desses componentes.

Fiz um exemplo bem simples, um Timeline com 10 ciclos de execução registrados (propriedade repeatCount), cada uma disparada de 2 em 2 segundos. Durante a execução um contador é incrementado e seu valor apresentado em uma label, veja o código:

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.text.Font;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;

var contador = 0;

var t: Timeline = Timeline {
    repeatCount: 10 //ciclos
    keyFrames: KeyFrame {
        time: 2s  //a cada 2 segundos
        action: function(){
            label.text = "{++contador}"
        }
    }
};
t.play();

var label = Label {
    font: Font { size: 60.0 oblique:true },
    translateX: 90,
    translateY: 40
};

Stage {
    scene: Scene {
        width: 240
        height: 170
        content : label
    }
}

O Timeline é composto por um ou vários KeyFrames, cada um executado individualmente, single Thread, em ordem respeitando o time definido. O KeyFrame indica quem sofre as mudanças e que tempo isso acontece.
Quem foi ao Profissão Java 2010 viu o sorteador de brindes, na realidade um gerador de números aleatórios, que criei usando esse conceito de Timelines para trocar imagens (os números em vermelho) e alguns outros detalhes gerando a sensação do sorteio.

Explorando um pouco mais Duration, Timeline e KeyFrame, montei outro exemplo um pouco mais incrementado ainda para esse post: um circulo que segue o mouse a partir de um clique, inspirado no Fish Simulator um demo oficial do JavaFX referência para demonstrar como funciona o Scene Graph.

Na propriedade values do KeyFrame, indico que translationX e translationY sofrem transição de estado, do eixo atual para o posição do clique do mouse, usando Interpolação Linear.


import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.shape.*;
import javafx.scene.input.*;
import javafx.scene.paint.*;
import javafx.animation.*;
import javafx.util.*;

class Circulando extends Circle {
    var transicao: Timeline = Timeline { };

    public function vai(x:Number, y:Number):Void {
        //interrompe a timeline em execucao
        transicao.stop();

        /*
         * pega a diferença entre as coordenadas
         * p/ calcular a distancia entre os pontos.
         */
        var difX = x - translateX;
        var difY = y - translateY;
        var dist = Math.sqrt(difX * difX + difY * difY);

        //c/ a distancia calcula o tempo, cada pixel em 10ms
        var t = 1s * dist / 100.0;

        transicao = Timeline {
            keyFrames: [
                KeyFrame {
                    time: t
                    values: [
                        translateX => x tween Interpolator.LINEAR,
                        translateY => y tween Interpolator.LINEAR
                    ]
                }
            ]
        }
        transicao.play();
    }
}

def c = Circulando {
    radius: 20, translateX: 50, translateY: 50, fill: Color.ORANGE
}

var s : Scene;

Stage {
    scene: s = Scene {
        width: 250
        height: 180
        content : Group {
            content: [
                c,
                Rectangle {
                    fill: Color.TRANSPARENT
                    width: bind s.width
                    height: bind s.height
                    onMousePressed: function(e:MouseEvent) {
                        c.vai(e.x,e.y);
                    }
                }
            ]
        }
    }

}

Já brincou c/ JavaFX? Não, então baixe o Netbeans e veja as funcionalidades para desenvolvimento usando JavaFX. Experimente, use os exemplos desse post!


[]s
Eder Magalhães

Comentários

Postagens mais visitadas deste blog

10 reasons why we love JSF

1. One-slide technology: it's so simple that I can explain basic JSF with one slide. 2. Easy to extend: components, listeners, render kit, Events, Controller, etc. 3. Real-world adoption: JBoss, Exadel, Oracle, IBM, ... 4. Architecture model: you can choose between more than 100 different architecture. 5. Open-mind community: using JSF you are going to meet very interesting people. 6. We are using JSF the last 5 years and we found very good market for JSF in Brazil 7. Progress: look to JSf 1.1 to JSF 1.2, JSF 1.2 to JSF 2.0. People are working really hard! 8. Many professionals now available 9. It's a standard. It's JCP. Before complain, report and help! 10. Ed Burns, spec leader, is an old Globalcode community friend! EXTRA: My wife is specialist in JSF. She's my F1 for JSF :) Nice job JSF community! -Vinicius Senger

EJB 3: Uma evolução sob os conceitos do Hibernate e Spring

Definitivamente o modelo de componentização definido no Java EE 5 e 6 evoluiu e melhorou muito. Mas, sem dúvida muita dessa evolução se deve às pressões do Hibernate e Spring Framework. Estes dois últimos frameworks nasceram baseados no conceito de POJO, que nada mais é do que a concepção de um modelo de componentização baseado em classes Java sem as regras impostas pelo EJB (curioso, sem o EJB não existiria o Hibernate ou o Spring). A morte dos Entity Beans O Hibernate nasceu da idéia de promover um modelo de persistência mais simples que o proposto pelos EJBs do tipo Entity Beans definido na especificação EJB 2.x. Este foi o primeiro tipo de EJB a sofrer com a evasão de desenvolvedores com o surgimento deste framework e a conscientização sobre os problemas nos Entity Beans. A partir de um modelo baseado em JavaBeans e o uso do JDBC, o Hibernate usa a Reflection API para gerar os SQLs necessários para persistir o estado de beans em diversos banco de dados relacionais, além de defini...

O que é Lógica de programação?

Este é o segundo de uma série de posts voltados aos leitores do blog que estão dando início à carreira de desenvolvimento de software. O assunto de hoje é a lógica de programação. Para ler antes: Entendendo como funciona a programação de computadores: linguagens de programação, lógica, banco de dados A lógica de programação é um pré-requisito para quem quer se tornar um desenvolvedor de software, independente da linguagem de programação que se pretende utilizar. Mas o que é de fato a Lógica de Programação e como saber se eu tenho esse pré-requisito? A lógica de programação nada mais é do que a organização coerente das instruções do programa para que seu objetivo seja alcançado. Para criar essa organização, instruções simples do programa, como mudar o valor de uma variável ou desenhar uma imagem na tela do computador, são interconectadas a estruturas lógicas que guiam o fluxo da execução do programa. Isso é muito próximo ao que usamos em nosso cotidiano para realizar atividad...

JavaOne Brasil, dicas para submissão de palestras

Não quero parecer pretensiosa dando dicas para submissão de palestras para o JavaOne Brasil, mas sim repassar os tantos conselhos e sugestões recebidas pelos vetaranos do JavaOne: Bruno Souza e Leonardo Galvão que revisaram dezenas de submissões para o JavaOne e ajudaram a aprovar tantas palestras, e também misturar um pouco da minha experiência na seleção de palestras nos eventos realizados pela Globalcode e SouJava . 10 anos de JavaOne: http://www.globalcode.com.br/noticias/Globalcode10AnosNoJavaOne Os palestrantes ganham a entrada! A submissão pode ser feita em português! O passo mais importante para ser aprovado como palestrante no JavaOne é sem dúvida nenhuma submeter pelo menos uma palestra. Então, independente de qualquer coisa, participe, arrisque, divulgue.  Mas, se quiser aumentar as suas chances...   1) Leve a sério: peça para amigos fazerem uma leitura crítica do texto, e claro uma boa revisão ortográfica. 2) Submissão de várias palestras ou variações do ...

Parceria Globalcode no projeto Samsung Ocean

Já faz algum tempo que a Globalcode e a Samsung tem uma parceria no projeto "Samsung Ocean". Esse é um projeto muito interessante com o objetivo de divulgar e difundir o uso de tecnologia, principalmente associado a dispositivos móveis como celulares e relógios inteligentes (smart watches). No projeto são oferecidos diversos treinamentos e workshops gratuitos . Alguns dos treinamentos oferecidos são: Desenvolvimento de aplicações Android Desenvolvimento de aplicações para wearable Tópicos em desenvolvimento ágil Introdução aos jogos digitais Para a maioria dos cursos, o material e instrutores são fornecidos pela Globalcode. Atualmente nosso grupo de instrutores do projeto conta com excelentes profissionais como: Thiago Moreira Heider Lopes Luis Palma Taynã Bonaldo Thais Andrade O centro de treinamentos está localizado na Escola Politécnica da USP e atualmente estão abertas as inscrições para um dos programas mais bacanas do projeto. É o programa de pré-a...

NIO.2 do Java 7: uma nova API do Java para file system

Uma das novidades mais importantes e aguardadas do Java 7 foi a NIO.2, a nova API para a manipulação I/O com Java. A NIO.2, também conhecida como JSR 203 , disponibiliza um conjunto de novos componentes, projetados para melhorar caracterísiticas de I/O com Java como por exemplo: uma nova API para o acesso e manipulação de conteúdo do file system (sistema de arquivos); outra API para operações assíncronas com I/O; e a atualização da API para comunicação via sockets ( channel sockets ).   O Java, antes da versão 7, tratava a manipulação do sistema de arquivos de forma primitiva. O programador tinha de trabalhar com a classe File para representar arquivos e/ou diretórios, com um número escasso de funcionalidades. Uma operação simples como copiar um arquivo demandava um código relativamente grande. Outras funcionalidades triviais, como por exemplo o uso de links simbólicos, não eram suportadas. Esses são alguns dos motivos para justificar o uso de bibliotecas terceiras...