التلميذ: محاكاة الفيزياء
خلق محاكاة مذهلة باستخدام القفز والعظمة، وآثار الجاذبية مع تسلسل الحاسوب الرئيسي.
** 15 دقيقة صعوبة: السلف
ما ستصنعه
A dramatic title reveal with physics-based text animation, tropical elements, and smooth camera movements.
المعالم المشمولة
- التخفيف من حدة البول - التأثير على الكرة بفيزياء واقعية
- تخفيف شديد - تصوّر مثل الربيع
- تسلسل الكيكب - التصويبات المتعددة العناصر ذات التوقيت الحاد
- العلاقات المدارية - العناصر المدارية حول نقطة الوسط
- Camera animation - Smooth zoom and pan effects
الخطوة 1: إنشاء قناة
- Open PinePaper Editor
- تحديد حجم الأغشية **
- تحديد لون الخلفية إلى
#0a0a0a(باللون الأسود)
الخطوة 2: إنشاء العنوان الرئيسي
- Press T1Q for Text Tool
- Click center canvas, type: PHYSICS
- In Properties Panel:
- Font Size: 120
- Font Family: Inter (or any bold sans-serif)
- Color:
#ffffff
- مركز التغطية
الخطوة 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: أضف العنوان الفرعي مع الأثر الفطري
- ترجمة:
- حجم الفونت: 48، لون:
#60a5fa(blue) - المنصب تحت العنوان الرئيسي
يضاف مقياس عالي:
| الوقت | 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: إضافة الجسيمات المدارية
خلق اهتمام بصري بالعناصر المدارية.
- Create a small cycle: radius **, color
#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'
});
- ازدواجية وخلق جزيئتين أخريين بأشعة وسرعة مختلفة:
- Particle 2: radius 120, speed 0.7, color
#f472b6(pink) - Particle 3: radius 180, speed 0.3, color
#34d399(green)
- Particle 2: radius 120, speed 0.7, color
الخطوة 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: استعراض الحالة والصادرات
- Press Space to preview
- التوقيت حسب الحاجة
- 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) - الغوص العميق في علاقات البنود