Keyframe editor

Opret komplekse, præcist timet animationer ved hjælp af nøglerammer.

Hvad er Keyframes?

Nøglerammer definerer specifikke ejendomsværdier på bestemte tidspunkter. PinePaper animerer automatisk (interpolerer) mellem nøglerammer for at skabe glatte overgange.

Åbning af tidslinjen

Tidslinjen panel er i bunden af skærmen. Hvis skjult:

1. Klik på * * Vis * * i menuen
2. Vælg * * Vis tidslinje * *

Oprettelse af tastaturer

Metode 1: Egenskaber Panel

1. Vælg et element
2. Sæt playhead til den ønskede tid
3. Ændr en egenskab (position, skala, uklarhed, farve)
4. En keyframe oprettes automatisk

Metode 2: Tidsplan

1. Vælg et element
2. Klik på tidslinjen på det ønskede tidspunkt
3. Klik på * * Tilføj keyframe * * eller tryk på K

Tasteegenskaber

Redigér tastaturer

Flytning af tastaturer

Træk en nøglering til venstre eller højre på tidslinjen for at ændre dens tid.

Redigér værdier

1. Klik på en keyframe for at vælge det
2. Ændr værdier i egenskabspanelet
3. Ændringer gælder for denne keyframe

Sletning af tastaturer

1. Vælg nøgleramme
2. Tryk på Delete eller højreklik → * * Slet keyframe * *

Letter funktioner

Styr accelerationen af animationer mellem nøglerammer:

Afspilningskontrol

Trim og split

Hver nøgleramme-animerede element vises på tidslinjen som en Draggable clip blok (indigo bar bag keyframe diamanter). Clip blokken lader dig:

• • • Træk kroppen * * - skift hele animationen i lærred tid (timeOffset).
• • • Træk venstre kant * * - trim starten af det spillede underområde. Den højre kant af baren forbliver forankret, matcher Premiere / Canva konventionen.
• • • Træk højre kant * * - trim slutningen af det spillede sub- område, fastspændt til den sidste nøglering tid.
• • • Tryk på S * * med playhead inde i klip - split på playhead. Det nye stykke bliver sin egen registreringsdatabase; chaining splits producerer N + 1 uafhængige stykker.

Datafelter

Klippeblokken UI kort til disse felter på elementet:

Uden for clips lærred vindue er varen skjult via visible=false - uklarhed er efterladt alene, så opacity- animerende nøglerammer stadig arbejde inde 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 } },
  ],
});

Hvad split giver dig

Det er en dyb kopi. Paper.js elementet klones via Item.clone() (bevarer transformere + stil); nøgleframe arrays (keyframes, contentKeyframes, propertyEasings) er JSON rund- tripped så hvert stykke ejer sine data. Chaining splits skalaer lineært: N splits szán + 1 uafhængige stykker, hver sin post i registreringsdatabasen. Praktiske konsekvenser:

• • • Per- stykke lempelse * * - ændre en enkelt nøglering easing på et stykke; de andre er uberørt.
• • • Per- piece farve eller værdi interpolation * * - redigere en keyframe fillColor, strokeColor, eller enhver animeret egenskab på et stykke for at anvende en anden transformation over sit vindue. Den eksisterende farve og gradient interpolator håndtag HSL / RGB lerp uændret.
• • • Per- piece rumlige sti * * - spatialHandles lever inde i individuelle nøglerammer, så curving stien til et stykke animation påvirker ikke de andre.

Stykker ikke visuelt overlapper, så længe deres lærred vinduer ikke overlapper. Træk ethvert stykke til en ny canvas- time position, trim det igen, eller split det yderligere.

Eksempel: falmer i animation

1. Vælg et tekstelement
2. Til tiden: Sæt Opacity til 0
3. Til tiden 1s: Sæt ugennemsigtighed til 1
4. Sæt lempe til * * lette ud * *
5. Tryk på Spil for at få vist

Eksempel: Farveovergang

1. Vælg et element
2. Til tiden: Sæt fyldningsfarve til # FF0000 (rød)
3. Til tiden 2s: Sæt udfyldningsfarve til # 0000FF (blå)
4. Farven glidende overgange gennem spektret

Eksempel: Kamerapaneffekt

Opret filmiske pan animationer på tværs af store billeder ved hjælp af lærred som en viewport.

Sådan virker det

Når du har et billede større end dit lærred:

• • • lærred grænser * * fungerer som kameraet viewport
• Flytning af * * billedet til venstre * * = kamerapander * * højre * *
• Flytning af * * billedet op * * = kamerapander * * ned * *

Oprettelse af en pan- animation

1. • • Sæt lærred størrelse * * til din ønskede output (fx, 1920 × 1080 for HD video)
2. • • Importer et stort billede * * (større end lærred)
3. • • Placer billedet * * så startvisningen er synlig
4. • • Opret tastaturer * * for at flytte billedets position

Row-by-Row Scanning Mønster

For at scanne på tværs af et billede i et serpentinmønster:

Alternativ: Kameramapper

For dynamisk kamerabevægelse, der følger et objekt:

1. Opret en lille markør eller sti
2. Tilføj en camera_follows relation til markøren
3. Animér markørpositionen
4. Visningen følger automatisk

Tips