ترانہ : طبیعیات-باسڈ اینمیشن -
اس کے علاوہ ، اس میں بہت سی تبدیلیاں کی جاتی ہیں ۔.
مسئلہ : 15 منٹ کے بعد غلطفہمی : نیچے اعلی
آپ کیا بنائیں گے
ایک ڈرامائی عنوان طبیعیات پر مبنی متن Induction، گردشی عناصر اور ہموار کیمرے کی حرکتوں سے ظاہر ہوتا ہے۔.
پوشیدہ چیزوں
- [ تصویر کا حوالہ ]
- رکاوٹوں کا حل — Spring-thoot Induction —
- [ تصویر کا حوالہ ]
- کسی مرکزے کے گرد ای میلجول
- [ تصویر کا حوالہ ]
پہلا قدم
- اوپن PPGX ایڈیٹر
- [ تصویر کا حوالہ ]
- سیٹ پس منظر رنگ
ہدایت 2 : اصل عنوان بنائیں
- ٹیکس ٹول کے لیے Press
- مرکزی مقام، نوعیت:
- پرسنل میں:
- حروفِ تہجی :
- فونٹ خاندان (انگریزی: Terror inter County) (یا کسی بھی دلیر صنف-serif -
- رنگ :
#ffffff
- کیوِن سینٹر
اِس ہدایت پر عمل کریں :
ہم اس عنوان کو اوپر سے ایک بونے اثر کے ساتھ مرتب کریں گے۔.
- عنوان کی عبارت منتخب کریں
- مُنادی کے کام میں حصہ لینا
- کلیدیات شامل کریں:
| وقت | جگہ | شہر | انڈیا |
|---|---|---|---|
| 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 : سمجھداری سے کام لیں
- ذیلی متن بنائیں: حدیث محفوظ ہو۔
- فونٹ سائز: غیر واضح، رنگ :
#60a5fa(P) - مرکزی عنوان کے تحت جگہ
ترمیمی ترمیم شامل کریں:
| وقت | توازن | شہر | انڈیا |
|---|---|---|---|
| 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' }
]);
ہدایت دیں : ” اَے [ یہوواہ ]
گردے عناصر کے ساتھ نظریاتی دلچسپی پیدا کیجئے۔.
- ایک چھوٹا سا حلقہ بنائیں: گردشی 8 اکائی، رنگ
#fbbf24(Amber)۔ - مرکز کے قریب جگہ
- متعلقہ تعلقات کو شامل کریں:
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'
});
- دقیقہ اور دو مزید ذرات پیدا کرکے مختلف ریڈی اور رفتار کے ساتھ تخلیق کرتے ہیں:
- حصہ 2: ربیع الاول 120، رفتار 0.7، رنگ
#f472b6(pink)۔ - حصہ 3: اخذ کردہ 180، رفتار 0.3، رنگ
#34d399(Green)۔
- حصہ 2: ربیع الاول 120، رفتار 0.7، رنگ
ہدایت 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' }
]
});
ہدایت : ” تُم . .
- Press GEX O پیش نظر
- ضرورت کے مطابق وقت
- [ صفحہ ۲۵ پر تصویر ]
- گردش : ۶ سیکنڈ
- 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، کمیت کے لیے.
فزکس کے حصول کے لیے رکاوٹوں — اعلیٰ فریم ورک کی شرحیں بُونکے/سیلمک اثرات کو ہموار کرتی ہیں۔.
اگلے قدم
- Morphing Animation — ایک دوسرے کی شکل میں
- Map Animations — Aniate geographical data —
- Relation System — گہرے دھن دھنیں چیزوں کے تعلقات میں شامل ہیں۔