צילום: Physics- Based Animation

ליצור אנימציה מדהימה באמצעות קפיצה, גמישה ואפקטי הכבידה עם ריצוף מרכזי.

Time: 15 דקות דיפרטי: מתקדם

מה אתה יוצר

כותרת דרמטית מגלה עם אנימציה טקסט מבוססת פיזיקה, אלמנטים מרחביים ותנועות מצלמה חלקה.

תכונות Covered

• **אפקט בול-דרופ עם פיזיקה ריאלית
• ** הקלה אחרונה - Spring-like Overshoot Animation
• Keyframe quencing - זמן רב לפני זמן רב כוריאוגרפיה
• יחסי אורביטל - אלמנטים המקיפים סביב נקודת מרכז
• Camera Animation - Smooth Zoom ואפקטי הלב

שלב ראשון - Set Up Canvas

1. Open PinePaper Editor
2. גודל הבד ל **YouTube Thumbnail (1280×720)
3. צבע רקע #0a0a0a (Nar black)

שלב 2: יצירת הכותרת העיקרית

1. T לטקסט
2. לחץ על בד מרכז, סוג: PHYSICS
3. בלוח נכסים:
   • גודל פונט: 120
   • פונטן משפחה: Inter (או כל sans-serif)
   • צבע: #ffffff
4. מרכז בד

שלב 3: הוסף Gravity Drop Animation

אנחנו נעשה את הכותרת טיפות מלמעלה עם אפקט קפיצה.

1. בחר את הכותרת טקסט
2. Open Timeline Panel
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 (amber)
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 חלקיקים נוספים עם קרינה ומהירויות שונות:
   • Particle 2: רדיוס 120, מהירות 0.7, צבע #f472b6 (pink)
   • Particle 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 לתצוגה מקדימה
2. התאמת התזמון במידת הצורך
3. WebM*(recommended) אוMP4
   • תגית: **3 שניות
   • שיעור המסגרת: 60 fps (פיזיקה שונה)
   • שם הסרטון: Yes** (For Social Media)

קוד שלם

הנה הקוד המלא לאנימציה:

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

שינויים

מכתב גלוי

השתמש ב- Letter Collage with staggered 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

גירוי הוא הכל - התחל אלמנטים בזמנים מעט שונים (0.1-0.2s בנפרד) עבור תחושה טבעית יותר.

**שימוש ב- bounce עבור נחיתה, elastic עבור דרוג, easeOut עבור דעיכה.

60fps לפיזיקה - שיעורי מסגרת גבוהים יותר הופכים לאפקטים קפיצה/לאסטיים נראים חלק יותר.

צעדים הבאים

• מורפינג אנימציה - צורות לתוך אחד את השני
• Map Animations - נתונים גיאוגרפיים
• Relation System – לצלול עמוק לתוך יחסי פריט