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

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

Saiba como programar para Arduino sem ter nenhum hardware disponível

O Arduino já é uma tecnologia muito difundida entre os amantes de tecnologia. É difícil encontrar um profissional da computação que não brincou um pouco com esta ferramenta de prototipagem ou, que gostaria de fazer isso. Porém, em alguns casos, o programador quer conhecer o arduino mas não dispõe de nenhum hardware, nem mesmo da placa. Como isso poderia ser resolvido? A primeira resposta seria aquela mais simples e direta: ir as compras. Isso pode ser feito em uma loja física ou pela internet. No meu caso, por exemplo, tive a felicidade de encontrar em um site (não me lembro qual) um kit arduino, com um conjunto de sensores e um DVD com 41 vídeo aulas. Mas digamos que o profissional não esteja passando por um bom momento financeiro, ou ainda, simplesmente não queira comprar o Arduino sem antes conhecê-lo um pouco melhor. Para a última situação também já existe uma resposta, e diga-se de passagem, uma excelente resposta. Trata-se do site 123D Circuits.io . Depois de criar seu u...

Facelets uma forma mais ágil para construção de telas – Parte I

A construção de telas ou camada de apresentação em um sistema MVC seja web ou desktop é uma tarefa complexa e de extrema importância. Nesse post vou comentar e mostrar algum exemplo do Facelets como solução para os desafios existentes nessa etapa especificamente para web. Com a web cada vez mais presente em nosso dia-a-dia, um fato é que com isso nossos usuários tornam-se mais exigentes em relação a usabilidade, agilidade, performance ou de uma forma bem resumida “o usuário espera uma navegação simples e agradável aonde uma determinado tarefa possa ser concluída em poucos passos e em um curto espaço de tempo”. Atender as expectativas em relação ao que o usuário espera com o que realmente ele precisa, definir uma estrutura flexível a mudanças sem engessar o desenvolvimento, acessibilidade, portabilidade em múltiplos navegadores, tudo isso e muito mais, num prazo que quase sempre é apertado. Um outro ponto fundamental é manter o time motivado e produtivo em um ambiente que favoreça a...

Devo fazer um curso ou ler um livro?

Acredito que todos os instrutores ou professores, independentemente da área, escola ou centro de treinamento, já devam ter recebido essa pergunta alguma vez na vida: devo fazer um curso ou ler um livro? Para responder a essa pergunta, precisamos avaliar os prós e contras de cada opção. Trabalho com treinamento há algum tempo e, hoje, recebi essa pergunta de um aluno. Não adianta responder a ou b sem argumentar, demonstrando as opções conforme a situação do aluno. O conteúdo, a forma de transmissão e a capacidade de assimilação do indivíduo são chaves para haver benefício maior de aprendizado. Tanto em um bom curso quanto em um bom livro, o conteúdo é a premissa básica . Por conteúdo entendemos: se está organizado; se respeita pré-requisitos; se promove o aprendizado guiado e incremental; se aborda de forma satisfatória os principais pontos; se tem bom balanço entre teoria, exemplos e prática (favorecendo exemplos e prática); se tem como premissa a acessibilidade possível (e cabível) pa...