ट्यूटोरियल: भौतिकी आधारित एनिमेशन

कुंजीफ्रेम अनुक्रमण के साथ उछाल, लोचदार और गुरुत्वाकर्षण प्रभाव का उपयोग करके आश्चर्यजनक एनिमेशन बनाएं।.

** समय:* 15 मिनट ** कठिनाई:* उन्नत

आप क्या बना सकते हैं

एक नाटकीय शीर्षक भौतिकी आधारित पाठ एनीमेशन, कक्षीय तत्वों और चिकनी कैमरा आंदोलनों के साथ प्रकट होता है।.

सुविधाओं को कवर

• Bounce easing - यथार्थवादी भौतिकी के साथ बॉल-ड्रॉप प्रभाव
• Elastic easing - स्प्रिंग-जैसे ओवरशूट एनिमेशन
• ** कुंजीफ्रेम अनुक्रमण* - सटीक रूप से समयबद्ध बहु-element choreography
• *Orbital संबंध - तत्व एक केंद्र बिंदु के आसपास कक्षा में रहते हैं
• ** कैमेरा एनीमेशन* - चिकना ज़ूम और पैन प्रभाव

चरण 1: सेट अप कैनवास

1. PinePaper संपादक
2. ** यूट्यूब थंबनेल (1280 × 720)* के लिए कैनवास का आकार सेट करें
3. #0a0a0a (काला काला) के लिए पृष्ठभूमि रंग सेट करें

चरण 2: मुख्य शीर्षक बनाएँ

1. टेक्स्ट टूल के लिए T
2. क्लिक सेंटर कैनवास, प्रकार: PHYSICS
3. गुण पैनल में:
   • फ़ॉन्ट आकार:120*
   • फ़ॉन्ट परिवार: ** इंटर * (या किसी भी बोल्ड सैन-सेरीफ)
   • #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. सबटाइटल टेक्स्ट बनाएं
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. ऑर्बिट संबंध जोड़ें:

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: कैमरा ज़ूम जोड़ें

कैमरा एनीमेशन के साथ एक सिनेमाई महसूस करें।.

// 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 to preview
2. आवश्यकतानुसार समय समायोजित करें
3. WebM (recommended) या MP4* के रूप में निर्यात करें
   • अवधि: ** 3 सेकंड*
   • फ्रेम रेट: ** 60 एफपीएस * * (चिकनी भौतिकी)
   • लूप: ** हाँ* (सामाजिक मीडिया के लिए)

पूरा कोड

यहाँ संदर्भ के लिए पूर्ण एनीमेशन कोड है:

// 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);

विविधता

Staggered letter Reveal

लेटर कोलाज का उपयोग कंपित एनिमेशन के साथ करें:

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
});

प्रो टिप्स

*Timing सब कुछ है - अधिक प्राकृतिक अनुभव के लिए थोड़ा अलग समय (0.1-0.2s अलग) पर तत्वों को शुरू करें।.

Combine easing - लैंडिंग के लिए bounce का उपयोग करें, स्केलिंग के लिए elastic, फीका करने के लिए easeOut।.

भौतिकी* के लिए ** 60fps - उच्च फ्रेम दरें उछाल / लोचदार प्रभाव चिकनी दिखती हैं।.

अगला कदम

• [Morphing Animation] (/tutorials/morphing) - एक दूसरे में आकार बदलना
• Map Animations — Animate geographic data
• [Relation System] (/features/relations) - आइटम संबंधों में गहरी गोता