آموزش: انیمیشن مبتنی بر فیزیک

ایجاد انیمیشن خیره کننده با استفاده از پرش، الاستیک و اثرات گرانش با توالی فریم کلیدی.

** زمان: ۱۵ دقیقه *سختی: ** پیشرفته پیشرفته پیشرفته

آنچه شما ایجاد می کنید

یک عنوان دراماتیک با انیمیشن متن مبتنی بر فیزیک، عناصر مداری و حرکات دوربین صاف نشان می دهد.

ویژگی های Covered

• ** کاهش فشار توپ با فیزیک واقعی
• ** کاهش سریع - بهار مانند انیمیشن
• • توالی یابی فریم کلیدی - دقیقاً چند مرحله ای را به تعویق انداخت
• ** روابط عادی - عناصر در اطراف یک نقطه مرکزی
• ** انیمیشن هایCamera - زوم و اثرات پان

مرحله 1: Set Up Canvas

1. Open PinePaper Editor
2. اندازه پیچ را تنظیم کنید تا **YouTube Thumbnail (1280×720)
3. رنگ پس زمینه را به #0a0a0a (نزدیک به سیاه)

مرحله دوم: عنوان اصلی را بسازید

1. Press T for Text Tool
2. بر روی بوم مرکزی کلیک کنید، نوع: **PHYSICS
3. در پنل Properties:
   • اندازه فونت: ** 120
   • خانواده فونت: Inter (یا هر گونه sans-serif)
   • رنگ: #ffffff
4. مرکز در بوم

مرحله 3: Add 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: اضافه کردن زیرنویس با Elastic Effect

1. دانلود زیرنویس فارسی فیلم Make Subtitle text: **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' }
]);

مرحله پنجم: اضافه کردن ذرات Orbiting

ایجاد علاقه بصری با عناصر مدار.

1. یک دایره کوچک ایجاد کنید: شعاع **8، رنگ #fbbf24 (amber)
2. موقعیت نزدیک مرکز
3. Add 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: شعاع 120، سرعت 0.7، رنگ #f472b6 (pink)
   • ذرات 3: شعاع 180، سرعت 0.3، رنگ #34d399 (سبز)

مرحله 6: Add Camera Zoom

یک احساس سینمایی با انیمیشن دوربین ایجاد کنید.

// 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. Press Space برای پیش نمایش
2. زمان بندی در صورت لزوم
3. صادرات به عنوان WebM یا MP4
   • مدت زمان: **3 ثانیه
   • نرخ فریم: ** 60 fps (فیزیک دیگر)
   • حلقه: ** بله (برای رسانه های اجتماعی)

کد کامل

در اینجا کد انیمیشن کامل برای مرجع:

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

تغییرات

نامه قدیمی Reveal

استفاده از Letter Collage با انیمیشن های برجسته:

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

انیمیشن Path Animation

عناصر را از منحنی 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
});

نکات مقدماتی

• جذب همه چیز است - عناصر را در زمان های کمی متفاوت (0.1-0.2) برای احساس طبیعی تر شروع کنید.

** کاهش اسید آمینه - استفاده از bounce برای فرود، elastic برای اندازه گیری، easeOut برای محو شدن.

• 60fps برای فیزیک - نرخ فریم بالاتر باعث می شود تا اثرات پرش / پرشی به نظر صاف تر باشد.

گام های بعدی

• [Morphing Animation] (/tutorials/morphing) تغییر شکل در یکدیگر
• [Map Animations] (/tutorials/map-animation) - داده های جغرافیایی Animate
• [Relation System] (/features/relations) – شیرجه عمیق به روابط موردی