Keyframe Editor

Erstellen Sie komplexe, zeitgenaue Animationen mit Keyframes.

Was sind Keyframes?

Keyframes definieren spezifische Eigenschaftswerte zu bestimmten Zeitpunkten. PinePaper animiert (interpoliert) automatisch zwischen Keyframes, um reibungslose Übergänge zu erzeugen.

Öffnen der Timeline

Das Timeline-Panel befindet sich am unteren Rand des Bildschirms. Falls versteckt:

1. Klicken Sie View im Menü
2. Wählen Sie Zeitleiste anzeigen

Erstellen von Keyframes

Methode 1: Properties Panel

1. Wählen Sie einen Artikel
2. Setzen Sie den Playhead auf die gewünschte Zeit
3. Ändern einer Eigenschaft (Position, Maßstab, Deckkraft, Farbe)
4. Ein Keyframe wird automatisch erstellt

Methode 2: Timeline Panel

1. Wählen Sie einen Artikel
2. Klicken Sie auf die Timeline zur gewünschten Zeit
3. Klicken Sie auf Hinzufügen Keyframe oder drücken Sie K

Keyframeable Eigenschaften

Bearbeiten von Keyframes

Bewegliche Keyframes

Ziehen Sie einen Keyframe nach links oder rechts auf der Timeline, um seine Zeit zu ändern.

Bearbeiten von Werten

1. Klicken Sie auf einen Keyframe, um ihn auszuwählen
2. Werte im Properties Panel ändern
3. Änderungen gelten für diesen Keyframe

Löschen von Keyframes

1. Wählen Sie den Keyframe
2. Delete oder Rechtsklick → Keyframe löschen

Lockerungsfunktionen

Steuere die Beschleunigung von Animationen zwischen Keyframes:

Wiedergabesteuerung

Trim und Split

Jedes Keyframe-animierte Element erscheint auf der Timeline als Draggable Clip Block (der Indigo-Balken hinter den Keyframe-Diamanten). Mit dem Clipblock können Sie:

• Drag the body — Verschieben Sie die gesamte Animation in der Canvas-Zeit (timeOffset).
• Drag den linken Rand — trimmen Sie den Anfang des gespielten Unterbereichs. Der rechte Rand der Bar bleibt verankert und entspricht der Premiere / Canva-Konvention.
• Ziehen Sie die rechte Kante - schneiden Sie das Ende des gespielten Unterbereichs, geklemmt auf die Zeit des letzten Keyframes.
• Drücken Sie S mit dem Abspielkopf im Clip - am Abspielkopf aufgeteilt. Das neue Stück wird zu einem eigenen Registry-Eintrag; Chaining Splits produziert N+1 unabhängige Stücke.

Datenfelder

Die Clip-Block-Benutzeroberfläche bildet diese Felder auf dem Element ab:

Außerhalb des Canvas-Fensters des Clips wird das Element über visible=false verborgen - die Opazität bleibt in Ruhe, so dass opazitätsanimierende Keyframes immer noch im Fenster funktionieren.

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

Was Split gibt Ihnen

Der Split ist eine tiefe Kopie. Das Paper.js-Element wird über Item.clone() geklont (Konserven transformieren + style); die Keyframe-Arrays (keyframes, contentKeyframes, propertyEasings) sind JSON Round-Triped, so dass jedes Stück seine Daten besitzt. Chaining teilt sich linear auf: N teilt sich auf ⇒ N+1 unabhängige Stücke, jeder seinen eigenen Registereintrag. Praktische Konsequenzen:

• Per-Piece-Leasing - Ändern Sie das easing eines einzelnen Keyframes auf einem Stück; die anderen sind unberührt.
• Pro Stück Farb- oder Werteinterpolation - Bearbeiten Sie die fillColor, strokeColor oder eine animierte Eigenschaft eines Keyframes auf einem Stück, um eine andere Transformation über das Fenster anzuwenden. Die vorhandenen Farb- und Gradienteninterpolatoren behandeln den HSL/RGB-Lerp unverändert.
• Räumlicher Pfad pro Stück - spatialHandles lebt in einzelnen Keyframes, so dass das Kurven des Pfades der Animation eines Stücks die anderen nicht beeinflusst.

Stücke überlappen sich visuell nicht, solange sich ihre Leinwandfenster nicht überlappen. Ziehen Sie ein Stück in eine neue Canvas-Time-Position, schneiden Sie es erneut oder teilen Sie es weiter.

Beispiel: Fade In Animation

1. Wählen Sie ein Textelement
2. Zum Zeitpunkt 0s: Opacity auf 0 setzen
3. Zum Zeitpunkt 1s: Opacity auf 1 setzen
4. Stellen Sie Lockerung auf Ease Out
5. Drücken Sie Play zur Vorschau

Beispiel: Farbübergang

1. Wählen Sie einen Artikel
2. Zum Zeitpunkt 0s: Setzen Sie Füllfarbe auf #FF0000 (rot)
3. Zum Zeitpunkt 2s: Setzen Sie Füllfarbe auf #0000FF (blau)
4. Die Farbe geht glatt durch das Spektrum

Beispiel: Kamera Pan Effekt

Erstellen Sie filmische Pan-Animationen über große Bilder mit der Leinwand als Viewport.

Wie es funktioniert

Wenn Sie ein Bild haben, das größer ist als Ihre Leinwand:

• Die Canvas-Grenzen fungieren als Kamera-Viewport
• Verschieben des Bildes links = Kameraschwenks rechts
• Verschieben des Bildes nach oben = Kameraschwenks nach unten

Erstellen einer Pan Animation

1. Legen Sie die Canvas-Größe auf Ihren gewünschten Ausgang (z. B. 1920 × 1080 für HD-Video)
2. Importieren Sie ein großes Bild (größer als Canvas)
3. Positionieren Sie das Bild so, dass die Startansicht sichtbar ist
4. Keyframes erstellen, um die Bildposition zu verschieben

Row-by-Row Abtastmuster

Um ein Bild in einem Serpentinenmuster zu scannen:

Alternative: Kamera folgt

Für eine dynamische Kamerabewegung, die einem Objekt folgt:

1. Erstellen Sie einen kleinen Marker oder Pfad
2. Hinzufügen einer camera_follows-Relation zum Marker
3. Animieren der Markierungsposition
4. Der Viewport folgt automatisch

Tipps