---
title: "Interação, ações e animação da Image"
version: snapshot-2026-10-06
engineGeneration: astra-current
language: C#
status: source-reviewed
runtimeVerified: false
platformEvidence: []
url: https://astraengine.com.br/pt-br/snapshot-2026-10-06/ui/interacao-e-animacao/
---

# Interação, ações e animação da Image

Use uma imagem clicável sem criar fundo obrigatório; configure ações, estados e duas poses.

## Caminho no editor

Image selecionada → **Interação** → **Clicável** → **Ao clicar** → escolha ação e alvo. Uma imagem decorativa do HUD não precisa de Clicável. Button/Toggle/Slider já têm entrada própria. Text, Panel e containers podem optar por clique.

| Campo / API | Efeito e uso |
|---|---|
| Clicável / Interaction.Clickable | Habilita emissão opcional de Click no elemento; padrão falso para Image. |
| Ao clicar / Action | Notificar, alternar visibilidade/habilitação, definir valor, iniciar ou parar animação. Notificar permite o script consumir Poll. |
| Alvo / Target | ID estável de outro elemento no mesmo documento; zero representa o próprio elemento. Não aceita objeto da cena ou outro Canvas como se fosse um ID local. |
| Valor / Value | Argumento de Definir valor; o destino precisa ser Toggle, Slider ou Progress. Não troca a textura de Image. |
| Ações adicionais / AddAction | Listeners ordenados depois da ação principal. O documento permite até 16 por elemento; Click ou ValueChanged precisam ser emitidos pelo tipo de origem. |

## Script: ler o clique uma vez

Em **Play**, use Gui.ForCanvas e consuma Poll. Filtre **GuiEventKind.Click**, depois compare ID/elemento ou o nome exato. O exemplo [HeartHud.cs](/examples/heart-hud/HeartHud.cs) faz isso. Poll retira a mensagem da fila: centralize o consumo desse Canvas em um Behavior e repasse a outros sistemas; dois scripts concorrendo pela mesma fila podem perder eventos entre si.

## Estados visuais

O grupo **Estados visuais** configura Normal, Pressionado e Desabilitado, tempo de transição e curva. Cada estado combina deslocamento XY, escala uniforme, opacidade e tinta. Padrão da configuração: desativada, 0,12 s, curva Smooth; pose pressionada 0,94 de escala e desabilitada 0,45 de alpha. A tinta multiplica a imagem, não cria fundo obrigatório.

## Animação de duas poses

| Campo / API | Efeito e uso |
|---|---|
| Ativar / Animation.Enabled | Habilita a transição autorada; padrão falso. |
| De / Para / From / To | Cada pose tem Position XY (pixels), Scale uniforme e Opacity. Padrão (0,0), 1, 1. |
| Duração / Duration | Tempo da passagem; padrão 0,3 s. Não é a taxa de quadros. |
| Atraso / Delay | Espera inicial; padrão zero. Loop não reaplica esse atraso a cada ciclo. |
| Curva / Easing | Linear, Smooth, EaseIn ou EaseOut. |
| Autoplay / AutoPlay | Inicia no runtime sem chamada PlayAnimation. |
| Repetir / Loop | Repete a transição; não existe timeline de múltiplos keyframes aqui. |
| Ida e volta / PingPong | Executa a ida e depois a volta; pode combinar com loop. |
| PlayAnimation / StopAnimation | Tocar reinicia; parar restaura a pose autoral. Conclusão sem loop mantém a pose final. |

Filhos herdam a transformação, alpha e clipping; o hit acompanha a pose. Opacidade efetiva zero rejeita novas capturas. Interagir usa o tempo real do editor; Play acompanha relógio/pausa do mundo. O Inspector tem prévia, mas Interagir não executa scripts C#.

## Roadmap desta função

Ações ordenadas e estados básicos estão presentes na revisão atual. O relatório de Image de 03/10 tratava uma revisão anterior; não use sua limitação de uma ação como limite atual. Timeline/keyframes, rotação/escala por eixo, sprite animation, callbacks de conclusão, pause/resume dedicado e reduced motion completo seguem pendentes no [R10](/pt-br/snapshot-2026-10-06/ui/roadmap/#r10-animação). Hit mask e foco/acessibilidade têm trabalho próprio.