Διδασκαλία: Animation με βάση τη φυσική

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

Χρόνος: 15 λεπτά δυσκολία: Προχωρημένα

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

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

Χαρακτηριστικά καλυμμένα

• Ανακουφίζει — Ball-drop αποτέλεσμα με ρεαλιστική φυσική
• Ελαστική χαλάρωση — Ανοιξιάτικη υπερβολή κινουμένων σχεδίων
• Αλληλουχία κλειδιού — Ακριβώς χρονομετρημένη χορογραφία πολλαπλών στοιχείων
• Διαιτητικές σχέσεις — Στοιχεία που περιστρέφονται γύρω από ένα κεντρικό σημείο
• Camera animation — Ομαλή ζουμ και εφέ τηγάνι

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

1. Άνοιγμα επεξεργαστή PinePaper
2. Ορισμός μεγέθους καμβά στο YouTube Εικόνες (1280×720)
3. Ορισμός χρώματος φόντου στο #0a0a0a (κοντά στο μαύρο)

Βήμα 2: Δημιουργία του κύριου τίτλου

1. Πατήστε T για το εργαλείο κειμένου
2. Κάντε κλικ στον κεντρικό καμβά, τύπου: PHYSICS
3. Σε πίνακα ιδιοτήτων:
   • Μέγεθος γραμματοσειράς: 120
   • Οικογένεια γραμματοσειρών: Inter (ή οποιαδήποτε τολμηρή sans-serif)
   • Χρώμα: #ffffff
4. Κέντρο σε καμβά

Βήμα 3: Προσθήκη κίνησης πτώσης βαρύτητας

Θα κάνουμε την πτώση του τίτλου από πάνω με ένα αποτέλεσμα αναπήδησης.

1. Επιλέξτε το κείμενο τίτλου
2. Άνοιγμα Πίνακας χρονογραμμών (κάτω)
3. Προσθήκη πλαισίων κλειδιών:

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

const title = app.create('text', {
  content: 'PHYSICS',
  x: 640, y: -100,
  fontSize: 120,
  color: '#ffffff'
});

app.addAnimation(title.data.id, [
  { time: 0, properties: { y: -100, opacity: 0 } },
  { time: 0.3, properties: { y: 360, opacity: 1 }, easing: 'bounce' }
]);

Βήμα 4: Προσθήκη υποτίτλου με Ελαστική Επίδραση

1. Δημιουργία κειμένου υπότιτλων: IN MOTION
2. Μέγεθος γραμματοσειράς: 48, χρώμα: #60a5fa (μπλε)
3. Θέση κάτω από τον κύριο τίτλο

Προσθήκη ελαστικής κίνησης:

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

const subtitle = app.create('text', {
  content: 'IN MOTION',
  x: 640, y: 450,
  fontSize: 48,
  color: '#60a5fa'
});

app.addAnimation(subtitle.data.id, [
  { time: 0.4, properties: { scale: 0, opacity: 0 } },
  { time: 0.8, properties: { scale: 1, opacity: 1 }, easing: 'elastic' }
]);

Βήμα 5: Προσθήκη τροχοφόρων σωματιδίων

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

1. Δημιουργία ενός μικρού κύκλου: ακτίνα 8, χρώμα #fbbf24 (καφέ)
2. Θέση κοντά στο κέντρο
3. Προσθήκη orbits σχέση:

const particle1 = app.create('circle', {
  x: 640, y: 360,
  radius: 8,
  color: '#fbbf24'
});

// Make it orbit around the title center
app.addRelation(particle1.data.id, title.data.id, 'orbits', {
  radius: 150,
  speed: 0.5,
  direction: 'clockwise'
});

4. Πολλαπλασιάστε και δημιουργήστε 2 ακόμη σωματίδια με διαφορετικές ακτίνες και ταχύτητες:
   • Σωματίδιο 2: ακτίνα 120, ταχύτητα 0.7, χρώμα #f472b6 (ροζ)
   • Σωματίδιο 3: ακτίνα 180, ταχύτητα 0,3, χρώμα #34d399 (πράσινο)

Βήμα 6: Προσθήκη εστίασης φωτογραφικής μηχανής

Δημιουργήστε μια κινηματογραφική αίσθηση με animation κάμερα.

// Zoom in slightly during the reveal
app.addRelation('camera', null, 'camera_animates', {
  duration: 2,
  keyframes: [
    { time: 0, zoom: 0.9, center: [640, 360] },
    { time: 0.5, zoom: 1.1, center: [640, 360], easing: 'easeOut' },
    { time: 2, zoom: 1, center: [640, 360], easing: 'easeInOut' }
  ]
});

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

1. Πατήστε Space για προεπισκόπηση
2. Ρυθμίστε τον χρόνο όπως απαιτείται
3. Εξαγωγή ως WebM (προτείνεται) ή MP4
   • Διάρκεια: 3 δευτερόλεπτα
   • Ρυθμός καρέ: 60 fps (οσμητική φυσική)
   • Loop: Ναι (για τα μέσα κοινωνικής δικτύωσης)

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

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

// Setup
app.setCanvasSize('youtube-thumbnail');
app.setBackgroundColor('#0a0a0a');

// Main title with gravity drop
const title = app.create('text', {
  content: 'PHYSICS',
  x: 640, y: -100,
  fontSize: 120,
  color: '#ffffff',
  fontFamily: 'Inter'
});

app.addAnimation(title.data.id, [
  { time: 0, properties: { y: -100, opacity: 0 } },
  { time: 0.3, properties: { y: 360, opacity: 1 }, easing: 'bounce' }
]);

// Subtitle with elastic spring
const subtitle = app.create('text', {
  content: 'IN MOTION',
  x: 640, y: 450,
  fontSize: 48,
  color: '#60a5fa'
});

app.addAnimation(subtitle.data.id, [
  { time: 0.4, properties: { scale: 0, opacity: 0 } },
  { time: 0.8, properties: { scale: 1, opacity: 1 }, easing: 'elastic' }
]);

// Orbiting particles
const colors = ['#fbbf24', '#f472b6', '#34d399'];
const orbits = [
  { radius: 150, speed: 0.5 },
  { radius: 120, speed: 0.7 },
  { radius: 180, speed: 0.3 }
];

orbits.forEach((orbit, i) => {
  const particle = app.create('circle', {
    x: 640, y: 360,
    radius: 8,
    color: colors[i]
  });

  app.addRelation(particle.data.id, title.data.id, 'orbits', {
    radius: orbit.radius,
    speed: orbit.speed,
    phase: i * (Math.PI * 2 / 3) // Spread evenly
  });
});

// Camera animation
app.addRelation('camera', null, 'camera_animates', {
  duration: 2,
  keyframes: [
    { time: 0, zoom: 0.9, center: [640, 360] },
    { time: 0.5, zoom: 1.1, center: [640, 360], easing: 'easeOut' },
    { time: 2, zoom: 1, center: [640, 360], easing: 'easeInOut' }
  ]
});

// Play with 3-second loop
app.playKeyframeTimeline(3, true);

Παραλλαγές

Αποκαλύπτεται ένα Επιστολή που Επιστρέφει

Χρήση Επιστολή Collage με συγκλονιστική animation:

const collage = app.letterCollage.create('PHYSICS', {
  style: 'tile',
  palette: 'neon',
  fontSize: 80
});

app.letterCollage.applyStaggeredAnimation(collage.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.4,
  easing: 'elastic'
});

Κίνηση διαδρομής

Κάντε τα στοιχεία να ακολουθήσουν μια καμπύλη Bezier:

const star = app.create('star', {
  x: 100, y: 360,
  radius: 20,
  color: '#fbbf24'
});

// Animate along a curved path
app.animate(star, {
  animationType: 'path',
  pathPoints: [
    [100, 360],   // Start
    [400, 200],   // Control point 1
    [800, 500],   // Control point 2
    [1180, 360]   // End
  ],
  pathSmooth: true,
  animationSpeed: 0.3
});

Pro Συμβουλές

Timing είναι τα πάντα — Αρχίστε στοιχεία σε ελαφρώς διαφορετικές χρονικές στιγμές (0.1-0.2s χώρια) για πιο φυσική αίσθηση.

Ανακουφίζει combine — Χρησιμοποιήστε bounce για προσγείωση, elastic για κλιμάκωση, easeOut για ξεθωριασμό.

60fps για τη φυσική — Υψηλότερα ποσοστά καρέ κάνουν αναπήδηση / ελαστικά αποτελέσματα φαίνονται πιο ομαλή.

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

• [Morphing Animation] (/tutorials/morphing) — Μετασχηματισμός σχημάτων το ένα στο άλλο
• Χάρτης Animations — Κινούμενα γεωγραφικά δεδομένα
• Σύστημα συσχέτισης — Βαθιά βουτιά στις σχέσεις στοιχείων