التلميذ: محاكاة الفيزياء

خلق محاكاة مذهلة باستخدام القفز والعظمة، وآثار الجاذبية مع تسلسل الحاسوب الرئيسي.

** 15 دقيقة صعوبة: السلف

ما ستصنعه

A dramatic title reveal with physics-based text animation, tropical elements, and smooth camera movements.

Physics animation with bounce and elastic effects

المعالم المشمولة

  • التخفيف من حدة البول - التأثير على الكرة بفيزياء واقعية
  • تخفيف شديد - تصوّر مثل الربيع
  • تسلسل الكيكب - التصويبات المتعددة العناصر ذات التوقيت الحاد
  • العلاقات المدارية - العناصر المدارية حول نقطة الوسط
  • Camera animation - Smooth zoom and pan effects

الخطوة 1: إنشاء قناة

  1. Open PinePaper Editor
  2. تحديد حجم الأغشية **
  3. تحديد لون الخلفية إلى #0a0a0a (باللون الأسود)

الخطوة 2: إنشاء العنوان الرئيسي

  1. Press T1Q for Text Tool
  2. Click center canvas, type: PHYSICS
  3. In Properties Panel:
    • Font Size: 120
    • Font Family: Inter (or any bold sans-serif)
    • Color: #ffffff
  4. مركز التغطية

الخطوة 3: أضف الجاذبية

سنجعل العنوان ينخفض من الأعلى مع تأثير مكافأة.

  1. اختيار نص العنوان
  2. الفريق المفتوح العضوية**
  3. يضاف الإطارات الرئيسية:
الوقت المنصب ياء Opacity التخفيف
0.0s - 100 (الشاشة الخارجية) 0
0.3s 360 (النسبة المئوية) 1 بونسي

الرمز المعادل:

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 (blue)
  3. المنصب تحت العنوان الرئيسي

يضاف مقياس عالي:

الوقت Scale Opacity التخفيف
0.4s 0 0
0.8s 1 1 رائع

الرمز المعادل:

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. Create a small cycle: radius **, color #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'
});
  1. ازدواجية وخلق جزيئتين أخريين بأشعة وسرعة مختلفة:
    • Particle 2: radius 120, speed 0.7, color #f472b6 (pink)
    • Particle 3: radius 180, speed 0.3, color #34d399 (green)

الخطوة 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. Press Space to preview
  2. التوقيت حسب الحاجة
  3. Export as WebM (recommended) or MP4
    • المدة: 3 ثوان
    • Frame Rate: 60 fps (smoother physics)
    • نعم** (لوسائط الإعلام الاجتماعية)

المدونة الكاملة

هذا هو الرمز الكامل للتصوير المرجعي:

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

استخدام رسالة كولاج مع محاكاة كبيرة:

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

مقياس الطريق

جعل العناصر تتبع منحنى بيزر:

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 Tips

الهدف هو كل شيء - بدء العناصر في أوقات مختلفة قليلا )٠,١-٠,٢ متفرقة( لشعور طبيعي أكثر.

تخفيفات المركبة - استخدام الـ (bounce) للهبوط، و(elastic) للارتفاع، و(easeOut) للتلاوة.

60 في المائة للفيزياء - معدلات الأطار المرتفعة تجعل آثار المكافأة/التركة أكثر سلاسة.


الخطوات التالية

  • ]التقديرات المتوسطة[ )المقر الرئيسي( - تحويل الأشكال إلى بعضها البعض
  • ]التقديرات المتحركة[ )المقر الرئيسي( - البيانات الجغرافية الناقصة
  • [نظام الربط] (المعيار /features/relations) - الغوص العميق في علاقات البنود