Editor de quadros de teclas

Crie animações complexas e precisas usando quadros de chaves.

O que são os Keyframes?

Keyframes definem valores de propriedade específicos em pontos específicos no tempo. O PinePaper anima automaticamente (interpola) entre quadros de teclas para criar transições suaves.

Abertura da Linha do Tempo

O painel Timeline está na parte inferior da tela. Se oculto:

1. Clique em Ver no menu
2. Selecione Mostrar linha do tempo

Criando quadros de teclas

Método 1: Painel de Propriedades

1. Selecionar um item
2. Configura o playhead para a hora desejada
3. Mudar uma propriedade (posição, escala, opacidade, cor)
4. Um quadro de chaves é criado automaticamente

Método 2: Painel da linha do tempo

1. Selecionar um item
2. Clique na linha do tempo na hora desejada
3. Clique em Adicionar Teclado ou pressione K

Propriedades do Keyframeable

Editar os Quadros de Teclas

Mover os Quadros de Teclas

Arraste um quadro de teclas para a esquerda ou para a direita na linha do tempo para alterar o seu tempo.

Editar Valores

1. Clique em um quadro de teclas para selecioná- lo
2. Modificar os valores no Painel de Propriedades
3. As alterações aplicam-se a esse quadro de chaves

Excluindo quadros de teclas

1. Selecione o quadro de teclas
2. Pressione Delete ou clique com o botão direito → Delete Keyframe

Facilitar as Funções

Controlar a aceleração das animações entre os quadros de teclas:

Controles de reprodução

Aparar e Dividir

Cada item animado por keyframe aparece na linha do tempo como um bloco de clip arrastável (a barra indigo atrás dos diamantes keyframe). O bloco de clipes permite-lhe:

• Drague o corpo — mude toda a animação em tempo de tela (timeOffset).
• Arraste a borda esquerda — corte o início da sub-intervalo tocada. A borda direita da barra fica ancorada, combinando com a convenção Premiere/Canva.
• Drag the right edge — aparar o fim do sub-intervalo jogado, preso ao tempo do último keyframe.
• Pressione S com o playhead dentro do clipe - dividido no playhead. A nova peça torna-se sua própria entrada de registro; as splits de encadeamento produzem peças independentes N+1.

Campos de dados

O clip-bloquear mapas UI para estes campos no item:

Fora da janela de tela do clipe, o item é escondido via visible=false — a opacidade é deixada sozinha, então os keyframes animadores de opacidade ainda funcionam dentro da janela.

// Programmatic equivalent of right-edge trim.
const item = app.create('text', {
  content: 'Reveal', x: 400, y: 300,
  animationType: 'keyframe',
  timeOffset: 2,        // clip starts at canvas time 2s
  clipInPoint: 1,       // skip the first 1s of keyframe data
  clipOutPoint: 4,      // stop at 4s of keyframe data → 3s clip window
  keyframes: [
    { time: 0, properties: { opacity: 0 } },
    { time: 1, properties: { opacity: 1 } },
    { time: 4, properties: { opacity: 0.3 } },
  ],
});

O que é que te dá

A divisão é uma cópia profunda. O item Paper.js é clonado via Item.clone() (preserva transformada + estilo); os arrays keyframe (keyframes, contentKeyframes, propertyEasings) são JSON round-tripped para que cada peça possua seus dados. Acorrentamento divide escalas linearmente: N divide peças independentes, cada uma sua própria entrada de registro. Consequências práticas:

• Por peça fácil — mude o easing de um único keyframe em uma peça; as outras são intocadas.
• Por peça cor ou interpolação de valor — edite fillColor de um keyframe, strokeColor, ou qualquer propriedade animada em uma peça para aplicar uma transformação diferente sobre sua janela. Os interpoladores de cor e gradiente existentes manuseiam HSL/RGB lerp inalterado.
• Per-peça caminho espacial — spatialHandles ao vivo dentro de keyframes individuais, então curvar o caminho da animação de uma peça não afeta os outros.

As peças não se sobrepõem visualmente desde que as suas janelas de tela não se sobreponham. Arraste qualquer peça para uma nova posição lona-tempo, corte-a novamente, ou divida-a mais.

Exemplo: Fade In Animation

1. Selecione um item de texto
2. No tempo 0s: Definir opacidade para 0
3. No tempo 1s: Definir opacidade para 1
4. Definir para Fácil para
5. Pressione Tocar para visualizar

Exemplo: Transição de Cores

1. Selecionar um item
2. No tempo 0s: Definir a cor de preenchimento como #FF0000 (vermelho)
3. No tempo 2s: Definir a cor de preenchimento para #0000FF (azul)
4. A cor transiciona suavemente através do espectro

Exemplo: Câmera Pan Effect

Crie animações cinematográficas em grandes imagens usando a tela como viewport.

Como Funciona

Quando você tem uma imagem maior que sua tela:

• Os limites de canvas atuam como o viewport da câmera
• Movendo a imagem à esquerda = panelas de câmera direita
• Movendo a imagem para cima = painéis de câmera para baixo

Criando uma Animação Pan

1. Set canvas tamanho para a sua saída desejada (por exemplo, 1920×1080 para vídeo HD)
2. Importar uma imagem grande (maior que tela)
3. Posição da imagem para que a visão inicial seja visível
4. Criar quadros de teclas para mover a posição da imagem

Padrão de digitalização Row-by-Row

Para analisar uma imagem num padrão serpentino:

Alternativa: Seguimentos da câmera

Para o movimento dinâmico da câmera que segue um objeto:

1. Criar um pequeno marcador ou caminho
2. Adicionar uma relação camera_follows ao marcador
3. Animar a posição do marcador
4. O viewport segue automaticamente

Dicas