Διδασκαλία: Δημιουργία μιας κινούμενης κινητής θέσης

Μάθετε να δημιουργήσετε ένα εντυπωσιακό κινούμενο απόσπασμα για το Instagram Stories χρησιμοποιώντας το Letter Collage animations.

Χρόνος: 10 λεπτά Δυσκολία: Αρχάριος

Τι θα Δημιουργήσετε

Ένα εκπληκτικό κινούμενο απόσπασμα με τρεις φράσεις, το καθένα χρησιμοποιώντας διαφορετικά στυλ κολάζ γράμμα και συγκλονιστικά αποκαλύπτουν κινούμενα σχέδια.

Χαρακτηριστικά που θα μάθετε

• Επιστολή στυλ κολάζ — Νέα πλακίδια, cutouts περιοδικών, εφέ κοπής χαρτιού
• Σταθερά κινούμενα σχέδια — Γράμματα που εμφανίζονται ένα προς ένα
• Γεννήτριες υποβάθρου — Υποβάθροι με κινούμενη ηλιακή έκρηξη
• Keyframe animations — Μεταβολές χρωμάτων και εφέ λάμψης

Βήμα 1: Set κανβάς

1. Άνοιγμα επεξεργαστή PinePaper
2. Κάντε κλικ στο μέγεθος καμβάς πτώση προς τα κάτω στο υποσέλιδο
3. Επιλέξτε Instagram Story (1080×1920)

Βήμα 2: Προσθήκη κινούμενου φόντου

1. Κάντε κλικ στην καρτέλα Scenes στο δεξί πίνακα
2. Ορισμός λειτουργίας φόντου σε Generator
3. Επιλογή Sunburst
4. Configure των χρωμάτων:
   • Χρώμα 1: #FF6B6B (κόκκινο κοράλλι)
   • Χρώμα 2: #4ECDC4 (απαλό)
   • Χρώμα 3: #FFE66D (κίτρινο)
5. Σύνολο Ray Count: 16
6. Ενεργοποίηση Aimate και ρύθμιση ταχύτητας: 0.5
7. Κλικ Generate

Βήμα 3: Δημιουργήστε το DREAM BIG" Επιστολή Collage

1. Κάντε κλικ στο κουμπί Letter Collage στη γραμμή εργαλείων (ή πατήστε L)
2. Τύπος: DREAM BIG
3. Configure του στυλ:
   • Στυλ: Tile
   • Παλέτα: Neon
   • Μέγεθος γραμματοσειράς: 72
   • Ακτίνα γωνίας: 8
   • Ενεργοποίηση σκιάς
4. Θέση στην κεντρική επιφάνεια (x: 540, y: 750)

Ισοδύναμος κωδικός:

const dreamBig = app.letterCollage.create('DREAM BIG', {
  style: 'tile',
  palette: 'neon',
  x: 540,
  y: 750,
  fontSize: 72,
  cornerRadius: 8,
  shadowEnabled: true
});

Βήμα 4: Προσθήκη Staggered Animation να " DREAM BIG"

1. Με το κολάζ επιλεγμένο, ανοίξτε τον πίνακα ώρας **
2. Κάντε κλικ Προσθήκη Staggered Animation
3. Configure:
   • Επίδραση: Pop In
   • Καθυστέρηση ενεργοποίησης: 0.08s
   • Διάρκεια: 0.5s
   • Ακολουθία: Κοντά (αριστερά προς τα δεξιά)
   • Λύση: aseOut

Ισοδύναμος κωδικός:

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});

Βήμα 5: Δημιουργία "ΔΙΚΑΣΤΗΡΙARD Επιστολή Collage

1. Δημιουργία άλλου κολάζ Επιστολής με:

   • Κείμενο: WORK HARD
   • Στυλ: Magazine (Ransom note look)
   • Παλέτα: Magazine
   • Μέγεθος γραμματοσειράς: 60
   • Θέση: (540, 920)

2. Προσθήκη συγκλονιστικής κίνησης:

   • Επίδραση: Fade Slide Up
   • Καθυστέρηση ενεργοποίησης: 0.1s
   • Ακολουθία: Wave (ροή αποκάλυψη)

Ισοδύναμος κωδικός:

const workHard = app.letterCollage.create('WORK HARD', {
  style: 'magazine',
  palette: 'magazine',
  x: 540,
  y: 920,
  fontSize: 60
});

app.letterCollage.applyStaggeredAnimation(workHard.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.1,
  duration: 0.6,
  sequence: 'wave',
  easing: 'easeOut'
});

Βήμα 6: Δημιουργήστε “ΤΑΥ HUMBLE” Επιστολή Collage

1. Δημιουργία του τρίτου κολάζ Γράμματος:

   • Κείμενο: STAY HUMBLE
   • Στυλ: Κόψη χαρτιού (3D shadow effect)
   • Μέγεθος γραμματοσειράς: 68
   • Θέση: (540, 1100)

2. Προσθήκη συγκλονιστικών κινουμένων σχεδίων με αναπήδηση:

   • Επίδραση: Pop In
   • Καθυστέρηση Σταγκερ: 0.06s
   • Ακολουθία: Κέντρο (αποκαλύπτει από τη μέση προς τα έξω)
   • Λύση: Bounce

Ισοδύναμος κωδικός:

const stayHumble = app.letterCollage.create('STAY HUMBLE', {
  style: 'paperCut',
  x: 540,
  y: 1100,
  fontSize: 68
});

app.letterCollage.applyStaggeredAnimation(stayHumble.collageId, {
  effect: 'popIn',
  staggerDelay: 0.06,
  duration: 0.4,
  sequence: 'center',
  easing: 'bounce'
});

Βήμα 7: Προσθήκη διακοσμητικής γραμμής προφοράς

1. Δημιουργήστε ένα ορθογώνιο για ένα διακοσμητικό διαχωριστικό:

   • Πλάτος: 500, Ύψος: 8
   • Χρώμα: Λευκό (#FFFFFF)
   • Θέση κάτω από τις φράσεις

2. Προσθήκη animation πλαισίου κλειδιού για το χρωματισμό:

Ισοδύναμος κωδικός:

const accentLine = app.create('rectangle', {
  x: 540, y: 1280,
  width: 500, height: 8,
  color: '#FFFFFF'
});

app.addAnimation(accentLine.data.id, [
  { time: 1.5, properties: { opacity: 0, scaleX: 0 } },
  { time: 2.0, properties: { opacity: 1, scaleX: 1 }, easing: 'easeOut' },
  { time: 3.0, properties: { fillColor: '#FFFFFF' } },
  { time: 3.8, properties: { fillColor: '#000000' }, easing: 'easeInOut' },
  { time: 4.6, properties: { fillColor: '#FFFFFF' }, easing: 'easeInOut' }
]);

Βήμα 8: Προεπισκόπηση και αναπαραγωγή

1. Πατήστε Space για να παίξετε το animation
2. Το χρονοδιάγραμμα εμφανίζει ένα κύκλο 6 δευτερολέπτων
3. Δείτε τις συγκλονιστικές αποκαλύψεις:
   • " DREAM BIG" εμφανίζεται με επιστολή
   • " ΕΡΓΑΣΙΑ ΚΙΝΔΥΝΟΣ" διαφάνειες επάνω με ένα φαινόμενο κύμα
   • " STAY HUMBLE" αναπηδά από το κέντρο προς τα έξω

Βήμα 9: Εξαγωγή

Για το Instagram Story (Βίντεο)

1. Κάντε κλικ στο κουμπί Εξαγωγή
2. Επιλέξτε WebM (προτείνεται) ή MP4
3. Configure:
   • Διάρκεια: 6 δευτερόλεπτα
   • Ρυθμός πλαισίου: 30 fps
   • Ποιότητα: Υψηλή
4. Κάντε κλικ Εξαγωγή και περιμένετε για λήψη

Για άλλες πλατφόρμες

Πλήρεςς κωδικός

Εδώ είναι ο πλήρης κώδικας για να αναπαραστήσετε αυτό το animation:

// Setup canvas
app.setCanvasSize('instagram-story');

// Animated sunburst background
app.executeGenerator('drawSunburst', {
  colors: ['#FF6B6B', '#4ECDC4', '#FFE66D'],
  rayCount: 16,
  animate: true,
  animationSpeed: 0.5
});

// "DREAM BIG" - Neon tile style
const dreamBig = app.letterCollage.create('DREAM BIG', {
  style: 'tile',
  palette: 'neon',
  x: 540, y: 750,
  fontSize: 72,
  cornerRadius: 8,
  shadowEnabled: true
});

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});

// "WORK HARD" - Magazine ransom style
const workHard = app.letterCollage.create('WORK HARD', {
  style: 'magazine',
  palette: 'magazine',
  x: 540, y: 920,
  fontSize: 60
});

app.letterCollage.applyStaggeredAnimation(workHard.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.1,
  duration: 0.6,
  sequence: 'wave',
  easing: 'easeOut'
});

// "STAY HUMBLE" - Paper cut style
const stayHumble = app.letterCollage.create('STAY HUMBLE', {
  style: 'paperCut',
  x: 540, y: 1100,
  fontSize: 68
});

app.letterCollage.applyStaggeredAnimation(stayHumble.collageId, {
  effect: 'popIn',
  staggerDelay: 0.06,
  duration: 0.4,
  sequence: 'center',
  easing: 'bounce'
});

// Accent line with color animation
const accentLine = app.create('rectangle', {
  x: 540, y: 1280,
  width: 500, height: 8,
  color: '#FFFFFF'
});

app.addAnimation(accentLine.data.id, [
  { time: 1.5, properties: { opacity: 0, scaleX: 0 } },
  { time: 2.0, properties: { opacity: 1, scaleX: 1 }, easing: 'easeOut' },
  { time: 3.8, properties: { fillColor: '#000000' }, easing: 'easeInOut' },
  { time: 4.6, properties: { fillColor: '#FFFFFF' }, easing: 'easeInOut' }
]);

// Play the 6-second loop
app.playKeyframeTimeline(6, true);

Γρήγορη εκκίνηση: χρήση του προτύπου

Αντί να οικοδομήσουμε από το μηδέν, φορτώστε το προ-χτιστό πρότυπο:

1. Άνοιγμα Πίνακας Templates (δεξιά πλευρική μπάρα)
2. Επιλέξτε κατηγορία: Social Media
3. Κλικ Κίνητρο παράθεση
4. Το πρότυπο φορτώνει με όλα τα κινούμενα σχέδια έτοιμα

Αναφορά στυλ κολάζ επιστολής

Μοτίβο ακολουθίας stagger

Pro Συμβουλές

Τα θέματα contrast — Το φως κείμενο σε σκοτεινό φόντο (ή το αντίστροφο) είναι απαραίτητο για την αναγνωσιμότητα.

Χρόνος ενεργοποίησης — 0.05-0.1s μεταξύ των γραμμάτων αισθάνεται φυσικό. Πολύ γρήγορα φαίνεται μηχανικό.

Mix στυλ — Χρησιμοποιώντας διαφορετικά στυλ Επιστολή Collage για κάθε φράση προσθέτει οπτικό ενδιαφέρον.

Ανακοίνωσε για έμφαση — Η χαλάρωση bounce για “STAY HUMBLE” εφιστά επιπλέον προσοχή.

Επόμενα βήματα

• [Αναφορά κολάζ επιστολή (/features/letter-collage) — Όλα τα στυλ και οι επιλογές
• [Επεξεργαστής πλαισίων κλειδιών] (/features/keyframes) — Προσαρμοσμένος έλεγχος χρονισμού
• [Effects] (/features/effects) — Προσθήκη σπινθήρων και ανταύγειες
• Φυσική animation — Προηγμένα αποτελέσματα χαλάρωσης