Blog

Criando um relógio no estilo iOS usando o canvas

Parte 3: Adicionando movimento aos ponteiros

Nesta 3ª parte do tutorial sobre o canvas, vamos animar o relógio, sincronizando o tempo com o relógio do computador.

Agora a parte mais divertida do projeto é a animação do nosso relógio, uma parte simples se você entender bem as dicas que iremos passar.

Animar objetos inanimados demanda atualização constante de imagens, sempre imaginei assim. Vamos pegar o exemplo da imagem acima: nosso relógio posto lado a lado em diferentes segundos. Se você olhar rapidamente para cada um dos relógios por um instante e em seguida direcionar o olhar para o próximo relógio ate o último, perceberá que uma movimentação do ponteiro do segundo estará sendo executada. Isso é, na verdade, uma ilusão de ótica criada por nosso cérebro, que guarda por um instante tudo que visualizamos, fundindo com a imagem atual com a visão anterior.

Uma animação do canvas segue essa linha de pensamento: cada movimento da animação é um quadro. O movimento é gerado como num filme: a cena acontece pela sobreposição de várias imagens ao longo do tempo. Embora pareça necessário um processamento intenso para gerar cada uma das imagens dentro de um curto espaço de tempo, o canvas é otimizado para funcionar assim. Uma animação em canvas funciona criando uma sequência de quadros, desenhando constantemente numa determinada velocidade. Nosso cérebro não será capaz de captar as imagens individualmente e a animação parecerá natural. Observe que o canvas não permite animar em camadas, como seria possível em um gif animado ou numa animação em Flash. Então não podemos animar apenas os ponteiros. Somos obrigados a desenhar todo o relógio a cada segundo.

Não se engane em pensar que precisamos apenas desenhar e tudo já sai funcionando, rodando e animando. Você deve ter em mente que o canvas não possui um método próprio para animar o desenho, isso terá que ser desenvolvido por você. Neste post, iremos passar algumas dicas para seus projetos de animação em canvas.

Confira no diagrama abaixo como funcionará a lógica do nosso relógio:

Como você pode ver, nosso relógio começa seu funcionamento nos métodos MAIN_LOOP e LOAD, onde o primeiro se destina para todo o funcionamento da animação do relógio e o segundo método o LOAD, para abrir um carregando enquanto o canvas não é carregado corretamente. Uma boa prática é sempre mostrar algo para o usuário enquanto a aplicação não carrega.

O MAIN_LOOP é o método principal do nosso relógio, responsável por iterar todas as atividades do relógio enquanto ele estiver em execução. Uma vez executado, este método chama o método auxiliar "draw", outro procedimento importante em nosso relógio. Encarregado de desenhar nosso relógio constantemente, este método desenha o brackground, os ponteiros, cores e entre outros elementos do relógio infinitamente, em um curto espaço de tempo, que em tempo real, torna nossa animação viva.

O método setTimeCurrent, é executado apenas uma vez logo após o MAIN_LOOP estar ativo, pois este procedimento cuida de sincronizar o tempo exato que marca o relógio do computador com nosso relógio. Então esse serviço fica a cargo deste método.

Enfim, nosso relógio agora pode funcionar perfeitamente, e para a hora se atualizar automaticamente utilizamos o objeto DATE do Javascript que possui a hora exata do relógio do computador. Assim, obtemos a hora correta do sistema, sincronizando nosso relógio em canvas com o relógio do computador, sem preocupar com ajustes de tempo. O objeto DATE cuida dos cálculos de horas, minutos e segundos. Sobra para o desenvolvedor a tarefa de tratar as retornadas por este método. A ideia e o esquema aqui abordados estão disponibilizados no código fonte completo.

O ingrediente principal do relógio foi a lógica desenvolvida para desenhar constantemente o relógio no canvas. Esse procedimento não pesa no browser e nem causa travamentos. O que você precisará fazer é apenas se preocupar em esquematizar seu projeto utilizando esta tecnologia juntamente com uma linguagem de programação (Javascript). Este novo recurso do HTML5, abre um leque de possibilidades, é só você abrir a mente e deixar a sua criatividade fluir.

Continuando com o código, vamos às seguintes linhas:

Se você está lembrado da parte onde estávamos montando os ponteiros do relógio, deve se recordar de um dos parâmetros que fazia parte das informações para montar o ponteiro, ele é, o "clock.VARIAVEL" onde VARIAVEL pode ser hour, minutes ou seconds no nosso código. Essa informação é o primeiro parâmetro das funções drawHoursLine(), drawMinutosLine(), drawSecondLine() que recebem-o afim de atualizar corretamente o posicionamento dos ponteiros de acordo com a hora exata.

Melhor explicando, nas linhas 145 a 149 está o escopo da função, que garante o incremento correto da hora, atualizando-a sempre que o objeto DATE é instanciado automaticamente, atualizando em seguida a hora, minuto e segundo, do objeto clock, que contem as três variáveis já mencionados.

Com isso, nosso relógio será desenhado sempre com novas posições para o ponteiro, animando e simulando um relógio de verdade. Perceba, que com canvas é simples criar animações ricas e rápidas sem muito esforço e conhecimentos avançados de programação. Outro recurso foi adicionado no relógio, e você pode conferir no código fonte.

No próximo post, faremos o acabamento final do relógio. Até lá.

PARTE 1: INTRODUÇÃO AO CANVAS

PARTE 2: DESENHANDO OS ELEMENTOS DO RELÓGIO

PARTE 3: ADICIONANDO MOVIMENTO AOS PONTEIROS

PARTE 4: FINALIZANDO O PROJETO

Para ser informado sobre a publicação da continuação, siga-nos no Twitter