ترانہ : طبیعیات-باسڈ اینمیشن -

اس کے علاوہ ، اس میں بہت سی تبدیلیاں کی جاتی ہیں ۔.

مسئلہ : 15 منٹ کے بعد غلط‌فہمی : نیچے اعلی

آپ کیا بنائیں گے

ایک ڈرامائی عنوان طبیعیات پر مبنی متن Induction، گردشی عناصر اور ہموار کیمرے کی حرکتوں سے ظاہر ہوتا ہے۔.

Physics- پر مبنی عنوان Intervision with Bounce and Organial effect

پوشیدہ چیزوں

  • [ تصویر کا حوالہ ]
  • رکاوٹوں کا حل — Spring-thoot Induction —
  • [ تصویر کا حوالہ ]
  • کسی مرکزے کے گرد ای میل‌جول
  • [ تصویر کا حوالہ ]

پہلا قدم

  1. اوپن PPGX ایڈیٹر
  2. [ تصویر کا حوالہ ]
  3. سیٹ پس منظر رنگ

ہدایت 2 : اصل عنوان بنائیں

  1. ٹیکس ٹول کے لیے Press
  2. مرکزی مقام، نوعیت:
  3. پرسنل میں:
    • حروفِ تہجی :
    • فونٹ خاندان (انگریزی: Terror inter County) (یا کسی بھی دلیر صنف-serif -
    • رنگ : #ffffff
  4. کیوِن سینٹر

اِس ہدایت پر عمل کریں :

ہم اس عنوان کو اوپر سے ایک بونے اثر کے ساتھ مرتب کریں گے۔.

  1. عنوان کی عبارت منتخب کریں
  2. مُنادی کے کام میں حصہ لینا
  3. کلیدیات شامل کریں:
وقت جگہ شہر انڈیا
0.0s -100 (دور پردہ) - 0
0.3s 360 (enter) 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. فونٹ سائز: غیر واضح، رنگ : #60a5fa (P)
  3. مرکزی عنوان کے تحت جگہ

ترمیمی ترمیم شامل کریں:

وقت توازن شہر انڈیا
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' }
]);

ہدایت دیں : ” اَے [ یہوواہ ]

گردے عناصر کے ساتھ نظریاتی دلچسپی پیدا کیجئے۔.

  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'
});
  1. دقیقہ اور دو مزید ذرات پیدا کرکے مختلف ریڈی اور رفتار کے ساتھ تخلیق کرتے ہیں:
    • حصہ 2: ربیع الاول 120، رفتار 0.7، رنگ #f472b6 (pink)۔
    • حصہ 3: اخذ کردہ 180، رفتار 0.3، رنگ #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' }
  ]
});

ہدایت : ” تُم . .

  1. Press GEX O پیش نظر
  2. ضرورت کے مطابق وقت
  3. [ صفحہ ۲۵ پر تصویر ]
    • گردش : ۶ سیکنڈ
    • Frame rate: Discrencio60 fpsse (smoother طبیعیات)۔
    • لوپ: جی ہاں ( سماجی میڈیا کے لیے)۔

مکمل کوڈ

یہاں حوالہ جات کے لیے مکمل امیگریشن کوڈ ہے:

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

جمع

خط واضح

حروف کولٹیج استعمال کرو جس میں Address شامل ہوں:

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

پرنٹ

کمیت تسمیہ سب کچھ ہے — آغازی عناصر تھوڑے مختلف اوقات (0.1-0.2s منفرد) زیادہ قدرتی احساس کے لیے۔.

نیچے اترنے کے لیے elastic استعمال کریں، easeOut، کمیت کے لیے.

فزکس کے حصول کے لیے رکاوٹوں — اعلیٰ فریم ورک کی شرحیں بُونکے/سیلمک اثرات کو ہموار کرتی ہیں۔.


اگلے قدم