# Animação e a linha do tempo

Adicione e temporize quadros, reproduza-os, marque loops com tags, trabalhe com cels, faça tween entre keyframes e veja os quadros vizinhos com a casca de cebola.

_Os atalhos estão escritos para Windows e Linux. No Mac, use ⌘ Cmd onde está Ctrl e ⌥ Option no lugar de Alt._

Uma animação é um sprite com mais de um **quadro**. A **linha do tempo** os mostra como colunas,
com as camadas como linhas; cada quadrado em que uma camada encontra um quadro é um **cel**
([Como seu trabalho é organizado](https://pxstud.io/pt-br/docs/manual/concepts/how-work-is-organized.md)).

![A linha do tempo com uma tag verde 'bounce' sobre os quadros 1 a 4, cada um com 120 ms; uma camada Slime com o slime em alturas diferentes, uma camada Shading com uma sombra apenas no quadro 1 e pontos vazios nos demais, e uma camada Background cujos cels estão vinculados nos quatro quadros](https://pxstud.io/manual/images/guides/animation-timeline.light.webp)

_Uma animação de quatro quadros com uma tag_

## A linha do tempo

Ao longo do topo da linha do tempo:

| Controle | O que faz |
| - | - |
| Primeiro, Anterior, Reproduzir/Pausar, Próximo, Último | Percorrem os quadros (`Home`, `←`, `Enter`, `→`, `End`; as setas movem os pixels selecionados enquanto houver uma seleção). Anterior e Próximo dão a volta do último quadro ao primeiro e vice-versa, como no Aseprite. `,` e `.` percorrem os quadros dentro da tag do quadro atual, voltando do fim ao início, para folhear uma animação. |
| Loop | Se a reprodução recomeça ao chegar ao fim. |
| Velocidade | Reproduz de 0,25× a 4× sem mudar o tempo dos quadros. |
| Modo de reprodução | Como as tags são reproduzidas (abaixo). |
| **+ Camada**, imagem de referência, excluir | Adiciona uma camada (`Shift+N`), adiciona uma camada de referência a partir de um arquivo, exclui a camada ativa. |
| **+ Quadro**, duplicar, excluir | Adiciona um quadro vazio depois do atual (`Ctrl+Shift+F`), o duplica (`Alt+N`), o exclui (`Ctrl+Alt+Shift+F`). |
| **Tag** | Cria uma tag sobre os quadros selecionados. |

Cada **coluna de quadro** tem o número do quadro e, abaixo dele, quanto tempo ele aparece em milissegundos:
clique na caixa do número para digitar uma nova duração. As **linhas de camada** descem pela esquerda, com a camada de cima
primeiro.

Na grade, um cel com algo nele mostra um **ponto cheio**, e um **cel vazio** mostra um
**ponto oco**. Uma linha une os **cels vinculados**, os cels que compartilham uma imagem. Aponte para um cel para ver
qual camada e qual quadro ele é, e ao que está vinculado.

## Quadros

O menu **Quadro**, e clicar com o botão direito em um número de quadro, trazem tudo para quadros:

- Quadro > Novo quadro vazio adiciona um quadro vazio depois do atual.
- Quadro > Novo quadro vazio antes adiciona um quadro vazio logo antes do atual. É assim que você coloca um
  quadro antes do quadro 1.
- Quadro > Novo quadro copia o quadro atual (ou os quadros selecionados) e seus cels. Em uma
  [camada contínua](https://pxstud.io/pt-br/docs/manual/guides/layers.md#showing-hiding-and-locking), o cel da cópia fica vinculado.
- Quadro > Novo quadro vinculado o copia com seus cels **vinculados**, de modo que as cópias compartilham as imagens
  com os originais: desenhe em um e os dois mudam.
- Quadro > Excluir quadro exclui o quadro atual ou os selecionados (um sprite mantém pelo menos um).
- Quadro > Inverter quadros inverte os quadros selecionados, ou todos eles se menos de dois estiverem
  selecionados.

**Tempo.** Cada quadro tem sua própria duração, de 10 ms a 65.535 ms (cerca de 65 segundos, como no Aseprite). Digite-a na caixa abaixo do
número do quadro, ou use Quadro > Propriedades do quadro.... Quadro > Definir todos os quadros com a duração atual... dá a todos os quadros
a duração do atual.

**Cor e bloqueio.** Quadro > Propriedades do quadro... também dá a um quadro um **rótulo de cor**, mostrado como uma faixa
no cabeçalho dele para você identificar poses-chave ou quadros que precisam de trabalho, e um **bloqueio**. Um quadro bloqueado
(marcado com um cadeado) recusa edições nos seus cels, e não pode ser removido, movido nem ter o tempo alterado, seja por ferramentas
ou por scripts. Desbloqueie-o na mesma caixa de diálogo. Os dois são salvos com o sprite e sincronizados, mas
o `.aseprite` não tem equivalente, então são descartados ao exportar para ele. Scripts usam
`app.setFrameProps`.

**Reordenar.** Arraste um quadro pela alça que aparece ao lado do número, ou selecione-o e pressione
`Alt` com `←` ou `→`. Vários quadros selecionados se movem juntos: arraste qualquer um deles e
toda a seleção se move como um bloco, e quadros que não são vizinhos são reunidos em
uma sequência na ordem em que estão na linha do tempo. Segure `Alt` ao soltar para **copiar** os quadros selecionados
ali em vez de movê-los; as cópias são inseridas no ponto onde você soltou e viram a seleção. Das duas formas é
um passo de desfazer. (Pare a reprodução antes.)

As tags acompanham os quadros por posição, como no Aseprite: quadros arrastados para fora de uma tag saem dela, e uma
cópia solta logo depois do último quadro de uma tag entra na tag, como qualquer novo quadro adicionado ali.

## Reprodução

Pressione `Enter` para reproduzir e pausar. Cada quadro aparece pela sua própria duração, escalada pela
configuração de velocidade; a reprodução segue o relógio, pulando um quadro se o computador ficar para trás.
Editar qualquer coisa, ou começar a desenhar, interrompe a reprodução, como no Aseprite. O **modo de reprodução**
decide como as tags são reproduzidas:

| Modo | Reproduz |
| - | - |
| **Tags** (Reproduzir tags e repetições) | Todos os quadros em ordem. Cada tag é reproduzida na sua própria direção e quantas vezes sua contagem de repetição indicar, inclusive tags dentro de tags, antes de a reprodução seguir adiante. |
| **Todos os quadros** | Todos os quadros em ordem, ignorando as tags. |
| **Uma vez** | Como Tags do primeiro ao último quadro, depois para e volta ao quadro em que você começou. Com uma tag escolhida (abaixo), essa tag uma vez: uma tag ping-pong vai e volta. |
| **Subtags** | Como Tags, mas quando o cursor de reprodução está em uma tag com repetição 0, essa tag fica em loop (com as tags dentro dela). |

A **repetição** de uma tag conta cada passagem, e cada sentido de um ping-pong é uma passagem: uma tag ping-pong
com repetição 2 reproduz 1, 2, 3, 2, 1. Uma repetição 0 reproduz uma tag uma vez na passagem (um
ping-pong de ida e volta) e a repete em loop quando ela é a tag em reprodução. As tags são reproduzidas da mesma forma nas
exportações, como no Aseprite.

Para reproduzir **apenas uma tag**, clique na faixa dela acima dos quadros (clique de novo para voltar à animação
inteira). Ela fica em loop, com as tags dentro dela sendo reproduzidas do seu jeito. Com o **Loop** desativado, ela reproduz
sua contagem de repetição e para; o mesmo vale para a animação inteira no último quadro.

O painel Prévia reproduz na mesma velocidade, então você pode ver a animação enquanto desenha. O botão **1:1** dele mostra o sprite em tamanho real, um pixel do sprite por pixel de tela.

## Tags

Uma **tag** dá nome a um intervalo de quadros ("idle", "walk") para você reproduzi-lo sozinho e exportá-lo
sozinho. Selecione os quadros e clique no botão **Tag**, ou escolha Quadro > Nova tag.... A
caixa de diálogo tem:

- **Nome** e **Cor**;
- **Do quadro** e **Até o quadro**;
- **Direção**: Para frente, Reverso, Ping-pong ou Ping-pong reverso;
- **Repetir**: quantas vezes ela é reproduzida antes de a reprodução continuar; 0 a repete para sempre.

Arraste a faixa de uma tag para movê-la, ou as pontas dela para mudar seus quadros. Pelo teclado, use Tab até a
faixa e pressione `Alt+Left` ou `Alt+Right` para movê-la um quadro, ou use Tab até uma das pontas e
pressione `Left` ou `Right`. Dê um clique duplo na faixa, ou use o lápis que
aparece quando você aponta para ela, para editar a tag; clique com o botão direito para excluí-la. Como no Aseprite, uma tag
cobre posições de quadro: um quadro que você tira de uma tag sai dela, um que você solta entre dois dos seus
quadros entra nela, e um novo quadro adicionado logo depois do último quadro de uma tag estende a tag. Um novo
quadro adicionado antes do primeiro quadro de uma tag não faz parte dela: a tag continua nos seus quadros e
se desloca junto com eles.

## Cels

Clique em um cel para selecioná-lo. Então:

- **Shift+clique** seleciona um intervalo, **`Ctrl`+clique** adiciona ou remove um cel, e **arrastar**
  a partir de um cel não selecionado seleciona um retângulo;
- clicar em um número de quadro ou no nome de uma camada seleciona toda aquela coluna ou linha;
- `Shift` com as setas amplia a seleção, e `Esc` a limpa;
- em uma tela sensível ao toque, mantenha pressionado por meio segundo e depois arraste.

Com cels selecionados e a linha do tempo em foco, os atalhos de sempre funcionam em cels inteiros:
`Ctrl+X`, `Ctrl+C` e `Ctrl+V` recortam, copiam e colam, e `Del` os limpa.
Os mesmos comandos estão em **Editar > Cel** e no menu de clique com o botão direito:

- Editar > Cel > Vincular cels faz os cels selecionados em cada camada compartilharem uma imagem; Editar > Cel > Desvincular cels
  dá a cada um sua própria cópia de novo (desvincular o cel ao qual os outros estavam vinculados deixa os outros
  vinculados entre si).
- **Arraste** cels selecionados para movê-los, ou segure `Alt` ao arrastar para copiá-los. O contorno
  fica verde onde eles podem ir e vermelho onde não podem. `Alt+Shift` com uma seta os desloca
  um passo.

Para pintar em vários cels ao mesmo tempo, por exemplo para corrigir o mesmo contorno em todos os quadros, ative
**Pintar em várias cels** na barra de opções da ferramenta e selecione os cels. Pintar em um deles pinta
todos como um passo de desfazer; selecionar números de quadro ou nomes de camada também funciona. Camadas bloqueadas e ocultas
são ignoradas, e cels vinculados são pintados uma vez. Veja [Ferramentas](https://pxstud.io/pt-br/docs/manual/reference/tools.md#how-tools-behave).

Cels só vão para onde significam a mesma coisa: pixels para camadas de imagem, tiles para uma camada de tilemap
com o mesmo tileset. Camadas bloqueadas e ocultas são ignoradas.

As **Propriedades do cel** (clique com o botão direito em um cel) definem sua **Opacidade**, que se combina com a da camada,
seu **Z-index**, que o desenha essa quantidade de camadas mais alto ou mais baixo apenas naquele quadro (contando
todas as camadas e grupos, como o Aseprite faz; ele pode sair de um grupo simples, mas não de um grupo com opacidade ou
modo de mesclagem próprios),
e seus dados do usuário. Cels vinculados compartilham uma opacidade e um conjunto de dados do usuário (como no Aseprite); o z-index
é próprio de cada cel. Os cels da camada Plano de fundo são sempre totalmente
opacos, e a opacidade do cel de uma camada bloqueada não pode ser alterada.

## Tween

Um **tween** desenha por você os quadros entre dois keyframes: ele move, escala, gira ou esmaece a
imagem do keyframe inicial a caminho do keyframe final, e desenha cada quadro intermediário como um cel
comum. O keyframe final mantém o seu próprio desenho. Como os intermediários são pixels comuns,
exportações, casca de cebola e scripts veem quadros comuns, e o Aseprite também quando você salva como
`.aseprite` (as configurações do tween vão junto nos dados do usuário dos cels, então o pxstud.io retoma o tween
quando você abre o arquivo). Tweens funcionam em camadas de imagem, não no Plano de fundo.

### O inspetor de Tween

Desenhe os keyframes inicial e final na mesma camada, selecione o keyframe inicial e escolha
Editar > Cel > Criar tween... (`Shift+T`, ou clique com o botão direito no cel). O inspetor faz o tween dele até o próximo cel
da camada com um desenho, ou, se você selecionou vários quadros, até o último selecionado com
um desenho. Aberto no keyframe inicial de um tween ou em um de seus intermediários, ele edita esse tween.
Se não há nenhum desenho depois na camada, uma seleção de vários quadros termina no último quadro
selecionado mesmo que esteja vazio (para sumir ou encolher algo).

O inspetor é uma janela que você pode arrastar pela barra de título e deixar aberta: você ainda pode percorrer a
linha do tempo, desenhar e desfazer enquanto ele está lá. `Esc` o fecha.

- **Prévia**: reproduz o keyframe inicial, os intermediários e o keyframe final em loop, nas
  durações próprias dos quadros e com as outras camadas visíveis ao redor. Ela acompanha suas alterações
  conforme você as faz. Pause-a e avance quadro a quadro com os botões abaixo dela. Um sprite grande
  mostra só a parte por onde o tween passa. A linha ao lado diz quantos intermediários há
  e em quais quadros ("6 intermediários, quadros 3–8").
- **Predefinições**: tweens prontos (veja "Predefinições de tween" abaixo). **Usar
  predefinição** preenche o formulário; Aplicar o torna real.
- **Várias camadas**: aparece quando a seleção cobre mais de uma camada com um desenho no quadro
  inicial (veja "Tween de várias camadas" abaixo).
- **Pose**: as colunas **De** e **Final** definem onde a imagem está no início e no
  fim: **Posição** X e Y em pixels, **Escala** X e Y (1 é o tamanho original, um valor negativo a
  espelha), **Rotação** em graus (sentido horário; 360 é uma volta completa, então 720 gira duas vezes),
  **Inclinação** X e Y em graus, e **Opacidade** em porcentagem. **Travar proporção da escala** mantém X e Y em
  proporção quando você muda um deles. **Girar pelo caminho mais curto** transforma 350° em um passo de 10° para trás
  em vez de uma volta quase completa; desative para girar pelo caminho longo. **Igualar keyframe final** define a
  posição e a escala finais para que a imagem inicial caia onde está o desenho do keyframe final, no tamanho
  dele. Um novo tween já começa com isso preenchido. **Redefinir De** volta o De para nenhuma alteração.
- **Easing**: como o movimento acelera e desacelera. Cada pequena curva é uma escolha: **Linear**
  (constante), **Manter** (fica parado e salta no keyframe final), **Degraus** (move-se em saltos iguais;
  defina quantos), e Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back, Elastic e Bounce, cada um
  com easing **in** (começa devagar), **out** (termina devagar) ou **in-out** (os dois). Use as setas para percorrê-los.
  **Back** tem um **Overshoot**, **Elastic** uma **Amplitude** e um **Período**
  (a duração de cada oscilação), e **Bounce** um número de **Quicadas**. Em **Avançado: easing
  por trilha** você pode dar à posição, escala, rotação, inclinação, opacidade ou à trilha de cor um easing
  próprio, por exemplo um quique na posição enquanto o fade continua constante. **Desenhar curva** transforma o
  easing escolhido em uma curva que você mesmo edita (veja abaixo).
- **Keyframes**: **Keyframe final** escolhe o quadro em que o tween termina; mova-o e use Aplicar para
  alongar ou encurtar o tween (os intermediários além do novo final são removidos, ou mantidos como cels
  comuns se você pintou neles). **Encadear por vários keyframes** cria um tween de cada
  keyframe para o próximo, até o que você escolher, em um só passo; **Fazer cada tween terminar no seu keyframe
  final** dá a cada um a sua própria pose de Igualar keyframe final. **Estender** adiciona mais um tween do
  keyframe final deste tween até o próximo keyframe, com estas configurações.
- **Trajetória**: como a posição viaja. **Reta**; um **Arco** de uma **Altura** dada (um salto;
  negativo vai para o outro lado); uma **Onda** com uma **Amplitude**, um número de **Ciclos** e uma
  **Fase** em que ela começa; um **Zigue-zague** com uma **Amplitude** e **Ciclos**; ou um **Tremor** de até
  **Amplitude** pixels a cada quadro. Um tremor é igual toda vez para uma mesma **Seed**; **Sortear de novo**
  escolhe outra.
  **Desenhada** é um trajeto que você desenha na tela (veja "Desenhar uma trajetória de movimento"
  abaixo). **Orientar pela trajetória** vira a imagem para onde ela vai, em qualquer trajetória.
  **Mostrar a trajetória na tela** desenha o trajeto e um ponto onde cada intermediário cai.
- **Squash and stretch**: estica a imagem ao longo do movimento enquanto ela se move rápido e a achata
  na transversal, mantendo a área. 0% é desativado.
- **Pivô**: o ponto em torno do qual escala, rotação e inclinação atuam. Clique em um dos nove quadrados
  (cantos, bordas ou centro do cel do keyframe inicial), ou digite X e Y, em que 0 é a borda esquerda ou
  superior e 1 a direita ou inferior.
  Com **Pivô em: Pixels da tela**, X e Y passam a ser um ponto fixo da tela, então várias camadas
  com tween em torno do mesmo ponto se movem juntas como uma peça só.
- **Fade**: como as mudanças de opacidade aparecem (veja "Fades com dithering e transições"
  abaixo). **Alfa** muda a opacidade do cel; **Dithering** faz pixels inteiros surgirem ou sumirem
  por um **Padrão**. **Transição para o keyframe final** transforma a imagem no desenho do
  keyframe final.
- **Cor**: marque **Animar a cor** para mudar as cores da imagem ao longo do tween. **Matiz**
  (graus), **Saturação** e **Luminosidade** (porcentagem) funcionam como Matiz/Saturação, e **Intensidade do tingimento**
  mistura cada cor com a **Cor do tingimento**; cada um tem um valor De e um Final. O easing da trilha
  de cor é o chamado "Cor e rampa" no easing por trilha. Cada intermediário é
  recolorido a partir da imagem do keyframe inicial, então as edições não se acumulam. Em sprites indexados, os
  pixels recoloridos se ajustam à cor mais próxima da paleta.
- **Rampa de paleta** (sprites indexados): marque **Deslocar os índices da paleta ao longo de uma rampa** para fazer ciclo de cores
  sem recolorir. Os pixels que usam as entradas da paleta de **Primeiro** a **Último** (a entrada transparente
  fica de fora) avançam **Deslocamento** posições ao longo dessa sequência até o fim do tween, seja
  **dando a volta** nas pontas ou parando nelas. Os outros pixels ficam como estão. As amostras
  mostram a rampa.
- **Reamostragem**: como pixels girados ou redimensionados são desenhados. **Automático** usa **Mais próximo** (pixels
  exatos) e muda para **RotSprite** assim que algo gira ou se inclina; se você escolher um, ele é mantido.
  **Bilinear** mistura cores, para arte pictórica.
- **Subpixel**: como as posições intermediárias viram pixels inteiros. **Monotônico** nunca volta
  contra o sentido do movimento, **Arredondar** pega o pixel mais próximo e **Para baixo** arredonda para baixo.
- **Tempo**: **Quadros** espaça o movimento uniformemente pelos intermediários; **Tempo** segue as
  durações dos quadros, então um quadro mais longo cobre mais do movimento.
- **Atraso (quadros)**: mantém a pose inicial por esse número de quadros; depois o movimento
  preenche o resto do tween e ainda chega ao keyframe final. No easing por trilha, cada trilha pode
  esperar um número diferente de quadros, por exemplo um fade que começa depois do movimento.
- **Exposição**: **Em 1** desenha uma nova pose a cada quadro; **em 2** desenha uma a cada dois quadros
  e a mantém por dois, e assim por diante até oito.
- **Ping-pong (ida e volta)**: o movimento chega à pose final na metade do tween
  e volta à pose inicial no keyframe final, então um loop que termina onde começou não precisa de um
  segundo desenho. O easing molda cada metade.
- **Trava de paleta**: quando está ativada para um sprite RGBA (Sprite > Paleta > Trava de paleta), os intermediários reamostrados e
  recoloridos se ajustam à paleta, como qualquer coisa que você pinta. Um movimento simples copia a
  imagem exatamente. Ativar ou desativar a trava redesenha os tweens que têm Regenerar automaticamente ativado.
- **Regenerar automaticamente**: redesenha os intermediários sempre que o keyframe inicial ou os quadros
  mudam. Desative para redesenhá-los você mesmo com Editar > Cel > Regenerar tween.

**Aplicar** cria o tween (ou o altera) e mantém o inspetor aberto nele; **Aplicar e fechar**
também o fecha. Ambos são um passo de desfazer. Problemas com um valor, ou um tween que se sobreporia a
outro na camada, aparecem na parte de baixo da janela, e Aplicar espera até serem corrigidos.

Se os keyframes são vizinhos, não há espaço para intermediários: marque **Adicionar** e escolha
quantos quadros vazios inserir entre eles ao aplicar. Os quadros são compartilhados por todas as camadas, então
os novos quadros também ficam vazios nas outras camadas. Se o keyframe inicial é um cel vinculado, o
inspetor oferece **Desvincular**, porque um tween precisa da imagem própria do keyframe inicial.

Dicas:

- **Em 2** parece desenhado à mão e reduz pela metade as poses a limpar se você pintar por cima delas.
- Mantenha o subpixel **Monotônico** para movimentos lentos e suavizados: o arredondamento simples pode fazer a imagem tremer
  um pixel para lá e para cá. Ele age como Arredondar para easings com overshoot (Back, Elastic, Bounce)
  e para trajetórias diferentes de Reta.
- Para qualquer coisa que gire, o **RotSprite** mantém limpas as bordas de pixel art e nunca inventa cores.
  O Mais próximo é mais rápido, mas deixa diagonais serrilhadas.
- Para corrigir um intermediário à mão, é só pintar nele: sua edição é mantida quando o tween é redesenhado.
- O keyframe final mostra o seu próprio desenho. Para um movimento que termina parado, desenhe
  (ou copie) a imagem em repouso no último quadro; deixe-o vazio para sumir ou encolher algo.

### Predefinições de tween

**Predefinições**, no topo do inspetor, traz tweens prontos: surgir e sumir, surgir e sumir com
dithering, uma transição com dithering, brotar e encolher, cair e quicar, deslizar de cada lado,
uma entrada em curva por uma trajetória desenhada, tremer, um pulo com squash and stretch, squash
and stretch, flutuar, balançar, girar e piscar. Escolha uma e clique em **Usar predefinição**: ela
preenche o formulário, que você ainda pode mudar, e **Aplicar** (ou **Aplicar a camadas**) a torna
real.

As predefinições são relativas, então uma só serve para qualquer desenho e qualquer duração:

- as distâncias são medidas pelo tamanho do desenho inicial: um deslize "a partir de uma largura à
  esquerda" move 16 pixels um desenho de 16 pixels de largura e 40 um de 40, a altura de um arco e
  o tamanho de um tremor seguem o lado menor do desenho, e uma trajetória desenhada estica com a
  largura e a altura do desenho. As distâncias caem em pixels inteiros;
- o movimento preenche o tween tenha ele quantos quadros tiver, e um atraso é uma parte dele;
- o pivô é uma parte da caixa do desenho inicial;
- todo o resto (easing, escala, rotação, opacidade, cor, squash, exposição, ping-pong, fade) é
  usado como está. As configurações de reamostragem, subpixel e tempo continuam sendo suas.

Em um sprite indexado, uma predefinição que faz fade usa um fade com dithering, já que opacidade
parcial não aparece em uma paleta.

Em **Salvar e gerenciar predefinições**, digite um nome e clique em **Salvar como predefinição**
para guardar o formulário atual como predefinição sua (salvar com um nome já usado a substitui);
escolha uma das suas para **Renomear** ou **Excluir predefinição**. Suas predefinições ficam neste
dispositivo, como as curvas salvas: não estão no arquivo nem são sincronizadas. **Exportar** baixa
elas como um arquivo JSON e **Importar…** lê um de volta (em outro dispositivo, por exemplo),
ignorando o que não for uma predefinição válida.

### Fades com dithering e transições

Pixel art muitas vezes não consegue mostrar pixels semitransparentes, e sprites indexados não
conseguem de jeito nenhum: ali um fade alfa só muda a opacidade do cel, que o editor mistura fora
da paleta. Coloque **Fade** em **Dithering** e a trilha de opacidade dissolve a imagem em vez
disso: pixels inteiros surgem ou somem por um padrão **Bayer 2×2**, **4×4**, **8×8** ou
**Agrupado** (meio-tom), e a parte dos pixels mantidos segue a opacidade com seu easing. O padrão é
fixo na tela, não na imagem, então não se arrasta quando a imagem se move, e um fade de entrada só
acrescenta pixels. Só pixels inteiros nas cores do próprio desenho são mantidos, então sprites
indexados e sprites com profundidade de cor ficam exatos. Tweens novos em sprites indexados começam
com Dithering.

**Transição para o keyframe final** transforma a imagem inicial no desenho do keyframe final ao
longo do tween (pelo easing da trilha de opacidade): com Dithering, cada pixel mostra um desenho ou
o outro; com Alfa, os dois são misturados. Pintar no keyframe final redesenha a transição.

### Tween de várias camadas

Selecione cels em várias camadas (uma cabeça, um corpo e um chapéu, ou as letras de um título) do
quadro inicial ao quadro final e abra o inspetor. **Várias camadas** mostra quantas camadas têm um
desenho no quadro inicial; configure o tween como de costume e clique em **Aplicar a camadas** para
dar a todas o mesmo tween em uma única etapa de desfazer.

- **Escalonar em** faz cada camada começar esse número de quadros depois da anterior, na **Ordem**
  escolhida: camada de cima primeiro, camada de baixo primeiro ou na ordem em que você as
  selecionou. Uma camada posterior mantém a pose inicial até chegar a vez dela.
- **Duração**: **Terminar juntas** faz todos os tweens terminarem no mesmo keyframe final, então as
  camadas posteriores se movem um pouco mais rápido; **Estender** mantém a mesma duração do
  movimento, então cada camada posterior termina mais tarde (quadros são adicionados no final se
  preciso).
- **Pivô de grupo compartilhado** escala, gira e inclina todas as camadas em torno de um único ponto
  (a configuração de Pivô tomada sobre a caixa em volta dos desenhos iniciais de todas as camadas),
  então elas se movem como uma peça rígida em vez de cada uma girar em torno do próprio centro.

Na linha do tempo, os quadros em que uma camada espera são desenhados com uma seta tracejada e um
tom mais claro.

### Desenhar uma trajetória de movimento

Coloque **Trajetória** em **Desenhada** para guiar a imagem por uma curva que você desenha. Ela
começa como o trajeto que você tinha (um arco vira uma trajetória curva), da posição inicial à
final. Enquanto o inspetor está aberto, a tela mostra a trajetória com suas âncoras, as alças delas
e um ponto para cada intermediário:

- arraste uma **âncora** (um círculo) para movê-la; a primeira e a última âncora são as posições
  inicial e final, então arrastá-las também define a posição Final;
- arraste uma **alça** (um quadrado) para curvar a trajetória; a alça oposta gira junto, ou segure
  `Alt` para mover só uma;
- clique na linha para adicionar uma âncora ali, `Alt`+clique em uma âncora para removê-la e
  clique duplo para alterná-la entre suave e canto;
- **Adicionar âncora** e **Remover âncora** no inspetor fazem o mesmo pelo teclado.

Âncoras e alças se encaixam no centro dos pixels. A imagem percorre a trajetória em velocidade
constante: o easing da posição define o ritmo ao longo dela, não o formato da curva. Marque
**Orientar pela trajetória** para virar a imagem na direção em que ela vai (ela começa sem
rotação); o RotSprite mantém as bordas limpas. A trajetória faz parte do tween, então é mantida em
arquivos `.pxstudio` e `.aseprite`. Mudanças na tela ficam pendentes, como o resto do formulário,
até você clicar em Aplicar. Desmarque **Editar a trajetória na tela** para ver a trajetória sem as
alças.

### Desenhar sua própria curva de easing

**Desenhar curva** (ao lado de Linear, Manter e Degraus) transforma o easing em uma curva que você molda:
um quadrado em que o eixo horizontal é o quanto do tween já passou e o eixo vertical é
o quanto o movimento já avançou. Ela parte do easing que você tinha escolhido. Arraste um ponto (uma **âncora**)
para movê-lo, arraste os quadrados ao lado do ponto selecionado (as **alças**) para curvar a curva, dê um clique duplo
em um espaço vazio para adicionar uma âncora, ou dê um clique duplo em um ponto (ou pressione `Del`) para removê-lo. As
setas deslocam a âncora em foco, e as caixas **Progresso** e **Valor** a definem com exatidão. **Canto**
tira as alças para que a curva faça uma virada brusca ali. Valores acima de 1 ou abaixo de 0 geram overshoot.
**Inverter** espelha a curva; **Partir de** a substitui por qualquer easing pronto para editar.

Dê um nome à curva e use **Salvar na biblioteca** para guardá-la para outros tweens: as curvas salvas ficam só
neste dispositivo, e escolher uma em **Curvas salvas** a carrega no editor. Salvar com um
nome já usado substitui essa curva.

### Cadeias e mover o final de um tween

Uma cadeia é uma sequência de tweens por vários keyframes de uma camada, cada um terminando no keyframe
em que o próximo começa, de modo que um desenho pode encerrar um tween e iniciar o seguinte. Selecione o primeiro
keyframe e escolha Editar > Cel > Criar tween entre keyframes para encadear por todos os keyframes seguintes da camada, cada
tween terminando no seu próprio keyframe final, ou use **Encadear por vários keyframes** no inspetor
para escolher onde parar e manter suas próprias configurações. É um passo de desfazer. Tweens que já começam
nesses keyframes são substituídos.

Para mover onde um tween termina, selecione o keyframe inicial dele até o quadro em que deve terminar e
escolha Editar > Cel > Definir o fim do tween na seleção, ou mude o **Keyframe final** no inspetor e use Aplicar. Um tween
não pode ser alongado até dentro do seguinte em uma cadeia.

### Tweens em scripts

Os scripts têm os mesmos tweens: `app.setTween(layerId, frameId, { to = endFrameId, end = { dx = 12 },
ease = "quad", mode = "out", path = "arc", height = 6 })` faz o tween do cel de uma camada em `frameId` até um
quadro posterior e retorna o id do tween, e `app.regenerateTween`, `app.bakeTween` e
`app.removeTween` recebem a camada e o quadro inicial. `app.setTweenChain(layerId, { frameA, frameB,
frameC }, opts)` faz o tween por esses keyframes em uma etapa e retorna os ids dos tweens, e
`app.setTweenEnd(layerId, frameId, newEndFrameId)` move o final de um tween. As opções também aceitam
`curve` (um easing desenhado), `trackEasing`, `color` e `colorFrom` (matiz, saturação, luminosidade,
tingimento), `tintColor` (uma string hex ou `{ r, g, b }`), `ramp` (`{ first, last, shift, wrap }`),
`fade`, `ditherPattern` e `crossfade`, `delay` e `trackDelay`, `pivotSpace`, `orient`, e
`path = "custom"` com `points` (as âncoras da trajetória desenhada). `app.tweenPresets()` lista as
predefinições embutidas e `app.tweenPreset("popIn")` retorna uma; passe o `recipe` dela como opção
`preset` para ajustá-la ao cel inicial. `app.setTweenStagger({ layerA, layerB }, frameId, { to =
endFrameId, preset = app.tweenPreset("slideInTop").recipe, step = 2, groupPivot = true })` faz o tween
de várias camadas em uma etapa. Veja a referência de scripting para todas as opções.

### Tweens na linha do tempo

- Uma **seta** corre ao longo da base dos cels do keyframe inicial até uma ponta de seta no
  keyframe final. Um keyframe pode encerrar um tween e iniciar o seguinte.
- Os quadros **intermediários** são tingidos de azul.
  Os quadros em que o tween ainda espera seu **atraso** são mais claros, com uma seta tracejada.
- Um pequeno **losango** escuro marca um intermediário em que você pintou ou que moveu. Sua edição permanece quando
  o tween é redesenhado, até você usar Editar > Cel > Reverter ao tween.
- Quando o keyframe inicial muda, ou os quadros ou o tempo deles mudam, o tween fica **desatualizado**: seus
  intermediários não correspondem mais. A seta fica âmbar, e o canto do keyframe inicial também.
  Use Editar > Cel > Regenerar tween para redesenhá-lo. Um tween configurado para se regenerar sozinho
  nunca fica desatualizado, exceto em uma camada bloqueada.
- Um **canto vermelho** em um keyframe inicial significa que o tween está **quebrado**: seu quadro final foi excluído
  ou movido para antes dele. Dê a ele um novo final, ou remova-o.

Aponte para um cel para ler a mesma coisa em palavras ("início de tween, até o quadro 9, desatualizado", "com tween, editado
à mão"); os leitores de tela também anunciam isso.

### Comandos de tween

Eles estão em **Editar > Cel** e no menu de clique com o botão direito de um cel. Agem nos cels selecionados (ou
no cel ativo), e qualquer cel de um tween, seu keyframe inicial ou um intermediário, representa o
tween inteiro. Cada um é um passo de desfazer, e camadas bloqueadas e ocultas são ignoradas.

- Editar > Cel > Regenerar tween redesenha os intermediários a partir do keyframe inicial, deixando em paz os que
  você editou à mão.
- Editar > Cel > Reverter ao tween devolve os intermediários editados à mão selecionados ao que o tween desenha.
- Editar > Cel > Consolidar tween mantém cada intermediário como um cel comum e remove o tween, para que nada
  volte a redesenhá-los.
- Editar > Cel > Remover tween remove o tween e os intermediários que ele desenhou. Os que você editou à mão
  ficam, como cels comuns.
- Editar > Cel > Copiar configurações do tween copia as configurações de um tween: easing, movimento, trajetória e tempo, mas
  não onde ele termina. Editar > Cel > Colar configurações do tween as aplica a cada keyframe selecionado. Um
  keyframe que já inicia um tween mantém seu final; caso contrário, o tween vai até o próximo quadro
  da camada com um cel desenhado. Keyframes sem nada depois deles são ignorados.

## Casca de cebola

A casca de cebola mostra cópias esmaecidas dos quadros antes e depois do atual, para você ver o
movimento enquanto desenha. Ative com Exibir > Mostrar casca de cebola ou com o botão de casca de cebola na barra de
opções da ferramenta. Ela é definida por visão de editor.

Configurações > Casca de cebola... escolhe quantos quadros mostrar antes e depois (até 16 de cada), a opacidade
deles e quanto ela diminui por quadro, se os quadros anteriores são tingidos de vermelho e os posteriores de
azul, se deve mostrar só os quadros da tag atual, e se as cópias são desenhadas atrás ou na frente do
sprite. Atrás, elas são desenhadas sobre a camada Plano de fundo e sob as outras camadas, então
aparecem em um sprite com Plano de fundo. O tingimento recolore cada cópia pelo brilho, então contornos escuros
aparecem como vermelho-escuro ou azul-escuro também. Essas configurações valem para todos os sprites.

A casca de cebola acompanha a reprodução, como no Aseprite. Ela não dá a volta passando do primeiro ou do último quadro.
Com **Só a tag atual**, ela usa a menor tag em volta do quadro atual, na direção dessa tag:
em uma tag reversa, o quadro "antes" é o próximo ao longo da linha do tempo. Com **Repetir os quadros da tag em
loop**, ela dá a volta dentro da tag, e uma tag ping-pong quica nas pontas.