Keyframe Editor

Crea animazioni complesse e puntuali utilizzando keyframe.

Cosa sono i Keyframe?

I keyframe definiscono valori specifici di proprietà in punti specifici nel tempo. PinePaper anima automaticamente (interpolati) tra i keyframe per creare transizioni fluide.

Apertura della Timeline

Il pannello Timeline è in fondo allo schermo. Se nascosto:

1. Clicca Visualizza nel menu
2. Selezionare Show Timeline

Creazione di Keyframes

Metodo 1: Pannello delle proprietà

1. Seleziona un elemento
2. Impostare il playhead al tempo desiderato
3. Cambiare una proprietà (posizione, scala, opacità, colore)
4. Viene creato automaticamente un keyframe

Metodo 2: Pannello di timeline

1. Seleziona un elemento
2. Clicca sulla timeline al momento desiderato
3. Fare clic su Aggiungi Keyframe o premere K

Proprietà keyframeable

Modifica dei Keyframe

Trasferimenti Keyframes

Trascinare un keyframe a sinistra o a destra sulla timeline per cambiare il suo tempo.

Modifica dei valori

1. Clicca su un keyframe per selezionarlo
2. Modificare i valori nel Pannello Proprietà
3. Le modifiche si applicano a quel keyframe

Cancellazione di Keyframes

1. Selezionare il keyframe
2. Premere Delete o fare clic con il pulsante destro del mouse su → Delete Keyframe

Funzioni di easing

Controllare l’accelerazione delle animazioni tra i keyframe:

Controlli di riproduzione

Trim e Split

Ogni elemento keyframe-animato appare sulla linea temporale come un blocco di clip trascinabile (la barra indigo dietro i diamanti keyframe). Il blocco clip ti permette:

• Drag il corpo — spostare l’intera animazione in tempo di tela (timeOffset).
• Distruggere il bordo sinistro — tagliare l’inizio del sub-range giocato. Il bordo destro del bar rimane ancorato, in corrispondenza della convenzione Premiere/Canva.
• Distruggere il bordo destro — tagliare la fine del sub-range giocato, fissato al tempo dell’ultimo keyframe.
• Press S con la testina all’interno della clip — divisa sulla testina. Il nuovo pezzo diventa la sua voce di registro; la divisione di catena produce pezzi N+1 indipendenti.

Campi dati

Il clip-blocca le mappe UI a questi campi sulla voce:

Al di fuori della finestra di tela della clip l’oggetto è nascosto tramite visible=false — l’opacità è lasciata sola in modo che i keyframe animati da opacità funzionino ancora all’interno della finestra.

// 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 } },
  ],
});

Che scissione ti dà

La divisione è una copia profonda. L’elemento Paper.js è clonato tramite Item.clone() (preserve trasformano + stile); gli array keyframe (keyframes, contentKeyframes, propertyEasings) sono rotondi JSON, quindi ogni pezzo possiede i suoi dati. La catena si divide in modo lineare: N si divide ⇒ N+1 pezzi indipendenti, ciascuno la propria voce di registro. Conseguenze pratiche:

• Per-piece easing — cambiare easing di un singolo keyframe su un unico pezzo; gli altri sono intatti.
• Per-piece color o value interpolation — modificare fillColor, strokeColor di un keyframe, o qualsiasi proprietà animata su un pezzo per applicare una trasformazione diversa sulla sua finestra. Gli interpolatori di colore e gradienti esistenti maneggiano invariato HSL/RGB lerp.
• Per-piece space path — spatialHandles live all’interno di singoli keyframe, in modo da curare il percorso dell’animazione di un pezzo non influisce sugli altri.

I pezzi non si sovrappongono visivamente finché le finestre non si sovrappongono. Trascinare qualsiasi pezzo in una nuova posizione di tempo di tela, tagliarlo di nuovo, o dividerlo ulteriormente.

Esempio: Fade In Animation

1. Seleziona una voce di testo
2. Al momento 0s: Impostare l’opzione a 0
3. Al momento 1s: Impostare l’opzione a 1
4. Impostare l’asing a**
5. Rassegna stampa

Esempio: Trasmissione di colore

1. Seleziona un elemento
2. Al momento 0s: Impostare il colore di riempimento a #FF0000 (rosso)
3. Al momento 2s: Impostare il colore di riempimento a #0000FF (blu)
4. Il colore passa lisciamente attraverso lo spettro

Esempio: Effetto Pan Camera

Creare animazioni di pan cinematografica attraverso immagini di grandi dimensioni utilizzando la tela come viewport.

Come funziona

Quando hai un’immagine più grande della tua tela:

• Il canvas bounds funge da viewport della telecamera
• Spostare l’immagine sinistra…
• Trasferire l’immagine…

Creare una Pan Animation

1. Dimensioni di tela per l’output desiderato (ad esempio, 1920×1080 per video HD)
2. Importare una grande immagine (più grande della tela)
3. Posizione dell’immagine così la vista iniziale è visibile
4. Creare keyframes per spostare la posizione dell’immagine

Modello di scansione Row-by-Row

Scansione attraverso un’immagine in un modello serpente:

Alternativa: Approfondisci

Per il movimento dinamico della fotocamera che segue un oggetto:

1. Creare un piccolo marcatore o un percorso
2. Aggiungi una relazione camera_follows al marcatore
3. Animare la posizione del marcatore
4. Il viewport segue automaticamente

Consigli