Nøkkelrammeredigering

Opprett komplekse, nøyaktig tidsstyrte animasjoner ved hjelp av nøkkelrammer.

Hva er Keyframes?

Nøkkelrammer definerer bestemte eiendomsverdier på bestemte tidspunkter. PinePaper animerer automatisk (interpolerer) mellom nøkkelrammer for å skape glatte overganger.

Åpning av tidslinjen

Tidslinjepanelet ligger nederst på skjermen. Hvis skjult:

1. Klikk Vis i menyen
2. Vis tidslinje

Oppretter nøkkelrammer

Metode 1: Egenskaper Panel

1. Velg et element
2. Sett playhead til ønsket tid
3. Endre egenskap (posisjon, skala, åpenhet, farge)
4. En nøkkelramme opprettes automatisk

Metode 2: Tidslinjepanel

1. Velg et element
2. Klikk på tidslinjen på ønsket tidspunkt
3. Klikk Legg til Keyframe eller trykk K

Nøkkelrammelige egenskaper

Redigerer nøkkelrammer

Bevegelse av nøkkelrammer

Dra en nøkkelramme til venstre eller høyre på tidslinjen for å endre tiden.

Redigere verdier

1. Klikk på en nøkkelramme for å velge den
2. Endre verdier i egenskapspanelet
3. Endringer gjelder for den nøkkelrammen

Sletter nøkkelrammer

1. Velg nøkkelrammen
2. Trykk Delete eller høyreklikk → Slett Keyframe

Easing funksjoner

Styr akselerasjonen av animasjoner mellom nøkkelrammer:

Avspillingskontroll

Trim og Split

Hver nøkkelrammeanimert element vises på tidslinjen som en drabar klippblokk (den indigo-linjen bak tasterammediamantene). Klipblokken lar deg:

• Dra kroppen — skift hele animasjonen i lerretstid (timeOffset).
• Dra venstre kant - trim starten på den spilte delområdet. Høyre kant av baren forblir forankret, samsvarer med Premiere/Canva-konvensjonen.
• Dra høyre kant - trim enden av den spilte underområdet, klemmet til siste keyframes tid.
• Press S med playhead inne i klippet — delt på playhead. Det nye stykket blir sin egen registeroppføring; kjede splits produserer N+1 uavhengige stykker.

Datafelt

Klip-blokk UI-kart til disse feltene på elementet:

Utenfor klippets lerretvindu er gjenstanden skjult via visible=false - åpenhet er igjen alene så dekkevne-animerende keyframes fortsatt fungerer inne i vinduet.

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

Hvilken splittelse gir deg

Splittingen er en dyp kopi. Paper.js-elementet klones via Item.clone() (beskytter transformer + stil); nøkkelrammer (keyframes, contentKeyframes, propertyEasings) er JSON rundstrippet så hvert stykke eier sine data. Kjelding splits skalerer lineært: N deler ⇒ N + 1 uavhengige stykker, hver sin egen registeroppføring. Praktiske konsekvenser:

• Per-piece easing - endre en enkelt nøkkelramme easing på ett stykke; de andre er urørt.
• Per-piece farge eller verdi interpolasjon - rediger en keyframes fillColor, strokeColor eller noen animert egenskap på ett stykke for å bruke en annen transformasjon over vinduet. Den eksisterende farge og gradient interpolatorer håndtere HSL/RGB lerp uendret.
• Per-piece romlig bane - spatialHandles bor inne i individuelle nøkkelrammer, så curving banen til ett stykkes animasjon påvirker ikke de andre.

Biter ikke visuelt overlapper så lenge lerretvinduene ikke overlapper. Dra et stykke til en ny lerret-tid posisjon, trimme det igjen, eller dele det videre.

Eksempel: Fade i animasjon

1. Velg et tekstelement
2. På tide 0s: Sett åpenhet til 0
3. På tid 1s: Sett åpenhet til 1
4. Sett lett på Ease Out
5. Trykk Spille for å forhåndsvise

Eksempel: Fargeovergang

1. Velg et element
2. På tid 0s: Sett Fyllfarge til #FF0000 (rød)
3. På tide 2s: Sett Fyll farge til #0000FF (blå)
4. Fargen overganger jevnt gjennom spekteret

Eksempel: Kamera Paneffekt

Lag biografiske pan animasjoner på tvers av store bilder ved hjelp av lerret som utsikt.

Hvordan det fungerer

Når du har et bilde større enn lerretet ditt:

• • Canvas grenser** fungerer som kameravisningen
• Flytte bildet venstre = kamerapanner høyre
• Flytte bildet opp**= kamerapannerdown

Opprette en Pan Animation

1. Sett lerretsstørrelse* til ønsket utgang (f.eks. 1920×1080 for HD-video)
2. Importer et stort bilde (større enn lerret)
3. Posisjon av bildet, så startvisningen er synlig
4. Opprett tasterammer for å flytte bildeposisjonen

Rad-for-Row skannemønster

For å skanne over et bilde i et serpentinmønster:

Alternativ: Kamera følger

For dynamisk kamerabevegelse som følger et objekt:

1. Opprett en liten markør eller bane
2. Legg til et camera_follows-forhold til markøren
3. Animer markørposisjonen
4. Synsporten følger automatisk

Tips