Keyframe-editor

Maak complexe, precies getimede animaties met behulp van keyframes.

Wat zijn Keyframes?

Keyframes definiëren specifieke eigenschappen op specifieke punten in de tijd. PinePaper animeert automatisch tussen sleutelframes om soepele overgangen te creëren.

Opening van de tijdlijn

Het tijdlijnpaneel bevindt zich onderaan het scherm. Indien verborgen:

1. Klik op Bekijk in het menu
2. Selecteer Tijdlijn tonen

Sleutelframes aanmaken

Methode 1: Eigenschappenpaneel

1. Een item selecteren
2. De playhead instellen op de gewenste tijd
3. Eigenschap wijzigen (positie, schaal, dekking, kleur)
4. Er wordt automatisch een sleutelframe aangemaakt

Methode 2: Tijdlijnpaneel

1. Een item selecteren
2. Klik op de tijdlijn op het gewenste tijdstip
3. Klik op Toevoegen Keyframe of druk op K

Sleutelframe-eigenschappen

Sleutelframes bewerken

Sleutelframes verplaatsen

Sleep een sleutelframe links of rechts op de tijdlijn om de tijd te veranderen.

Waarden bewerken

1. Klik op een sleutelframe om het te selecteren
2. Waarden wijzigen in het Eigenschappenpaneel
3. Wijzigingen zijn van toepassing op dat sleutelframe

Sleutelframes verwijderen

1. Selecteer het sleutelframe
2. Druk op DELETE of met de rechtermuisknop → Delete Keyframe

Gemakkelijke functies

Controleer de versnelling van animaties tussen sleutelframes:

Afspeelknoppen

Trim en Split

Elk sleutelframe-geanimeerd item verschijnt op de tijdlijn als een sleepbare clip blok (de indigo bar achter de sleutelframe diamanten). De clip blok kunt u:

• Sleep het lichaam .
• Sleep de linker rand De rechterrand van de bar blijft verankerd, passend bij de Premiere/Canva conventie.
• Sleep de rechter rand .
• Press S met de playhead in de clip, split op de playhead. Het nieuwe stuk wordt zijn eigen registratie; kettingsplits produceren N+1 onafhankelijke stukken.

Gegevensvelden

De clip-blok UI kaarten naar deze velden op het item:

Buiten het canvas-venster van de clip is het item verborgen via visible=false de opaciteit van de clip, zodat de ondoorzichtigheid-animerende sleutelframes nog steeds in het venster werken.

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

Welke split geeft je

De splitsing is een diepe kopie. Het Paper.js-item wordt gekloond via Item.clone() (preserves transform + style); de keyframe arrays (keyframes, contentKeyframes, propertyEasings) zijn JSON afgerond zodat elk stuk zijn gegevens bezit. Chaining splitst de weegschaal lineair: N splitst de N+1 onafhankelijke stukken, elk zijn eigen registervermelding. Praktische gevolgen:

• Per stuk ontspannen Verander de easing van één enkele keyframe op één stuk; de andere zijn onaangeroerd.
• Per-delige kleur of waarde ›› De bestaande kleur- en kleurinterpolators hanteren HSL/RGB-lerp ongewijzigd.
• Per-delige ruimtelijk pad .

Stukken overlappen visueel niet zolang hun canvas ramen elkaar niet overlappen. Sleep elk stuk naar een nieuwe canvas-tijd positie, trim het opnieuw, of deel het verder.

Voorbeeld: Vervagen in animatie

1. Selecteer een tekstitem
2. Op 0’s: Zet de dekking op 0
3. Op tijd 1s: Stel dekking in op 1
4. Stel ontspannen in op Ease Out
5. Naar voorbeeld afspelen

Voorbeeld: Kleurovergang

1. Een item selecteren
2. Op tijd 0s: Vulkleur in op #FF0000 (rood)
3. Op moment 2s: Vul kleur in op #0000FF (blauw)
4. De kleur verandert soepel door het spectrum

Voorbeeld: Camera Pan Effect

Creëer filmische pananimaties over grote afbeeldingen met behulp van het canvas als viewport.

Hoe het werkt

Als je een afbeelding groter hebt dan je canvas:

• De canvas grenzen fungeren als de camera viewport
• Het verplaatsen van de beeld links = camera pannen rechts
• Het verplaatsen van de beeld omhoog = camera pannen down

Een pananimatie aanmaken

1. Set canvas size naar de gewenste uitgang (bijv., 1920×1080 voor HD video)
2. Importeer een grote afbeelding (groter dan canvas)
3. Bestand van de afbeelding zodat de startweergave zichtbaar is
4. Keyframes maken om de afbeeldingspositie te verplaatsen

Row-by-Row scanning patroon

Om een afbeelding in een serpentinepatroon te scannen:

Alternatief: Camera volgt

Voor dynamische camerabewegingen die een object volgen:

1. Een kleine markeerder of pad aanmaken
2. Voeg een camera_follows-relatie toe aan de markeerder
3. De markeerderpositie animeren
4. De viewport volgt automatisch

Tips