Editor klávesnice

Vytvořit komplexní, předem načasované animace pomocí klíčových rámců.

Co jsou Keyframes?

Klávesové rámce definují konkrétní hodnoty vlastnosti v určitých časových bodech. PinePaper automaticky oživuje (interpoluje) mezi klíčovými rámečky pro vytvoření hladkých přechodů.

Otevírání časové linie

Timeline panel je v dolní části obrazovky. Pokud je skrytá:

1. Klikněte * * Zobrazit * * v nabídce
2. Vyberte * * Zobrazit časovou osu * *

Vytvoření klíčových rámců

Metoda 1: Panel vlastností

1. Vybrat položku
2. Nastavit hlavičku na požadovaný čas
3. Změnit vlastnost (poloha, měřítko, opacita, barva)
4. Name

Metoda 2: Časový panel

1. Vybrat položku
2. Klikněte na časovou osu v požadovaném čase
3. Klepněte na tlačítko * * Přidat keyframe * * nebo stiskněte K

Klíčové vlastnosti

Editace klávesových rámců

Klávesové rámečky

Přetáhněte keyframe vlevo nebo vpravo na časové ose změnit svůj čas.

Úprava hodnot

1. Kliknutím na klávesu jej vyberte
2. Upravit hodnoty v panelu Vlastnosti
3. Změny platí pro tento klíčový rámec

Smazání klávesových rámců

1. Vybrat klíčový rámec
2. Stiskněte Delete nebo pravým tlačítkem myši → * * Smazat keyframe * *

Funkce easing

Ovládání zrychlení animací mezi klíčovými rámy:

Ovládání přehrávání

Trim a Split

Každý klíčový-animovaný prvek se objeví na časové ose jako draggable klip block (indigo bar za klávesnicí diamanty). Blok klipu vám umožní:

• • • Drag the body * * - posun celé animace v čase plátna (timeOffset).
• • • Drag the left edge * * - trim the start of the played sub- range. Pravý okraj baru zůstává ukotvený, odpovídající úmluvě Premiere / Canva.
• • • Drag the right edge * * - trim the end of the played sub- range, clapped to the last keyframe 's time.
• • • Stiskněte S * * s hrací hlavičkou uvnitř klipu - rozdělit na hrací hlavičce. Nový kus se stává vlastním zápisem do registru, řetězy se dělí na N + 1 nezávislé kusy.

Datová pole

Klip- block UI mapy na těchto polích na položku:

Mimo plátno klipu je položka skryta přes visible=false - opacita je ponechána sama, takže opacity- animační klíčové rámy stále pracují uvnitř okna.

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

What split gives you

Rozdělení je hluboká kopie. Prvek Paper.js je klonován přes Item.clone() (reserves transform + style); pole klíčového rámu (keyframes, contentKeyframes, propertyEasings) jsou JSON kruhový-zakopl, takže každý kus vlastní svá data. Řetězy rozdělují stupnice lineárně: N rozděluje Ø N + 1 nezávislé kusy, každý vlastní zápis registru. Praktické důsledky:

• • • Per- piece volnoběh * * - změna jednoho klávesového rámu easing na jednom kusu; ostatní jsou nedotčeny.
• • • Per- piece color or value interpolation * * - editace klávesy fillColor, strokeColor, nebo jakékoliv animované vlastnosti na jednom kusu pro použití jiné transformace přes jeho okno. Stávající barevné a gradientové interpolátory ovládají HSL / RGB lerp beze změny.
• • • Per- piece spatial path * * - spatialHandles live inside individual keyframes, so curving the path of one piece ‘s animation doesn’ t affect the other.

Kousky se vizuálně nepřekrývají, pokud se nepřekrývají jejich okna. Přetáhněte jakýkoliv kus do nové polohy kanvas- time, zastřihněte jej znovu, nebo jej dále rozdělte.

Příklad: Fade In Animation

1. Vybrat textovou položku
2. V čase 0s: Nastavte opacitu na 0
3. V čase 1s: Nastavte opacitu na 1
4. Nastavit uvolňující * * Ease Out * *
5. Stiskněte Přehrát na náhled

Příklad: Přechod barev

1. Vybrat položku
2. V čase 0s: Nastavte barvu na # FF0000 (červená)
3. V čase 2s: Nastavte barvu na # 0000FF (modrá)
4. Barva hladce přechází spektrem

Příklad: Camera Pan Effect

Vytvořte filmové animace přes velké obrázky pomocí plátna jako pohledu.

Jak to funguje

Když máte obraz větší než vaše plátno:

• The * * plain limits * * act as the camera view
• Pohybující se * * obrázek vlevo * * = objektiv * * vpravo * *
• Přesouvám obraz nahoru

Vytvoření Pan Animace

1. • • Nastavte velikost plátna * * na požadovaný výstup (např. 1920 × 1080 pro HD video)
2. • • Importovat velký obrázek * * (větší než plátno)
3. • • Poloha obrázku * * takže výchozí pohled je viditelný
4. • • Vytvořit klávesové rámce * * pro pohyb pozice obrázku

Name

Chcete-li skenovat přes obrázek v serpentine vzor:

Alternativa: Kamery

Pro dynamický pohyb kamery, který následuje po objektu:

1. Vytvořit malou značku nebo cestu
2. Přidat vztah camera_follows k značce
3. Animujte pozici značky
4. Náhled automaticky následuje

Tipy