Como fazer as animações de imagens

Post Reply
emersonxmajo
Posts: 1
Joined: Thu Sep 26, 2019 6:44 pm

Como fazer as animações de imagens

Post by emersonxmajo »

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
User avatar
ViniciusMoraes
Administrador
Posts: 36
Joined: Sat Oct 22, 2016 1:48 am
Contact:

Re: Como fazer as animações de imagens

Post by ViniciusMoraes »

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) Viewed 4904 times

-----------------------------------------------------------------------------------------------------------------------------
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) Viewed 4903 times

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) Viewed 4901 times

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) Viewed 4882 times

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) Viewed 4880 times

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) Viewed 4873 times

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) Viewed 4871 times

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) Viewed 4866 times

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) Viewed 4865 times

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.
Vinícius de Moraes
Vendas | Suporte Técnico Comercial

E-mail de contato: suporte@hitecnologia.com.br
Telefone: (19)2139-1700 - (Opção 2 - Suporte Técnico).
Post Reply