Editor tastatură

Creați animații complexe, exact cronometrate folosind taste-frame.

Ce sunt keyframes?

Tastele definesc valori specifice ale proprietății la anumite momente din timp. PinePaper animează automat (interpolați) între taste pentru a crea tranziții netede.

Deschiderea liniei temporale

Panoul Cronologie este în partea de jos a ecranului. Dacă este ascuns:

1. Faceți clic pe View în meniu
2. Selectează ** Arată cronologia

Crearea de taste

Metoda 1: Panou de proprietăți

1. Alegeți un element
2. Setează playhead-ul la timpul dorit
3. Schimba o proprietate (pozitie, scara, opacitate, culoare)
4. Un keyframe este creat automat

Metoda 2: Panoul temporal

1. Alegeți un element
2. Faceţi clic pe cronologie la momentul dorit
3. Click Adăugaţi Keyframe sau apăsaţi K

Proprietăți keyframeable

Editare taste

Mutare taste

Trageți un keyframe stânga sau dreapta pe cronologie pentru a schimba timpul său.

Editare valori

1. Click pe un keyframe pentru a selecta
2. Modificarea valorilor în panoul Proprietăți
3. Modificările se aplică acestui cadru de chei

Ștergerea cheilor

1. Alegeți tastatura
2. Apăsați Delete sau click dreapta → Delete Keyframe

Funcții de relaxare

Controlul accelerării animațiilor între taste:

Controlează redarea

Trim și Split

Fiecare element keyframe-animate apare pe cronologie ca un bloc clip glisabil (barul indigo din spatele diamantelor keyframe). Blocul de clipuri vă permite:

• Trage corpul .
• Trageți marginea stângă Marginea dreaptă a barei rămâne ancorată, potrivindu-se cu Convenţia Premiere/Canva.
• Trage marginea dreapta .
• Press S cu playhead-ul în interiorul clipului Noua piesă devine propria intrare în registru; scindarea în lanț produce piese independente N+1.

Câmpuri de date

Hărțile UI clip-bloc la aceste câmpuri de pe element:

În afara ferestrei de pânză clipului elementul este ascuns prin visible=false .

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

Ce-ţi dă despărţirea

Împărţirea e o copie profundă. Produsul Paper.js este clonat prin Item.clone() (conserve transforma + stil); matricele de keyframe (keyframes, contentKeyframes, propertyEasings) sunt JSON rundate astfel încât fiecare piesă deține datele sale. Scalele de scale de lanturi liniare: N se divide Consecinţe practice:

• Per-piece easing .
• Per-piece color or value (per-piese) Editează un keyframe’s fillColor, strokeColor, sau orice proprietate animată pe o singură piesă pentru a aplica o transformare diferită pe fereastra sa. Interpolatorii de culoare și gradient existente manipulează HSL/RGB lerp nemodificat.
• Per-piece spatial way .

Piesele nu se suprapun vizual atâta timp cât ferestrele lor nu se suprapun. Trageți orice piesă într-o nouă poziție de timp panza, tundeți-l din nou, sau împărțiți-l mai departe.

Exemplu: Fade In Animation

1. Alegeți un element text
2. La momentul 0s: Set Opacity to 0
3. La momentul 1s: Set Opacity to 1
4. Set easing to Ease Out
5. Apăsați Redare pentru previzualizare

Exemplu: Tranziția culorilor

1. Alegeți un element
2. La momentul 0s: Setați culoarea de umplere la #FF0000 (roșu)
3. La momentul 2s: Setați culoarea de umplere la #0000FF (albastru)
4. Culoarea trece lin prin spectru

Exemplu: Camera Pan Effect

Creați animații cinematice pan pe imagini mari folosind panza ca un viewport.

Cum funcţionează

Când aveți o imagine mai mare decât panza:

• The canvas bounds act as the camera sightport
• Mutarea imagine stânga=cameră de luat vederi dreapta
• Mutarea imaginea în sus = camera de luat vederi jos

Crearea unei animaţii pan

1. @ info: whatsthis
2. Importaţi o imagine mare (mai mare decât panza)
3. Poziție imaginea astfel încât vizualizarea de pornire este vizibilă
4. Creați tastele pentru a muta poziția imaginii

Model de scanare rând cu rând

Pentru a scana peste o imagine într-un model serpentine:

Alternativă: Camera urmăreşte

Pentru mișcarea dinamică a camerei care urmează unui obiect:

1. Creează un mic marker sau cale
2. Adaugă o relație camera_follows la marker
3. Animează poziția markerului
4. Portul de vizualizare urmează automat

Sfaturi