Como fazer as animações de imagens

emersonxmajo
Mensagens: 1
Registrado em: Qui Set 26, 2019 6:44 pm

Como fazer as animações de imagens

Mensagem por emersonxmajo » Sex Set 27, 2019 10:30 am

eu queria saber como eu posso fazer a animação de imagens, eu dei uma olhada no PDF, segui o passo a passo, porém quando coloquei pra executar no viwer s aparecia a imagem parada, eu adicionei um banco de imagem, com 8 fotos, uma diferente da outra só um pouco pra dar a sensação de que a imagem ta se mexendo, enfim e na hora que adiciono as imagens elas não aparecem na tela, só aparece quando eu executo a programação, ai nem dá de arrastar pra montar no lugar certo cada componente

Avatar do usuário
ViniciusMoraes
Moderadores
Mensagens: 8
Registrado em: Sáb Out 22, 2016 1:48 am

Re: Como fazer as animações de imagens

Mensagem por ViniciusMoraes » Seg Set 30, 2019 5:03 pm

Prezado Emerson,

Sobre a sua dúvida, de como utilizar o objeto ImageList para criar animações em sua aplicação, vou detalhar 2 exemplos de utilização para auxilia-lo no seu desenvolvimento.

Para estes 2 exemplos, foi desenvolvida uma tela bem simples(conforme imagem abaixo) apenas realizar as configurações e procedimentos para ImageList.
ImageList1.png
ImageList1.png (5.56 KiB) Exibido 114 vezes

-----------------------------------------------------------------------------------------------------------------------------
Exemplo 1
O objetivo deste exemplo 1, é utilizar o objeto ImageList, onde iremos alterar a imagem de acordo com o valor de um respectivo Tag Local.
No caso, Quando clicamos no botão "Inverte valor do Motor" as imagens irão alternar entre: Motores Verde(TRUE) e Vermelho(FALSE).

1.1. Configuração do Tag Local que está associado ao Botão "Inverte valor do Motor".

ImageList2.png
ImageList2.png (32.43 KiB) Exibido 113 vezes

1.2. Criar um objeto Botão e em seguida, associar um evento a este Botão.

- O tipo de evento no ObjAction_001 deve ser OnClick
- Categoria de ações como Tags
- Ação como Inverte valor de Tag
- Nome Tag, informar o caminho do respectivo Tag (Neste caso Kernel.Tags.Local.TagLocalGroup_001.TagLocal_Motor).
- Valor 1 = -1(TRUE)
- Valor 2 = 0(FALSE)

ImageList3.png
ImageList3.png (74.28 KiB) Exibido 111 vezes

1.3. Criar um objeto ImageList e adicionar os itens Image

- Em ImageList devemos associar um Tag (Neste caso Kernel.Tags.Local.TagLocalGroup_001.TagLocal_Motor)
. - Em Image_001 associar o arquivo de imagem e o valor(neste exemplo foi associado o valor -1 para "chamar" o motor verde).
. - Em Image_002 associar o arquivo de imagem e o valor(neste exemplo foi associado o valor 0 para chamar o motor vermelho).

ImageList5.png
ImageList5.png (66.43 KiB) Exibido 92 vezes

1.4. Testando...

- Ativar a aplicação "Kernel e Viewer" em modo depuração.
Sempre que realizado um click no botão "Inverte valor do motor" as imagens irão se alterar. Ou seja o motor ficará alternando entre as cores verde e vermelho.

ImageList6.png
ImageList6.png (3.62 KiB) Exibido 90 vezes

Fim do Exemplo 1
-----------------------------------------------------------------------------------------------------------------------------
Exemplo 2

O objetivo deste exemplo é detalhar o procedimento para criar uma animação utilizando um conjunto de imagens, através do recurso de ImageList

2.1. Configuração do Tag Local que está associado ao Botão "Inicia Animação".

ImageList7.png
ImageList7.png (33.58 KiB) Exibido 83 vezes

2.2. Criar um objeto Botão e em seguida, associar um evento a este Botão.

- O tipo de evento no ObjAction_001 deve ser OnClick
- Categoria de ações como Tags
- Ação como Inverte valor de Tag
- Nome Tag, informar o caminho do respectivo Tag (Neste caso Kernel.Tags.Local.TagLocalGroup_001.TagLocal_Animacao).
- Valor 1 = -1(TRUE)
- Valor 2 = 0(FALSE)

ImageList8.png
ImageList8.png (64.48 KiB) Exibido 81 vezes

2.3. Criar um objeto ImageList e adicionar os itens Image (Neste caso, a animação será composta por 8 imagens).

- Em ImageList devemos associar um Tag (Neste caso Kernel.Tags.Local.TagLocalGroup_001.TagLocal_Animacao)
. - Em Image_001, selecionamos a 1º imagem da animação (No caso deste exemplo, o arquivo é movimento_mistura_1.bmp).
. - Em Image_002, selecionamos a 2º imagem da animação (No caso deste exemplo, o arquivo é movimento_mistura_2.bmp).
. - E assim por diante ...
. - Em Image_008, selecionamos a 8º imagem da animação (No caso deste exemplo, o arquivo é movimento_mistura_8.bmp)

ImageList9.png
ImageList9.png (65.34 KiB) Exibido 76 vezes

2.4 Testando...

- Ativar a aplicação "Kernel e Viewer" em modo depuração.
Ao clicar no botão "Inicia Animação" será iniciado a animação. As imagens ficarão se alterando de acordo com o tempo definido no objeto ImageList (Neste caso 100ms).

ImageList10.png
ImageList10.png (9.69 KiB) Exibido 75 vezes

Fim do Exemplo 2
-----------------------------------------------------------------------------------------------------------------------------

Aqui está um link para acessar um vídeo que foi realizado capturando a tela do PC, rodando esta aplicação desenvolvida:
. https://www.loom.com/share/a7b78419de35 ... e9bf6b6871

Recomendo baixar o Kit do material de treinamento do supervisório HIscada Pro, o qual contém estas e outras informações valiosas sobre o HIscada Pro:
. https://www.hitecnologia.com.br/materiais-educativos/



Em caso de dúvidas, permanecemos à disposição.

Email de contato: suporte@hitecnologia.com.br
Telefone: (19) 2139-1700 - Opção 2 (Suporte técnico)

Vinícius Moraes.

Responder