Penyunting Keyframe

Buat kompleks, secara bertahap animasi menggunakan keyframe.

Panel Timeline

Apa itu Keyframes?

Keyframe mendefinisikan nilai properti tertentu pada titik tertentu dalam waktu. PinePaper secara otomatis menganimasikan (interpolates) antara keyframe untuk membuat transisi halus.

Membuka Baris Waktu

Panel Timeline ada di bagian bawah layar. Jika tersembunyi:

1. Klik * * Tilikan * * di menu
2. Pilih * * Tampilkan Timeline * *

Membuat bingkai Kunci

Metode 1: Panel Properti

1. Pilih suatu objek
2. Set playhead ke waktu yang diinginkan
3. Ubah properti (posisi, skala, opasitas, warna)
4. Suatu bingkai kunci secara otomatis dibuat

Metode 2: Panel Waktu

1. Pilih suatu objek
2. Klik pada timeline pada waktu yang diinginkan
3. Klik * * Tambah Keyframe * * atau tekan K

Properti Dapat Dipakai Kunci

Menyunting Tombol

Memindahkan Keyframes

Tarik keyframe kiri atau kanan pada timeline untuk mengubah waktunya.

Nilai penyuntingan

1. Klik pada suatu keyframe untuk memilihnya
2. Ubah nilai dalam Panel Properti
3. Perubahan diterapkan ke keyframe

Menghapus bingkai Kunci

1. Pilih bingkai kunci
2. Tekan Delete atau klik -right.click Idiot * * Delete Keyframe * *

Menghapus Fungsi

Kontrol percepatan animasi antara keyframes:

Kendali Putar

Trim and Split

Setiap tombol-animasi item muncul pada timeline sebagai blok klip yang dapat diseret (batang indigo di belakang keyframe wajik). Blok klip memungkinkan Anda:

• • • Seret tubuh * * - geser seluruh animasi dalam waktu kanvas (timeOffset).
• • • Seret tepi kiri * * - trim awal dari sub-jangkauan yang dimainkan. Tepi kanan bar tetap berlabuh, pencocokan konvensi Premiere / Canva.
• • • Drag tepi kanan * * - trim akhir dari sub-range dimainkan, dijepit ke keyframe terakhir waktu.
• • • Tekan S * * dengan playhead di dalam klip - split di playhead. Bagian baru menjadi entri registry sendiri; chaining split menghasilkan potongan independen N + 1.

Ruas data

Blokir UI peta ke bidang ini pada item:

Di luar jendela kanvas klip item ini tersembunyi melalui visible=false - opasitas dibiarkan sendirian sehingga opasit-animasi keyframe masih bekerja di dalam jendela.

// 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

Pisah adalah salinan mendalam. Item Paper.js dikloning via Item.clone() (mempertahankan transformasi + gaya); susunan keyframe (keyframes, contentKeyframes, propertyEasings) adalah JSON round- tersandung sehingga setiap bagian memiliki datanya. Gabungan skala split linear: N split bytes N + 1 potongan independen, setiap masukan registry sendiri. Konsekuensi praktis:

• • • Per- piece easing * * - ubah sebuah keyframe tunggal easing pada satu potong; yang lain tidak tersentuh.
• • • Per-piece warna atau nilai interpolasi * * - edit sebuah keyframe 's fillColor, strokeColor, atau properti animasi pada satu bagian untuk menerapkan transformasi yang berbeda di atas jendelanya. Warna dan gradien interpolator yang ada menangani HSL / RGB lerp tidak berubah.
• • • Per-piece spatial path * * - spatialHandles tinggal di dalam keyframe individu, sehingga melengkung jalur animasi satu bagian tidak mempengaruhi yang lain.

Potongan tidak terlihat tumpang tindih selama jendela kanvas mereka tidak tumpang tindih. Seret setiap bagian ke kanvas-waktu baru posisi, memangkas lagi, atau split lebih lanjut.

Contoh: Fade In Animation

1. Pilih suatu butir teks
2. Pada saat ke-100: Set Opasitas ke 0
3. Pada saat 1 s: Set Opasitas ke 1
4. Set easing to * * ease Out * *
5. Tekan Play untuk pratinjau

Contoh: Transition Warna

1. Pilih suatu objek
2. Pada saat ke-100: Atur Warna Isi ke # FF0000 (merah)
3. Pada waktu 2s: Atur Warna Isi ke # 0000FF (biru)
4. Warna halus transisi melalui spektrum

Contoh: Efek pan Kamera

Buat animasi film melalui gambar besar menggunakan kanvas sebagai viewport.

¶ How It Works

Ketika Anda memiliki gambar yang lebih besar dari kanvas Anda:

• • • kanvas batas * * bertindak sebagai viewport kamera
• Memindahkan gambar * * kiri * * = panci kamera * * kanan * *
• Memindahkan gambar * * up * * = panci kamera * * turun * *

Membuat Animasi Pan

1. • • Set ukuran kanvas * * ke keluaran yang anda inginkan (mis, 1920 × 1080 untuk video HD)
2. • • Impor gambar besar * * (lebih besar dari kanvas)
3. • • Posisi gambar * * sehingga tampilan awal terlihat
4. • • Buat keyframes * * untuk memindahkan posisi gambar

Pola Memindai Row

Untuk memindai seluruh gambar dalam pola serpentine:

Alternatif: Mengikuti Kamera

Untuk pergerakan kamera dinamis yang mengikuti suatu objek:

1. Buat penanda kecil atau path
2. Tambahkan suatu hubungan camera_follows ke penanda
3. Animasikan posisi penanda
4. Titik lihat secara otomatis mengikuti

Tips