Edytor klawiszy

Tworzenie złożonych, precyzyjnie czasowych animacji przy użyciu klatek.

Co to są klawisze?

Klawiatura definiuje określone wartości właściwości w określonych punktach czasu. PinePaper automatycznie animuje (interpolates) pomiędzy klatkami klawiszy, aby tworzyć gładkie przejścia.

Otwarcie terminarza

Panel czasowy znajduje się na dole ekranu. Jeśli ukryte:

1. Kliknij * * Widok * * w menu
2. Wybierz * * Pokaż czas * *

Tworzenie klawiszy

Metoda 1: Panel właściwości

1. Wybierz element
2. Ustaw głowicę na żądany czas
3. Zmiana właściwości (pozycja, skala, nieprzezroczystość, kolor)
4. Klawiatura jest automatycznie tworzona

Metoda 2: Panel czasowy

1. Wybierz element
2. Kliknij na linię czasową w żądanym czasie
3. Kliknij * * Dodaj klawisz * * lub naciśnij K

Właściwości klawiszowe

Edycja klawiszy

Przenoszenie klawiszy

Przeciągnij klawisz w lewo lub prawo na osi czasu, aby zmienić swój czas.

Edycja wartości

1. Kliknij klawisz, aby go wybrać
2. Zmień wartości w panelu właściwości
3. Zmiany dotyczą tej ramki klawiszowej

Usuwanie klawiszy

1. Wybierz klawisz
2. Naciśnij Delete lub kliknij prawym przyciskiem myszy → * * Usuń klawisz * *

Funkcje ułatwiające

Kontrola przyspieszenia animacji między klatkami:

Kontrola odtwarzania

Tim i Split

Każdy element animowany za pomocą klawiszy pojawia się na osi czasu jako przeciągalny blok klipu (pasek indygo za diamentami za klasą klawiszową). Blok klipu pozwala na:

• • • Przeciągnij ciało * * - przesuń całą animację w czasie płótna (timeOffset).
• • • Przeciągnij lewą krawędź * * - przytnij początek odtwarzanego podzakresu. Prawa krawędź paska pozostaje zakotwiczona, co odpowiada konwencji Premiere / Canva.
• • • Przeciągnij prawą krawędź * * - przytnij koniec odtwarzanego podzakresu, przyciśnięty do czasu ostatniej ramki klawiszowej.
• • • Naciśnij S * * z playhead wewnątrz klipu - podzielony na playhead. Nowy kawałek staje się własnym wpisem do rejestru; łańcuchy łańcuchowe tworzą N + 1 niezależnych sztuk.

Pola danych

Klip-block UI maps to these fields on the item:

Poza oknem płótna klipu element jest ukryty przez visible=false - nieprzezroczystość jest pozostawiona sama, tak że wewnątrz okna nadal działają nieprzezroczyste klawisze animujące.

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

Co cię dzieli

Podział jest głęboką kopią. Element Paper.js jest sklonowany za pośrednictwem Item.clone() (conserves transform + style); tablice klawiszowe (keyframes, contentKeyframes, propertyEasings) to JSON, więc każdy element posiada swoje dane. Łańcuchowe łuski liniowo: N rozdziela niezalezne kawałki RRN + 1, z których każdy jest wpisany do rejestru. Konsekwencje praktyczne:

• • • Per- piece leasing * * - zmiana jednego klawisza easing na jednym kawałku; pozostałe są nietknięte.
• • • Per- piece color or value interpolation * * - edytuj klawisz fillColor, strokeColor lub jakąkolwiek animowaną właściwość na jednym kawałku, aby zastosować inną transformację przez okno. Istniejące interpolatory kolorów i gradientów obsługują HSL / RGB bez zmian.
• • • Per- piece space path * * - spatialHandles live inside dividual keyframes, so curving the path of one piece 's animation does not after the other.

Kawałki nie pokrywają się wizualnie, dopóki ich okna płótna się nie pokrywają. Przeciągnij dowolny kawałek do nowej pozycji czasu płótna, przyciąć go ponownie, lub podzielić go dalej.

Przykład: Fade In Animation

1. Wybierz pozycję tekstową
2. W czasie 0s: Ustaw nieprzezroczystość na 0
3. W czasie 1s: Ustaw nieprzezroczystość na 1
4. Ustaw złagodzenie do * * Ease Out * *
5. Naciśnij Włącz do podglądu

Przykład: Przejście kolorów

1. Wybierz element
2. W czasie 0s: Ustaw kolor wypełnienia na # FF0000 (czerwony)
3. W czasie 2s: Ustaw kolor wypełnienia na # 0000FF (niebieski)
4. Kolor płynnie przechodzi przez widmo

Przykład: Efekt kamery Pan

Tworzy animacje filmowe na dużych obrazach, używając płótna jako portu widokowego.

Jak to działa

Kiedy masz obraz większy niż płótno:

• • • Granice płótna * * działają jak widok kamery
• Przesunięcie obrazu * * w lewo * * = panele kamer * * prawo * *
• Przesunięcie obrazu w górę

Tworzenie animacji Pan

1. • • Ustaw rozmiar płótna * * do pożądanego wyjścia (np. 1920 × 1080 dla wideo HD)
2. • • Importuj duży obraz * * (większy niż płótno)
3. • • Położenie obrazu * * tak, aby widok wyjściowy był widoczny
4. • • Utwórz klawisz * * aby przesunąć pozycję obrazu

Wzór skanowania wiersza

Aby zeskanować obraz we wzorze serpentyny:

Alternatywa: Follows kamery

Dla dynamicznego ruchu kamery, który następuje po obiekcie:

1. Utwórz mały znacznik lub ścieżkę
2. Dodaj stosunek camera_follows do znacznika
3. Animować pozycję znacznika
4. Widok automatycznie następuje

Wskazówki