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

2º Bate Papo do SP-GTUG - Divulgação

Pessoal, Para aqueles que já estiveram presentes nas atividades do SP-GTUG (encontros ou bate papos na Globalcode), e para os que ainda não puderam estar presentes, teremos um novo bate papo acerca de mais duas tecnologias do Google: AdSense e Python no GAE. Este será o nosso segundo bate papo do SP-GTUG, nos mesmos moldes dos minicursos da Globalcode . Local e data O bate papo acontecerá no dia 27/03/10, das 10:00 às 13:00 na Globalcode. Para fazer sua inscrição e participar acesse a home da Globalcode e vá até a parte de "Minicursos Gratuitos da Semana ". Conteúdo das apresentações Abaixo seguem as descrições passadas pelos palestrantes: Título: "Algoritmos em Python" Resumo: Python é uma linguagem considerada frugal, simples, sem ser simplória! Entenda como construir algoritmos ninjas com essa linguagem, adotada pela Google e pelo MIT. Veremos muito, muito código, desde algoritmos clássicos até tutoriais do

JSF 2 - Composite Components, você não precisa mais ser um ninja

Estamos em uma nova era da computação, os dados não estão mais localizados em um banco dentro de sua empresa, vivemos a explosão de redes sociais, informações são geradas a todo instante, e se torna essencial que sua aplicação conheça os serviços disponíveis na web e consumam suas APIs geralmente disponíveis por serviços REST. Legal, mas como ficam meus aplicativos Java EE neste novo cenário? Para quem vem acompanhando a evolução da plataforma, é notório que todo esforço vem sendo utilizado para aumentar a produtividade e a integração com novos serviços. Basicamente duas especificações surgem com muita força para atender este cenário, a JSR - 314 (JSF-2) e JSR - 311 (JAX-RS), neste post exploraremos a JSR-314 (JSF2) e sua nova forma de criar Composite Components. Uma das grandes queixas dos desenvolvedores JSF era a complexidade em criar composite components, era necessário um vasto conhecimento sobre o ciclo de vida de uma aplicação JSF. Agora, você não precisa ser mais um “ninja” em

Gosta de informática e sonha ser programador Java um dia ?

A Globalcode está procurando jovens que queiram ser programadores no futuro, para fazer parte de sua equipe de vendas e operacional na unidade Paraíso em São Paulo somente. O grande diferencial é o planejamento para carreira de programador. O planejamento de cursos do portifólio da Globalcode: Academia do Programador, Academia Java, Academia Web, Robótica, Eletrônica, etc, será realizado periodicamente de acordo com o desempenho e interesse individual. Atenção : Este não é um estágio para trabalhar com Java, são duas vagas CLT administrativas para pessoas que queiram ser programadores no futuro. Perfil : Conhecimentos de informática básica, saber lidar com pessoas e trabalhar em equipe. Deve ter concluído o ensino médio, ter boa escrita, ser organizado, responsável, comprometido e dinâmico. Interesse por computação, programação, internet, robótica, eletrônica,... Temos duas vagas para jovem-aprendiz abertas: 1) Setor operacional No dia a dia Serviços externos Controle de estoqu

Palestras do TDC Business Disponíveis Online

🚨 Atenção, TDC Lovers! O TDC Business em São Paulo acabou, mas os conteúdos mal começaram!  Não pô de aproveitar a STADIUM ao vivo? Não tem problema, porque trouxemos ela até você. Todas as palestras da STADIUM, palco principal do TDC, já estão no ar e liberadas para qualquer pessoa assistir. Essa Trilha incrível conta com palestras de Trilhas Premium e temas variados de forma GRATUITA para você poder maratonar de casa!  Aproveite para prestigiar seu evento de TI favorito com pipoca direto do seu sofá. 🎥 🍿 Gravação da STADIUM, 22 a 24 de Agosto de 2022, disponível aqui: https://www.globalcode.com.br/videos/tdc-2022-business/  Todas as demais trilhas do TDC Business serão publicadas gradualmente nas próximas semanas, fique atento aos nossos e-mails, você será notificado por lá quando sua Trilha estiver disponível. Acompanhe nossas redes sociais para não perder nada e ficar por dentro de todas as novidades do TDC!

TDC INNOVATION lança University Pass

Modalidade de ingresso tem como objetivo ajudar na capacitação dos universitários Uma pesquisa realizada em 2020 pela Associação Brasileira das Empresas de Tecnologia da Informação e Comunicação (Brasscom) diz que até o ano de 2024 o Brasil precisará de cerca de 420 mil profissionais na área de Tecnologia da Informação. Porém, por ano, a mesma pesquisa diz que o país forma apenas 46 mil profissionais capacitados no nicho. Pensando nisso, para ajudar na formação e capacitação desses jovens profissionais, o TDC INNOVATION, segunda edição do ano do The Developer's Conference, lança o University Pass, modalidade de ingresso que possibilita aceso digital gratuito a todas as palestras do evento, ou com 50% de desconto para quem preferir ir pessoalmente. Com o tema central “Desafios para a criação do futuro Digital”, o TDC INNOVATION ocorrerá entre 1 e 3 de junho, de forma híbrida: presencialmente no Centro de Convenções CentroSul, em Florianópolis, e com transmissão simultaneamente pela