Keyframe Editor

Skapa komplexa, exakt tidsbestämda animationer med hjälp av nyckelrutor.

Vad är Keyframes?

Keyframes definierar specifika fastighetsvärden vid specifika tidpunkter. PinePaper animerar automatiskt (interpolerar) mellan nyckelrutor för att skapa smidiga övergångar.

Öppna tidslinjen

Tidslinjen är längst ner på skärmen. Om dold:

1. Klicka Visa* i menyn
2. Välj Visa tidslinje*

Skapa Keyframes

Metod 1: Properties Panel

1. Välj ett objekt
2. Ställ in playhead till önskad tid
3. Ändra en fastighet (position, skala, opacitet, färg)
4. En nyckelram skapas automatiskt

Metod 2: Timeline Panel

1. Välj ett objekt
2. Klicka på tidslinjen vid önskad tid
3. Klicka Lägg till Keyframe eller tryck på K

Keyframeable Egenskaper

Redigera Keyframes

Flytta Keyframes

Dra en nyckelram kvar eller höger på tidslinjen för att ändra sin tid.

Redigera värden

1. Klicka på en nyckelram för att välja den
2. Ändra värden i fastighetspanelen
3. Ändringar gäller för denna nyckelram

Ta bort Keyframes

1. Välj keyframe
2. Tryck på Delete eller högerklicka → * Delete Keyframe**

Lätta funktioner

Kontrollera accelerationen av animationer mellan nyckelram:

Uppspelningskontroller

Trim och Split

Varje keyframe-animerade objekt visas på tidslinjen som ett släpbart klippblock (indigobaren bakom keyframe diamanter). Klippblocket låter dig:

• Drag kroppen - flytta hela animationen i duktid (timeOffset).
• Drag vänsterkanten – trimma starten av den spelade sub-range. Den högra kanten av baren förankras, matchar Premiere / Canva konventionen.
• Drag rätt kant - trimma slutet av den spelade sub-range, klämd till den sista nyckelrutan tid.
• Press S med lekhuvudet inuti klippet – uppdelat i playhead. Det nya stycket blir en egen registerpost; kedjedelar producerar N + 1 oberoende bitar.

Datafält

Klippblock UI kartlägger till dessa fält på objektet:

Utanför klippets dukfönster är objektet dolt via visible=false - opacity lämnas ensam så opacity-animera nyckelrutor fungerar fortfarande inuti fönstret.

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

Vilken splittring ger dig

Delningen är en djup kopia. Paper.js-objektet klonas via Item.clone() (bevarar transform + stil); keyframe arrays (keyframes, contentKeyframes, propertyEasings) är JSON rundtrippade så varje bit äger sina data. Chaining splits skalor linjärt: N splits | N + 1 oberoende bitar, var och en sin egen registerpost. Praktiska konsekvenser:

• Per-piece lättnad - ändra en enda nyckelram easing på en bit; de andra är orörda.
• *Per-piece färg eller värde interpolering - redigera en nyckelram fillColor, strokeColor eller någon animerad egenskap på en bit för att tillämpa en annan omvandling över sitt fönster. De befintliga färg- och gradientinterpolatorerna hanterar HSL/RGB lerp oförändrad.
• Per-piece rumslig väg - spatialHandles lever inuti enskilda nyckelrutor, så att kurvan på en bits animation inte påverkar de andra.

Bitar överlappar inte visuellt så länge som deras dukfönster inte överlappar varandra. Dra någon bit till en ny duk-tid position, trimma den igen, eller dela den ytterligare.

Exempel: Fade in Animation

1. Välj ett text objekt
2. Vid tidpunkten 0s: Ställ in Opacity till 0
3. Tid 1s: Ställ in Opacity till 1
4. Ställ lättnad till Ease Out
5. Press Play för förhandsgranskning

Exempel: Färgövergång

1. Välj ett objekt
2. Vid tiden 0s: Ställ in Fyll färg till #FF0000 (röd)
3. Tid 2: Ställ in Fyll färg till #0000FF (blå)
4. Färgen övergår smidigt genom spektrumet

Exempel: Kamerapaneffekt

Skapa filmiska pananimationer över stora bilder med duken som en viewport.

Hur det fungerar

När du har en bild större än din duk:

• canvas gränser fungerar som kameravisningsport
• Flytta bild kvar = kamerapannor rätt*
• Flytta bild upp = kamerapannor ner*

Skapa en Pan Animation

1. Ställ in dukstorlek till önskad utgång (t.ex. 1920×1080 för HD-video)
2. Importera en stor bild* (större än duk)
3. Placera bilden så startvyn är synlig
4. Create keyframes för att flytta bildpositionen

Row-by-Row Scanning Pattern

Att skanna över en bild i ett serpentinmönster:

Alternativ: Kamera följer

För dynamisk kamerarörelse som följer ett objekt:

1. Skapa en liten markör eller väg
2. Lägg till en camera_follows relation till markören
3. Animera markörpositionen
4. Visningen följer automatiskt

Tips