Εκπαίδευση: Μορφωτικές & Ακολουθημένες Κινήσεις

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

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

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

Μια δυναμική ακολουθία όπου τα σχήματα μεταμορφώνονται μεταξύ τους ενώ το κείμενο αποκαλύπτει με συγκλονιστικό συγχρονισμό.

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

• Σχήμα μορφοποίησης — Ομαλή μετάβαση μεταξύ διαφορετικών σχημάτων
• Σταθερά κινούμενα σχέδια — Ακολουθημένος χρόνος για πολλαπλά στοιχεία
• Μεταβάσεις χρωμάτων — Μεταβολές χρώματος κινούμενης κλίσης
• Μασκααποκαλύπτει — Κινηματογράφος και επιπτώσεις ίριδα
• Χορογραφημένες ακολουθίες — Ακριβώς χρονομετρημένος χορός πολλαπλών στοιχείων

Μέρος 1: Μορφοποίηση σχήματος

Βήμα 1: Δημιουργία σχήματος πηγαίου κώδικα

1. Δημιουργία ενός κύκλου στο κέντρο:
   • Ακτίνα: 80
   • Χρώμα: #3b82f6 (μπλε)
   • Position: (400, 300)

const circle = app.create('circle', {
  x: 400, y: 300,
  radius: 80,
  color: '#3b82f6'
});

Βήμα 2: Δημιουργία σχήματος στόχου

1. Δημιουργήστε ένα αστέρι (θα είναι ο στόχος μορφοποίησης):
   • Σημεία: 5
   • Ακτίνα: 100
   • Χρώμα: #f59e0b (κίτρινο)
   • Position: (400, 300)

const star = app.create('star', {
  x: 400, y: 300,
  points: 5,
  radius1: 100,
  radius2: 40,
  color: '#f59e0b'
});

Βήμα 3: Προσθήκη σχέσης μορφοποίησης

Η σχέση morphs_to δημιουργεί ομαλή μετάβαση σχήματος:

app.addRelation(circle.data.id, star.data.id, 'morphs_to', {
  duration: 1.5,
  easing: 'easeInOut',
  morphColor: true,   // Also transition colors
  morphSize: true     // Also transition size
});

Βήμα 4: Πολλαπλές Μορφές Αλυσίδας

Δημιουργία μιας ακολουθίας μορφοποίησης: Κύκλος → Αστέρι → Τρίγωνο → Κύκλος

const shapes = [];

// Circle
shapes.push(app.create('circle', {
  x: 400, y: 300, radius: 80, color: '#3b82f6'
}));

// Star
shapes.push(app.create('star', {
  x: 400, y: 300, points: 5, radius1: 100, radius2: 40,
  color: '#f59e0b', opacity: 0
}));

// Triangle
shapes.push(app.create('triangle', {
  x: 400, y: 300, radius: 90,
  color: '#10b981', opacity: 0
}));

// Hexagon (back to geometric)
shapes.push(app.create('polygon', {
  x: 400, y: 300, sides: 6, radius: 85,
  color: '#8b5cf6', opacity: 0
}));

// Chain morphs with delays
for (let i = 0; i < shapes.length - 1; i++) {
  app.addRelation(shapes[i].data.id, shapes[i + 1].data.id, 'morphs_to', {
    duration: 1.2,
    delay: i * 1.5,  // Stagger start times
    easing: 'easeInOut',
    morphColor: true
  });
}

// Loop back to first shape
app.addRelation(shapes[shapes.length - 1].data.id, shapes[0].data.id, 'morphs_to', {
  duration: 1.2,
  delay: (shapes.length - 1) * 1.5,
  easing: 'easeInOut',
  morphColor: true
});

Μέρος 2ο: Αποκαλύπτονται τα Κείμενο που Στεγάζουν

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

const collage = app.letterCollage.create('TRANSFORM', {
  style: 'gradient',
  gradientPalette: 'cyberpunk',
  gradientDirection: 'horizontal',
  fontSize: 64,
  x: 400, y: 500
});

Βήμα 6: Εφαρμογή Staggered Animation

app.letterCollage.applyStaggeredAnimation(collage.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.06,    // 60ms between letters
  duration: 0.5,
  sequence: 'center',     // Start from center, expand outward
  easing: 'easeOut'
});

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

Μέρος 3: Αποκαλύπτει Μάσκα

Βήμα 7: Προσθήκη Δραματικής Αποκαλύψεως

Αποκαλύψτε το σχήμα μορφοποίησης με ένα αποτέλεσμα ίριδας:

// Apply animated mask to the shape container
app.applyAnimatedMask(shapes[0], 'iris', {
  startTime: 0,
  duration: 0.8,
  easing: 'easeOut'
});

Βήμα 8: Αποκαλύψτε το κείμενο

// Reveal text with horizontal wipe
app.applyAnimatedMask(collage.group, 'wipeLeft', {
  startTime: 0.5,  // Start after shape reveals
  duration: 0.6,
  easing: 'easeInOut'
});

Διαθέσιμες προεπιλογές μάσκας

Μέρος 4: Πλήρης χορογραφία

Πλήρες σενάριο κινουμένων σχεδίων

// === SETUP ===
app.setCanvasSize({ width: 800, height: 600 });
app.setBackgroundColor('#0f172a');

// === MORPHING SHAPES ===
const shapeColors = ['#3b82f6', '#f59e0b', '#10b981', '#8b5cf6'];
const shapeTypes = ['circle', 'star', 'triangle', 'polygon'];

const mainShape = app.create('circle', {
  x: 400, y: 250,
  radius: 80,
  color: shapeColors[0]
});

// Keyframe the shape through color transitions
app.addAnimation(mainShape.data.id, [
  { time: 0, properties: { fillColor: '#3b82f6', scale: 1 } },
  { time: 1.5, properties: { fillColor: '#f59e0b', scale: 1.2 }, easing: 'easeInOut' },
  { time: 3, properties: { fillColor: '#10b981', scale: 0.9 }, easing: 'easeInOut' },
  { time: 4.5, properties: { fillColor: '#8b5cf6', scale: 1.1 }, easing: 'easeInOut' },
  { time: 6, properties: { fillColor: '#3b82f6', scale: 1 }, easing: 'easeInOut' }
]);

// Add rotation for visual interest
app.addAnimation(mainShape.data.id, [
  { time: 0, properties: { rotation: 0 } },
  { time: 6, properties: { rotation: 360 }, easing: 'linear' }
]);

// === IRIS REVEAL FOR SHAPE ===
app.applyAnimatedMask(mainShape, 'iris', {
  startTime: 0,
  duration: 0.6,
  easing: 'easeOut'
});

// === STAGGERED TEXT ===
const title = app.letterCollage.create('TRANSFORM', {
  style: 'tile',
  palette: 'neon',
  fontSize: 56,
  x: 400, y: 480
});

app.letterCollage.applyStaggeredAnimation(title.collageId, {
  effect: 'popIn',
  staggerDelay: 0.05,
  duration: 0.4,
  sequence: 'center',
  easing: 'elastic'
});

// === ORBITING ACCENTS ===
const orbitColors = ['#f472b6', '#34d399', '#fbbf24'];
orbitColors.forEach((color, i) => {
  const dot = app.create('circle', {
    x: 400, y: 250,
    radius: 6,
    color: color
  });

  app.addRelation(dot.data.id, mainShape.data.id, 'orbits', {
    radius: 120 + i * 25,
    speed: 0.4 - i * 0.1,
    phase: i * (Math.PI * 2 / 3)
  });

  // Fade in the orbiting dots
  app.addAnimation(dot.data.id, [
    { time: 0.8 + i * 0.2, properties: { opacity: 0, scale: 0 } },
    { time: 1.2 + i * 0.2, properties: { opacity: 1, scale: 1 }, easing: 'elastic' }
  ]);
});

// === CAMERA MOVEMENT ===
app.addRelation('camera', null, 'camera_animates', {
  duration: 6,
  loop: true,
  keyframes: [
    { time: 0, zoom: 1, center: [400, 300] },
    { time: 1.5, zoom: 1.15, center: [400, 280], easing: 'easeOut' },
    { time: 3, zoom: 1.05, center: [400, 320], easing: 'easeInOut' },
    { time: 4.5, zoom: 1.1, center: [400, 300], easing: 'easeInOut' },
    { time: 6, zoom: 1, center: [400, 300], easing: 'easeOut' }
  ]
});

// === PLAY ===
app.playKeyframeTimeline(6, true);

Settings εξαγωγής

Για καλύτερα αποτελέσματα με μορφοτυπικές κινούμενες εικόνες:

Pro Συμβουλές

Overlap συγχρονισμός — Ξεκινήστε το επόμενο animation 0.1-0.2s πριν από τα προηγούμενα άκρα για απρόσκοπτη ροή.

Χρησιμοποιήστε συμπληρωματικά χρώματα — Μορφές σχήματος φαίνονται καλύτερα κατά τη μετάβαση μεταξύ των χρωμάτων που λειτουργούν καλά μαζί.

Center sequency για την πρόσκρουση — Το μοτίβο της κλιμάκωσης center εφιστά την προσοχή στο μέσο του κειμένου.

Match αποκαλύπτουν το περιεχόμενο — Χρησιμοποιήστε iris για κυκλικά σχήματα, wipeLeft για κείμενο.

Παραλλαγές

Μορφή οπτικοποίησης δεδομένων

// Bar chart to pie chart transition
const bars = createBarChart(data);
const pie = createPieChart(data);

app.addRelation(bars.data.id, pie.data.id, 'morphs_to', {
  duration: 2,
  easing: 'easeInOut'
});

Ακολουθία κίνησης λογότυπου

// Logo parts appear in sequence
const logoParts = [shape1, shape2, shape3, text];

logoParts.forEach((part, i) => {
  app.addAnimation(part.data.id, [
    { time: i * 0.3, properties: { opacity: 0, scale: 0.5 } },
    { time: i * 0.3 + 0.4, properties: { opacity: 1, scale: 1 }, easing: 'elastic' }
  ]);
});

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

• Physics Animation — Αναπήδηση και ελαστικές επιδράσεις
• Χάρτης Animations — Γεωγραφική αφήγηση δεδομένων
• Σύστημα Masking — Προηγμένες τεχνικές αποκάλυψης