Keyframe Editor

Karmaşık, tam zamanlı animasyonlar anahtar çerçeveler kullanarak oluşturun.

Keyframes nedir?

Anahtar çerçeveler, belirli noktalarda belirli mülk değerlerini zamanında tanımlar. PinePaper, düzgün geçişler oluşturmak için anahtar çerçeveler arasında otomatik olarak animates (interpolates).

Zamanı açın

Timeline paneli ekranın dibindedir. Gizli:

1. Click View in the menu
2. Show Timeline

Keyframes oluşturmak

Yöntem 1: Özellikler Panel

1. Bir öğe seçin
2. İstenen zamana kadar playhead ayarlayın
3. Bir mülk (konuş, ölçek, opaklık, renk) değiştirin
4. Bir anahtar çerçeve otomatik olarak oluşturulur

Yöntem 2: Zamanlı Panel

1. Bir öğe seçin
2. İstenen zamanda zaman çizelgesine tıklayın
3. Click Add Keyframe veya basın K

Anahtarlı Özellikler

Anahtar çerçeveleri analiz etmek

Move Keyframes

Zamanını değiştirmek için zaman çizelgesinde bir anahtar pencere sola ya da sağın.

Değerleri Tasarlamak

1. Bunu seçmek için anahtar bir çerçeve üzerinde tıklayın
2. Özellikler Panelinde Değerleri Değiştirin
3. Değişiklikler bu anahtar çerçeveye uygulanır

Keyframes

1. Anahtarı seçin
2. Basın Delete veya sağ tıklama → Delete Keyframe

Easing Functions

Anahtar çerçeveler arasındaki animasyonların hızını kontrol edin:

Playback Controls

Trim ve Split

Her anahtar çerçeveli öğe, zaman çizelgesine sürükleyici bir klip blok olarak görünür (kırık elmasların arkasındaki indigo bar). Saç bloğu size izin verir:

• Drag vücut - tüm animasyonu tuval zamanında değiştirir (timeOffset).
• Drag sol kenar - çalınan alt ayarın başlangıcını kes. Barın sağ kenarı sabit kalır, Premiere/Canva kongresini eşleştirin.
• Drag doğru kenar - oynanmış alt ayarın sonunu, son anahtar çerçevenin zamanını kaldırdı.
• Basın S, kliplerin içinde oyun başlığıyla – oyun başında bölün. Yeni parça kendi kayıt girişi haline gelir; zincirleme bölmeleri N+1 bağımsız parçalar üretir.

Data fields

Üründeki bu alanlara yönelik klipler UI haritaları:

Saç tuval penceresinin dışında öğe visible=false ile gizlidir - opaklık yalnız bırakılır, böylece opaklık-animating keyframes hala pencerenin içinde çalışır.

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

Hangi bölünme size verir

Bölünme derin bir kopyadır. Paper.js öğe Item.clone() ile klonlanır (preserves transform + stili); anahtar çerçeve dizileri (keyframes, contentKeyframes, propertyEasings) JSON yuvarlak-trikedilir, böylece her parça kendi verilerine sahiptir. Zincirli bölmeler lineer olarak değişir: N bölünmüşler 346 N + bağımsız parçalar, her bir kendi kayıt girişi. Pratik sonuçlar:

• Per-part easing - tek bir anahtar çerçevenin easing’sini tek bir parçada değiştirin; diğerleri buna aykırıdır.
• Per parça rengi veya değeri interpolasyon - anahtar bir çerçevenin fillColor, strokeColor veya pencere üzerindeki farklı bir dönüşümü uygulamak için bir parça üzerinde animasyonlu mülk. Mevcut renk ve gradient interpolators HSL/RGB lerp değişmeden çalışır.
• Per- parça uzaysal yolu - spatialHandles bireysel anahtar çerçeveler içinde yaşar, bu yüzden bir parçanın animasyonunu tedavi etmek başkalarını etkilemez.

Parçalar, tuval pencerelerinin çakışmadığı sürece görsel olarak örtüşmüyor. Herhangi bir parça yeni bir tuval-zaman pozisyonuna sürükleyin veya daha fazla bölün.

Örnek: Fade In Animation

1. Bir metin öğesi seçin
2. Saat 0s: Opakity’yi 0’a ayarlayın
3. 1’de: Opakity’yi 1’e ayarlayın
4. Ease Out
5. Reklam Play to önizleme

Örnek: Renk Geçişi

1. Bir öğe seçin
2. Saat 0’larda: #FF0000’a Renk Oluşturun (kırmızı)
3. Zaman 2’lerde: Renkleri #0000FF (mavi)
4. Renk spektrumu spektrum yoluyla sorunsuz geçişler

Örnek: Kamera Pan Etkisi

Tuvali bir viewport olarak kullanan büyük görüntülerde sinematik pan animasyonlar oluşturun.

Nasıl çalışır

Tuvalinizden daha büyük bir görüntüniz olduğunda:

• canvas sınırları kamera görünümü olarak hareket eder
• görüntüyü hareket et = kamera pansright**= kamera pans**
• image up = kamera pans down

Pan Animation Oluşturma

1. Set tuval büyüklüğü arzulanan çıktınıza (örneğin, 1920× HD video için × 1080)
2. Import a large image (larger Than tuval)
3. ** Görüntüyü kabul et - böylece başlangıç görüşü görünür
4. Anahtar çerçeveler görüntü pozisyonu taşımak için

Row-by-Row Taraması

Bir yılan modelinde bir görüntüyü taramak:

Alternatif: Kamera Takipleri

Bir nesneyi takip eden dinamik kamera hareketi için:

1. Küçük bir işaret veya yol oluşturun
2. İşaretleyici ile ilgili bir camera_follows ekleyin
3. Anahtarlama pozisyonu
4. Görünüm otomatik olarak takip edilir

İpuçları