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

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

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

Alguma certificação Java nos seus planos em 2010 ?

A discussão sobre certificações é super polêmica, alguns acham muito importante, outros acham totalmente insignificante. Eu particularmente acho que é uma meta de aprendizado, que nos força a aprender bem detalhadamente uma tecnologia. É claro que é "burlável" quero dizer, todo mundo conhece alguém que é certificado e "não sabe nada". Mas, evidentemente quando você se prepara, estuda, vai aprender muitas coisas novas e solidificar ainda mais seu conhecimento. Eu sempre fui muito "orientada" por deadlines... estas metas nos obrigam a encaixar algumas horas de estudo nesta vida tão corrida. E o inicio do ano é muito bom para estas iniciativas, porque estamos um pouco mais descansados, com aquele espírito de inicio de ano. Imagine chegar em março e já ter cumprido uma das metas de final de ano, e estar com a certificação "tirada" ? Não acho que precisa ser um caçador de certificações, e tentar tirar todas as certificações possíveis, mas acho ...

JavaMail: Enviando mensagem HTML com anexos

Introdução Depois do post "JavaMail: Enviando e-mail com Java" , que apresentava como enviar um e-mail com Java, resolvi complementar a assunto apresentando como enviar uma mensagem formatada, em HTML , e também como realizar o envio de anexos. Bibliotecas Além da biblioteca JavaMail, veja mais no post anterior , é necessário incluir o JavaBeans Activation Framework (JAF), apenas se a versão utilizada for anterior ao JSE 6.0 , que já tem o JAF incluso. O JAF está disponível em http://www.oracle.com/technetwork/java/javase/downloads/index-135046.html , e neste download encontramos, alguns exemplos na pasta demo , documentação, incluindo javadocs, na pasta docs e a biblioteca activation.jar , que deve ser acrescentada no classpath da aplicação para versões anteriores ao JSE 6.0. Exemplo Primeiramente devemos realizar a configuração da javax.mail.Session e da javax.mail.internet.MimeMessage , estes passos podem ser vistos no post anterior . Agora vamos montar um...

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