# Toque e feedback

> Animação de pressão automática via pressable() e controle manual de alpha do componente.

Source: https://crossfly.dev/pt/docs/ui/animations/press-and-feedback — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# Toque e feedback

A resposta visual ao toque (o "afundar" de um botão) é **automática** no CrossFly quando o estilo é
marcado como pressionável — você não escreve animação nenhuma.

## Exemplo completo (copiar, colar e rodar)
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;   // ComponentStyle

/** Tela principal executável. Aponte o launcher (classname) e rode: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // Feedback automático de pressão: estilo custom com .pressable()
      Button botao = new Button("Enviar");
      botao.style(new ComponentStyle().backColor(0xFF0173ED).pressable());
      add(LAY_AUTO, botao);

      // Controle manual de opacidade para representar estado (selecionado/desabilitado)
      Label item = new Label("Item");
      add(LAY_AUTO, item);
      boolean selecionado = false;
      item.alpha(selecionado ? 1f : 0.5f);
      Component.repaint();

      // Alterna o estado com feedback: ao tocar, realça o item de volta a opaco
      botao.onAction(c -> { item.alpha(1f); Component.repaint(); });
   }
}
```
> Os trechos abaixo mostram **só o miolo** (o que vai dentro de `onShow()`). Para rodar, coloque-os no esqueleto `MainWindow` acima.

## Feedback automático de pressão — `pressable()`
Marque o estilo como `pressable()` e o componente anima sozinho ao ser tocado (usando a
`animationDuration` do tema):
```java
Button b = new Button("Enviar");
b.style(Styles.button());   // o estilo de botão do Skin já vem .pressable()

// num estilo custom, habilite explicitamente:
b.style(new ComponentStyle().backColor(0xFF0173ED).pressable());
```
O `Skin` gera o estado `pressed` a partir do normal (por padrão, fundo mais escuro). Para customizar,
defina um `pressedStyle(...)` (ver [Estilizar componentes](/docs/ui/theming/styling-components)).

## Duração do feedback
Vem de `Styles.animationDuration` (padrão `0.3s`) e é lida pelos estilos do `Skin`. Ajuste global:
```java
Styles.animationDuration = 0.2f;   // toque mais "seco" em todo o app
```

## Controle manual de opacidade — `alpha(...)`
Para esmaecer/realçar um componente por conta própria (ex.: desabilitar visualmente, destacar
seleção), use `alpha(float)` (0 = transparente, 1 = opaco):
```java
item.alpha(selecionado ? 1f : 0.5f);
Component.repaint();
```
Para transição **suave** de opacidade, combine com [`AlphaAnimation`](/docs/ui/animations/value-animations):
```java
AlphaAnimation fade = new AlphaAnimation(item.alpha(), 1f, 0.2f);
fade.onUpdate(() -> { item.alpha(fade.getValue()); Component.repaint(); }).start();
```

## Boas práticas
- Deixe o `pressable()` cuidar do feedback de toque — não anime pressão na mão.
- Use `alpha()` para estado (desabilitado/selecionado); anime só quando a transição agregar.
- Um componente **desabilitado** já esmaece pelo `disabledAlpha` do estilo — não duplique.

## Erros comuns
- Estilo custom sem `pressable()` → botão sem feedback ao toque.
- Setar `alpha(...)` e esquecer `Component.repaint()` (render sob demanda).

## Veja também
- [Animações de valor](/docs/ui/animations/value-animations) · [Estilizar componentes](/docs/ui/theming/styling-components)