Penyunting Keyframe

Animasi yang rumit dan tepat waktu menggunakan bingkai kunci.

Apa itu Keyframes?

Frames Keyframes mendefinisikan nilai properti spesifik pada titik tertentu dalam waktu. PinePaper secara otomatis animasi (interpolates) antara bingkai kunci untuk menciptakan transisi yang lancar.

Membuka Timeline

Panel Timeline berada di bagian bawah layar. Jika tersembunyi:

1. Klik Lihat pada menu
2. Pilih Show Timeline

Mencipta Bingkai Kunci

Metode Metode 1: Panel Properti

1. UINO Pilih item
2. ♪ Set playhead ke waktu yang diinginkan ♪
3. Woadon Mengubah properti (posisi, skala, kelegapan, warna)
4. Bingkai kunci dibuat secara otomatis

Metode Metode: Panel Garis Waktu

1. UINO Pilih item
2. Klik pada garis waktu pada waktu yang diinginkan
3. Klik*Tambah Bingkai Kunci atau tekan K

Ciri-ciri Terbingkai Kunci

Mengedit Bingkai Kunci

Memindahkan Bingkai Kunci

Buat bingkai kunci kiri atau kanan pada garis waktu untuk mengubah waktunya.

Nilai Pengubahsaizan

1. Klik pada bingkai kunci untuk memilihnya
2. ****** ******** ******* ******* ****** ***** **** **** *** **** *** *** ** ** *** ** **) ** ** ** ** ** ** ** ** ** * ** * ** ** ** ** ** ** * ** ** ** ** ** * * * ** * ** ** * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *) * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *)
3. Frame kunci tersebut diterapkan oleh perubahan-perubahan AFAINA pada bingkai kunci tersebut

Memadam Bingkai Kunci

1. Pilih bingkai kunci
2. → Hapus Bingkai Kunci

Fungsi Pengukuran Pustaka

Kontrol akselerasi animasi antara bingkai kunci:

Kontrol Main Balik

Amerika Serikat

Setiap butir kunci frame-animated muncul pada garis waktu sebagai blok klip yang dapat diseret (bar indigo di belakang berlian bingkai kunci). Klip blok memungkinkan Anda:

• *Nagret body — geser seluruh animasi dalam waktu kanvas (timeOffset).
• **Nagage kiri — memangkas awal sub-range yang dimainkan. Sisi kanan bar tetap berlabuh, cocok dengan konvensi Premiere/Canva.
• **Drag edge kanan — memangkas akhir sub-range yang dimainkan, dijepit ke waktu bingkai kunci terakhir.
• *******XQQS dengan playhead di dalam klip — dipisah di playhead. Karya baru tersebut menjadi entri registry sendiri; pemisahan rantai menghasilkan keping independen N+1.

Bidang data

Klip-blok UI peta ke bidang ini pada item:

Di luar jendela kanvas klip, barang itu disembunyikan melalui visible=false — kelegapan dibiarkan sendiri sehingga bingkai kunci yang bermandikan kelegapan 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 } },
  ],
});

Apa yang dibagi memberi Anda

Terbelah adalah salinan yang dalam. Butiran Paper.js yang diklonkan melalui Item.clone() (dipreservasi transform + style); susunan bingkai kunci (keyframes, contentKeyframes, propertyEasings) adalah JSON round-tripped sehingga setiap bagian memiliki datanya. ⇒ N+1 keping independen, masing-masing entri registry sendiri. Konsekuensi praktis:

• ***Per-piece easing — ubah easing tunggal bingkai kunci pada satu bagian; yang lain tidak tersentuh.
• **Per-piece warna atau nilai interpolasi — sunting keyframe’s fillColor, strokeColor, atau properti animasi apapun dalam satu bagian untuk menerapkan transformasi berbeda atas jendelanya. Füphne yang telah ada, warna dan gradien interpolator, menangani HSL/RGB lerp tidak berubah.
• **Per-piece jalur spasial — spatialHandles hidup di dalam bingkai kunci individu, sehingga melengkungkan jalur animasi satu keping tidak mempengaruhi yang lain.

Potongan tidak secara visual tumpang tindih selama jendela kanvas mereka tidak tumpang tindih. Tarik potongan apapun ke posisi baru kanvas-waktu, trim lagi, atau bagi lebih jauh.

Contoh: Pudar Dalam Animasi

1. UINO Pilih item teks
2. Kelegapan ke 0
3. Waktu 1s: Tetapkan Kelegapan ke 1
4. Ease Out*
5. Memutar

Contoh: Transisi Warna

1. UINO Pilih item
2. Pada waktu 0s: Tetapkan Warna Isi ke #FF0000 (merah)
3. Pada waktu 2s: Tetapkan Warna Isi ke #0000FF (biru)
4. Warna yang mulus transisi melalui spektrum

Contoh: Efek Pan Kamera

Biksu membuat animasi pan sinematik di seluruh gambar besar menggunakan kanvas sebagai viewport.

Cara Kerjanya

Ketika Anda memiliki gambar yang lebih besar dari kanvas Anda:

• canvas bounds bertindak sebagai port pandang kamera
• *****Pindah*kiri= kamera pan kanan

• ---

Menciptakan Animasi Pan

1. Setkan ukuran kanvas ke keluaran yang diinginkan (misalnya, 1920×1080 untuk HD video)
2. *Impor gambar besar (lebih besar dari kanvas)
3. **Posisi gambar sehingga tampilan awal tampak
4. *Cipta bingkai kunci untuk memindahkan posisi gambar

Corak Pengimbasan Baris-oleh-Row

Untuk memindai gambar dengan pola ular:

Alternatif: Ikuti Kamera

Untuk pergerakan kamera dinamis yang mengikuti objek:

1. Buat penanda atau tapak kecil
2. Tambah hubungan camera_follows ke penanda
3. Animasikan posisi penanda
4. Pelabuhan pemandangan secara otomatis mengikuti

Tips