Κινήσεις μάσκας

5 min read

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

Διαθέσιμες Mask Animations

Κίνηση Επίδραση Καλύτερα για
Σκουπίστε / Κάτω Το περιεχόμενο αποκαλύπτει από πάνω ή κάτω Τίτλοι κειμένου, εισαγωγικά
Σκουπίστε αριστερά/δεξιά Οριζόντια αποκάλυψη Μετάβαση, αποκαλύπτει
Ίριδα Κύκλος επεκτείνεται από το κέντρο Δραματικές αποκαλύψεις, εστίαση
Ίριδα έξω Κύκλος συρρικνώνεται στο κέντρο Fade outs, μεταβάσεις
Μάσκα άστρων Το σχήμα του άστρου αποκαλύπτει περιεχόμενο Παιχνιδιάρικες αποκαλύψεις
Μάσκα καρδιάς Το σχήμα της καρδιάς αποκαλύπτει περιεχόμενο Valentine, ρομαντικά θέματα
Κουρτίνα Ανοίγει από το κέντρο Αποτελέσματα σταδίου/θέατρου
Διαγώνιο μαντηλάκι Γωνιακή αποκάλυψη Δυναμικές μεταβάσεις
Κινηματογράφος Ράβδοι γραμματοσήμων Εισαγωγή κινηματογραφικού τύπου

Χρήση προτύπων μάσκας

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

  1. Άνοιγμα του πίνακα Templates (κάντε κλικ στην καρτέλα Πρότυπα ή πατήστε T)
  2. Φίλτρο από Κατηγορία: Μάσκα
  3. Κάντε κλικ σε ένα πρότυπο για προεπισκόπηση
  4. Κάντε κλικ Χρήση προτύπου για την εφαρμογή του

Διαθέσιμα πρότυπα μάσκας

Πρότυπο Περιγραφή εμπορευμάτων
Αποκάλυψη κειμένου Γραμμές προς τα πάνω μία προς μία
Αποκάλυψη κειμένου κάτω Γραμμές προς τα κάτω
Οριζόντια σκούπα Σκουπίδια περιεχομένου από αριστερά
Αποκαλύπτεται η Ίρις Κύκλος επεκτείνεται για να αποκαλύψει
Μάσκα άστρων Το σχήμα του άστρου αποκαλύπτει
Μάσκα καρδιάς Το σχήμα της καρδιάς αποκαλύπτει
Διαγώνιο μαντηλάκι Γωνιακή μετάβαση
Κινηματογραφική εισαγωγή Γραμματοκιβώτιο τύπου ταινίας

Πώς Λειτουργούν οι Κινήσεις Μάσκα

Οι κινούμενες μάσκες λειτουργούν αποκόπτοντας περιεχόμενο με σχήμα που αλλάζει με την πάροδο του χρόνου:

  1. Σχήμα μάσκας - Το όριο κλιπ (κλιπ, κύκλος, αστέρι, καρδιά)
  2. Τύπος αντίδρασης - Πώς κινείται η μάσκα (βίβλος, ίριδα, κλίμακα)
  3. Timing - Χρόνος έναρξης, διάρκεια και χαλάρωση
  4. Κατεύθυνση - Προς τα πού γίνεται η αποκάλυψη

Παράμετροι χρονισμού

  • Start Time - Όταν αρχίζει η αποκάλυψη (σε δευτερόλεπτα)
  • Duration - Πόσο χρόνο παίρνει η αποκάλυψη
  • Ελάτωση - Καμπύλη κινουμένων σχεδίων (γραμμική, εύκοληIn, easyOut, easyInOut)

Αποκαλύπτει το Σταθερό Κείμενο

Για κείμενο πολλαπλών γραμμών, κλιμακώνονται οι χρόνοι έναρξης για ένα αποτέλεσμα cascading:

Γραμμή Ώρα έναρξης Επίδραση
Γραμμή 1 0.2s Αποκαλύπτει πρώτα
Γραμμή 2 0.35s Αποκαλύπτει το δεύτερο
Γραμμή 3 0.5s Αποκαλύπτει την τρίτη

Αυτό δημιουργεί την κλασική “line-by-line αποκάλυψη” που φαίνεται σε επαγγελματικά γραφικά κίνησης.

Συνδυάζοντας με άλλες επιδράσεις

Τα κινούμενα σχέδια μάσκας λειτουργούν καλά με:

  • Keyframe animations - Μετακίνηση αντικειμένων ενώ αποκαλύπτουν
  • Απλά κινούμενα σχέδια - Προσθέστε παλμό ή ξεθωριάζουν μετά την αποκάλυψη
  • Background γεννήτριες - Αποκαλύψτε το περιεχόμενο πάνω από κινούμενα backgrounds

Μάσκα εικόνας (Στατική)

Για στατική κάλυψη σχήματος σε εικόνες:

  1. Επιλέξτε μια εισαγόμενη εικόνα
  2. Στον πίνακα ιδιοτήτων, κάντε κλικ Mask
  3. Επιλέξτε ένα σχήμα (κύκλος, αστέρι, καρδιά, εξάγωνο, κλπ.)
  4. Ρυθμίστε το μέγεθος και τη θέση της μάσκας
  5. Κάντε κλικ Apply Mask

Αυτό δημιουργεί μια μόνιμη καλλιέργεια στο σχήμα (όχι κινούμενα).

Συμβουλές για τα Καλύτερα Αποτελέσματα

  1. Κρατήστε αποκαλύπτει σύντομη - 0.4-0.8 δευτερόλεπτα λειτουργεί καλύτερα
  2. Χρησιμοποιήστε ευκολίαOut - Νιώθει πιο φυσικό για αποκαλύψεις
  3. Εφαρμογή σταθερά - 0.1-0.2s μεταξύ των γραμμών
  4. Πατήστε το περιεχόμενό σας - Χρησιμοποιήστε την ίριδα για δραματικό, σκουπίστε για επαγγελματικό
  5. Προεπισκόπηση με πλήρη ταχύτητα - Ο συγχρονισμός της δοκιμής είναι σωστός

Λειτουργία μάσκας

Ελέγξτε πώς το σχήμα της μάσκας αλληλεπιδρά με το περιεχόμενό σας:

Λειτουργία Επίδραση Χρήση περίπτωσης
Κλιπ (προκαθορισμένο) Περιεχόμενο ορατό μόνο μέσα σε σχήμα μάσκας Τυπικές αποκαλύψεις, πλαισίωση
Αφαίρεση Περιεχόμενο ορατό παντού *εκτός * σχήμα μάσκας μέσα Εφέ αποκοπής, τρύπες
Διακομιστής Περιεχόμενο ορατό μόνο όταν η μάσκα επικαλύπτεται Επιδράσεις διαγράμματος Venn

Για να αλλάξετε τη λειτουργία μάσκας:

  1. Επιλέξτε το αντικείμενο masked
  2. Στον πίνακα ιδιοτήτων, βρείτε τη λειτουργία μάσκας dropdown
  3. Επιλέξτε Clip, Suptract, ή Intersect

Στοίβαξη μάσκας

Εφαρμόστε πολλαπλές μάσκες σε ένα μόνο αντικείμενο για πολύπλοκα εφέ απόκρυψης:

  1. Εφαρμόστε μια αρχική μάσκα (π.χ., κύκλος)
  2. Προσθέστε ένα δεύτερο στρώμα μάσκας με διαφορετική λειτουργία:
    • Add - Ενώνει και τα δύο σχήματα μάσκα (ορατό σε ένα από τα δύο)
    • Suptract - Κόβει το δεύτερο σχήμα από το πρώτο
    • Intersect - Μόνο η επικαλυπτόμενη περιοχή είναι ορατή

Παράδειγμα: Κύκλος με περικοπή αστεριών

  1. Εφαρμογή μάσκας circle (λειτουργία clip)
  2. Προσθέστε ένα στρώμα μάσκας star (κατάσταση αφαίρεσης)
  3. Αποτέλεσμα: κυκλικό πλαίσιο με τρύπα σε σχήμα αστεριού στο κέντρο
Multiple masks stacked
Πολλαπλές μάσκες συνδυασμένες: μια μάσκα κύκλου με ένα αστέρι αφαιρεθεί

Μπορείτε να στοίβαξετε όσα στρώματα μάσκας χρειάζεται. Απομακρύνετε μεμονωμένα στρώματα χωρίς να επηρεάσετε άλλα.

Κίνηση Vertex

Αναζωογονήστε την ίδια τη μάσκα διαμορφώνοντας τις κορυφές της μεταξύ δύο καταστάσεων:

  1. Ορισμός του σχήματος μάσκας εκκίνησης (θέσεις vertex)
  2. Ορισμός του σχήματος μάσκας λήξης (θέσεις vertex)
  3. Η μάσκα μεταμορφώνεται ομαλά μεταξύ των σχημάτων κατά την αναπαραγωγή

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

Mask modes comparison
Το ίδιο αντικείμενο με Clip, Subtract, και Διακομιστής mask modes

Τεχνικές σημειώσεις

  • Μάσκες χρησιμοποιούν Paper.js cliped ομάδες εσωτερικά
  • Κλίμακα με βάση μάσκες (αστέρι, καρδιά) κλίμακα από το κέντρο
  • Οι μάσκες ορθογώνια αλλάζουν διαστάσεις για εφέ σκουπίσματος
  • Οι μάσκες ξαναχτίζονται κατά τη φόρτωση προτύπων
  • Για τον πλήρη προγραμματικό έλεγχο, ανατρέξτε στην τεκμηρίωση API για το applyCustomMask()

Σχετικά: [Ανίχνευση] (/features/animations)