Contagem regressiva com uso de imagens - [RESOLVIDO]
Olá.
Já procurei bastante, mas ainda não achei um código que possa me adiantar ou dar ideia de como fazer um relógio digital numa contagem regressiva.
Encontrei uns arquivos GIF que possam ajudar a explicar o desafio:
/applications/core/interface/imageproxy/imageproxy.php?img=https://media.giphy.com/media/Fky8gl3Vzlc0E/giphy.gif&key=e875ee649e4c7ae53c9b77354b82983e204f4fb41b47806b603f9d0654c70a0d" />
Eu já tenho o código que faz a contagem regressiva a partir de uma data dada pelo usuário.
O que eu teria que fazer agora é associar cada dígito da contagem a uma imagem separada.
Tentei ajustar imagens GIFs que se adaptassem ao tempo real, mas sempre ocorre um pequeno erro nas frações de segundo que se acumulam e levam a dar uma grande diferença num intervalo de tempo maior.
Portanto, pretendo criar uma forma de associar cada dígito de cada resultado a uma imagem diferente e fazer a ilusão do movimento de passagem da placa do exemplo acima.
Quando o meu resultado dá 300 minutos, eu teria que "quebrar" o 300 em "3", "0" e "0".
Depois, eu teria que associar o "3" a uma imagem que exiba o número 3. E assim por diante.
A animação eu mesmo faria. Já separei as imagens de cada um dos dígitos do exemplo acima em arquivos diferentes.
Encontrei uma pequena dificuldade porque a passagem de contagem regressiva é DIFERENTE da passagem de tempo crescente.
A passagem da imagem 2 para a imagem 1 é diferente do seu inverso.
A imagem 3 para a 2 também é e assim por diante.
Por isso, não pude aproveitar as imagens separadas do exemplo dado acima.
Tive que criar transições do 2 para o 1 no Photoshop.
Mas esse não é o problema. Isso eu já tenho.
O problema, e é esse o motivo desse tópico, é associar cada número da contagem em imagens diferentes.
Para fazer a animação das transições, vou usar um componente TTimer.
Portanto, o que apresento aos colegas é o desafio de fazer a associação entre número e arquivo de imagem.
No exemplo que eu dei, vou ter que pegar a centena 3 e associar à imagem "3".
Mas como saber que é uma centena?
Eu pensei em testar se o resultado atual é maior do que 100.
Código:
If resultado > 100 then begin
If resultado - 100 = 1 then image1.Picture.LoadFromFile('arquivo1');
If resultado - 100 = 2 then image1.Picture.LoadFromFile('arquivo2');
...
If resultado - 100 = 9 then image1.Picture.LoadFromFile('arquivo9');
...If resultado > 1000 then begin
If resultado - 1000 = 1 then image1.Picture.LoadFromFile('arquivo1');
Mas aí eu começo a me embaralhar.
E como fazer com as dezenas dentro das centenas?
Tem que fazer um tratamento meio matemático para testar unidade, dezena, centena, milhar, etc...
Alguém poderia dar uma mãozinha aqui?
Eu trago aqui a forma como já está funcionando o programinha:
/applications/core/interface/imageproxy/imageproxy.php?img=https://s20.postimg.org/r2l161o0d/Cont_Reg.png&key=13ccfa7c905e7fafb5592e5d2ab36cfd2eda8d0c5cf5ef3099ef6289d5df19fc" />
Esses números todos teriam que passar para placas que rolam no estilo da imagem GIF lá no começo do tópico.
Os segundos mudam a cada instante, claro, e isso é bem visível.
As placas teriam que rolar em números decrescentes.
A parte gráfica, eu acho que já sei como fazer, animação e tudo.
O tamanho do formulário teria que ser aumentado, claro.
O nó agora é o código para ligar cada número a um arquivo de imagem diferente.
Não entendo muito da coisa, mas seria o caso de usar um ImageList?
A bola está com vocês agora.
.
Discussão (20)
Carregando comentários...