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

Entendendo como funciona a programação de computadores: linguagens de programação, lógica, banco de dados

Nesse post, diferente dos últimos que foram mais enfáticos nas experiências com tecnologias, vou focar um pouco mais nos profissionais que estão começando, ou pretendem ingressar na área de desenvolvimento de software, falando sobre conceitos fundamentais relacionados a programação em geral . Mercado de trabalho para programação Conforme já sabemos, o mercado de desenvolvimento de software, especialmente no Brasil, continua em franca expansão, sendo que cada vez mais as empresas buscam desenvolver seus próprios sistemas usando as mais diferentes e novas tecnologias. Algumas matérias interessantes: As seis profissões mais valorizadas em 2010 no IDG Now! Muitas vagas e sensação de reaquecimento da economia Por isso, a área de desenvolvimento de software tem despertado interesse em muitos profissionais de outras áreas que desejam mudar de profissão, já que as oportunidades de trabalho tendem a ser maiores. Esse é um perfil presente em muitos dos clientes da Globalcode que acabou m...

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...

TDC BUSINESS, chega a São Paulo com novas trilhas de Inteligência Artificial e Inovação

Maior conferência de profissionais de tecnologia do Brasil abordará temas em alta no momento como, por exemplo, Inteligência Artificial, Segurança, Ciência de Dados e Inovação O TDC BUSINESS, a 17° edição do The Developer's Conference na cidade de São Paulo, que acontece entre os dias 19 e 21 de Setembro, reunirá profissionais e especialistas da área para troca de experiência, compartilhamento de conteúdos e networking. Com o tema central: “Tecnologia para negócios transformadores”, o evento será totalmente híbrido, ocorrendo presencialmente no espaço Pro Magno, e com transmissão simultânea e atividades de network pela internet. A expectativa é reunir mais de 14.000 pessoas, somando a participação presencial e online.   Segundo Yara Mascarenhas, Fundadora e Host do Evento, “nosso objetivo com o TDC é inspirar a colaboração entre os profissionais e empresas para construir uma nova realidade para o mercado de TI.  Vamos juntar tecnologia e negócios com as trilhas técnicas...

Dica rápida: Apagando registros duplicados no MySQL

Ola pessoal, Sei que vocês estão acostumados a ver posts meus sobre tecnologia móvel ou algo relacionado, mas hoje vou falar sobre um pequeno "truque" que usei esse final de semana com o MySQL. Eu estava desenvolvendo o lado servidor de uma nova aplicação mobile (ahh, então "tem a ver" com mobile hehe), e quando fui fazer alguns testes percebi que tinha quase 7 mil registros duplicados (!!!) na minha base de dados! Bom, o meu primeiro reflexo como programador foi pensar em fazer um "programinha" Java para buscar e deletar todos esses registros duplicados. Mas ai, resolvi tirar as teias de aranha dos neurônios e usar os vários anos de experiência que passei com SQL e criar uma query que fizesse esse trabalho todo de uma vez!! E a query ficou assim: delete from TABLE_NAME USING  TABLE_NAME, TABLE_NAME  AS  auxtable WHERE   ( NOT  TABLE_NAME.id  =  auxtable.id ) AND   ( TABLE_NAME.name  =  auxtable.name ) Explicação di...

Seja palestrante no TDC!

Os interessados em palestrar na maior plataforma de Inovação Aberta para desenvolvimento do ecossistema de teologia, tem até 25 de setembro para se inscrever A última edição do ano do TDC (The Developer's Conference), maior conferência para profissionais de tecnologia do Brasil, já tem data confirmada. O TDC Future, que acontece nos dias 6 a 8 de dezembro, em formato híbrido, ocorrerá presencialmente na UniRitter de Porto Alegre, e com transmissão simultânea pela plataforma Hopin. O evento traz como tema central: “O papel da tecnologia na construção do amanhã”, e reúne gestores, especialistas e profissionais da área para debater sobre o futuro da tecnologia, o impacto na vida das pessoas e seu papel na transformação da sociedade. A seleção de palestras nacionais e internacionais, ainda está com o Call4Papers aberto até 25 de setembro, os interessados em participar poderão submeter uma proposta por meio do site do evento . O tema deve estar vinculado a uma trilha específica, que é...

Fazer networking em eventos pode transformar a sua carreira! Saiba como

O networking em eventos é vital ao desenvolvimento da sua carreira para construir relacionamentos de longo prazo, bem como uma boa reputação no mercado . Construir uma forte rede de contatos pode te ajudar a se tornar um nome conhecido no mercado, que influencia e causa impacto na sua área de interesse. Além disso, o networking colabora para: aprendizado contínuo; relacionamentos profissionais duradouros; troca de conhecimento com pessoas renomadas no mercado. O bom networking em eventos tem base de confiança e apoio — e pode significar a diferença entre uma carreira comum e fenomenal. Uma maneira de potencializar o networking, é pelo aprendizado continuado , que permite se especializar na área de atuação e expandir o leque de oportunidades. Neste artigo, reunimos algumas dicas para você saber como tirar o melhor proveito de eventos e fortalecer sua carreira. Aproveite a leitura! O que é networking? Networking é sobre construir relacionamentos profissionais de longo prazo, que sejam...