Επεξεργαστής πλαισίου κλειδιού

Δημιουργία σύνθετων, με ακρίβεια χρονομετρημένων κινουμένων σχεδίων με τη χρήση πλαισίων πλήκτρων.

Τι είναι το Keyframes?

Τα πλαίσια πλήκτρων καθορίζουν συγκεκριμένες τιμές ιδιοκτησίας σε συγκεκριμένα χρονικά σημεία. Το PinePaper ενεργοποιεί αυτόματα (ενεργεί) μεταξύ των πλαισίων πλήκτρων για να δημιουργήσει ομαλές μεταβάσεις.

Άνοιγμα της Χρονικής Γραμμής

Ο πίνακας χρονοδιαγραμμάτων βρίσκεται στο κάτω μέρος της οθόνης. Αν είναι κρυμμένο:

1. Κλικ *View στο μενού
2. Επιλογή Εμφάνιση χρονοδιαγράμματος

Δημιουργία πλαισίων κλειδιών

Μέθοδος 1: Πίνακας ιδιοτήτων

1. Επιλογή αντικειμένου
2. Ορισμός του playhead στον επιθυμητό χρόνο
3. Αλλαγή ιδιότητας (θέση, κλίμακα, αδιαφάνεια, χρώμα)
4. Ένα πλαίσιο κλειδιού δημιουργείται αυτόματα

Μέθοδος 2: Πίνακας χρονοδιαγραμμάτων

1. Επιλογή αντικειμένου
2. Κάντε κλικ στο χρονοδιάγραμμα κατά την επιθυμητή ώρα
3. Κάντε κλικ Add Keyframe ή πατήστε K

Ιδιότητες πλαισίου κλειδιού

Επεξεργασία πλαισίων κλειδιών

Μετακίνηση πλαισίων πλήκτρων

Σύρετε ένα πληκτρολόγιο αριστερά ή δεξιά στο χρονοδιάγραμμα για να αλλάξετε το χρόνο του.

Επεξεργασία τιμών

1. Κάντε κλικ σε ένα πληκτρολόγιο για να το επιλέξετε
2. Τροποποίηση τιμών στον πίνακα ιδιοτήτων
3. Οι αλλαγές εφαρμόζονται σε αυτό το πλαίσιο κλειδιού

Διαγραφή πλαισίων κλειδιών

1. Επιλέξτε το πλαίσιο κλειδιού
2. Πατήστε Delete ή δεξί κλικ → Διαγραφή Keyframe

Εύκολα Συναρτήσεις

Έλεγχος της επιτάχυνσης των κινουμένων σχεδίων μεταξύ των πλαισίων πλήκτρων:

Έλεγχος αναπαραγωγής

Περικοπή και διαχωρισμός

Κάθε στοιχείο που ενεργοποιείται με κλειδί εμφανίζεται στο χρονοδιάγραμμα ως ένα draggable clip block (η μπάρα indigo πίσω από τα διαμάντια keyframe). Το μπλοκ του κλιπ σου επιτρέπει:

• Drag το σώμα — μετατοπίστε ολόκληρο το animation σε χρόνο καμβά (timeOffset).
• Τραβήξτε το αριστερό άκρο — κόψτε την αρχή του παιγνιδιού. Η δεξιά άκρη του μπαρ παραμένει αγκυροβολημένη, που ταιριάζει με το συνέδριο Πρεμιέρα/Κάνβα.
• Τραβήξτε το δεξί άκρο — κόψτε το τέλος του παιγνιδιού υπο-εύρος, σφιγκτήρα στο τελευταίο χρόνο του πληκτρολογίου.
• Πατήστε S με το playhead μέσα στο κλιπ — χωριστείτε στο playhead. Το νέο κομμάτι γίνεται το δικό του ληξιαρχικό ληξιαρχικό ληξιαρχικό ληξιαρχείο.

Πεδία δεδομένων

Το clip-block UI χάρτες σε αυτά τα πεδία στο στοιχείο:

Έξω από το παράθυρο του καμβά του κλιπ το αντικείμενο είναι κρυμμένο μέσω 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 } },
  ],
});

Τι σου δίνει η μοιρασιά

Η διάσπαση είναι ένα βαθύ αντίγραφο. Το αντικείμενο Paper.js κλωνοποιείται μέσω Item.clone() (διατηρεί το transform + style)· οι συστοιχίες πληκτρολογίου (keyframes, contentKeyframes, propertyEasings) είναι JSON στρογγυλό-γεγονός έτσι ώστε κάθε κομμάτι να κατέχει τα δεδομένα του. Η αλυσίδα διασπά λέπια γραμμικά: N διασπά ⇒ N+1 ανεξάρτητα κομμάτια, το καθένα από τα δικά του εγγραφή μητρώου. Πρακτικές συνέπειες:

• Per-piece χαλάρωση — αλλαγή easing ενός μόνο κλειδιού σε ένα κομμάτι; τα άλλα είναι ανέγγιχτα.
• Per-piece color or value interpolation — επεξεργαστείτε το fillColor, το strokeColor ενός πληκτρολογίου ή οποιαδήποτε κινούμενη ιδιότητα σε ένα κομμάτι για να εφαρμόσετε μια διαφορετική μετατροπή πάνω από το παράθυρό του. Οι υπάρχοντες interpolators χρώματος και κλίσης χειρίζονται HSL/RGB lerp αμετάβλητη.
• Per-piece χωρική διαδρομή — spatialHandles ζουν μέσα σε μεμονωμένα πλαίσια κλειδιών, έτσι ώστε η κάμψη της διαδρομής του animation ενός κομματιού δεν επηρεάζει τα άλλα.

Τα κομμάτια δεν αλληλεπικαλύπτονται οπτικά, αρκεί τα παράθυρα του καμβά να μην αλληλεπικαλύπτονται. Σύρετε οποιοδήποτε κομμάτι σε μια νέα θέση του χρόνου καμβά, περικόψτε το και πάλι, ή να το χωρίσει περαιτέρω.

Παράδειγμα: Fade in animation

1. Επιλέξτε ένα αντικείμενο κειμένου
2. Κατά τη στιγμή 0s: Ορισμός Αδιαφάνειας στο 0
3. Τη στιγμή 1s: Ρυθμίστε την Αδιαφάνεια στο 1
4. Ρυθμίστε τη χαλάρωση στο Ease Out
5. Πατήστε Play για προεπισκόπηση

Παράδειγμα: μετάβαση χρώματος

1. Επιλογή αντικειμένου
2. Τη στιγμή 0s: Ορισμός χρώματος πλήρωσης στο #FF0000 (κόκκινο)
3. Τη στιγμή 2s: Ορισμός χρώματος πλήρωσης στο # 0000FF (μπλε)
4. Το χρώμα περνά ομαλά μέσα από το φάσμα

Παράδειγμα: Φαινόμενο Pan κάμερας

Δημιουργία κινηματογραφικών κινουμένων σχεδίων παν σε μεγάλες εικόνες χρησιμοποιώντας τον καμβά ως προβολέα.

Πώς Λειτουργεί

Όταν έχεις μια εικόνα μεγαλύτερη από τον καμβά σου:

• Τα όρια canvas λειτουργούν ως προεξοχή κάμερας
• Μετακίνηση της εικόνας αριστερά = τηγάνια κάμερα δεξιά
• Μετακίνηση της εικόνας επάνω = τηγάνια κάμερα κάτω

Δημιουργία ενός Pan Animation

1. Καθορίστε το μέγεθος του καμβά στην επιθυμητή έξοδο σας (π.χ., 1920×1080 για βίντεο HD)
2. Παρουσιάστε μια μεγάλη εικόνα (πιο μεγάλη από καμβά)
3. Position the image έτσι ώστε η προβολή εκκίνησης να είναι ορατή
4. Δημιουργία πλαισίων πλήκτρων για τη μετακίνηση της θέσης της εικόνας

Μοτίβο σάρωσης σε σειρά ανά γραμμή

Για να σαρώσετε μια εικόνα σε ένα μοτίβο οφιοειδές:

Εναλλακτική: Η κάμερα ακολουθεί

Για δυναμική κίνηση κάμερας που ακολουθεί ένα αντικείμενο:

1. Δημιουργία ενός μικρού δείκτη ή διαδρομής
2. Προσθήκη σχέσης camera_follows στο δείκτη
3. Εκκίνηση της θέσης του δείκτη
4. Η προβολή ακολουθεί αυτόματα

Συμβουλές