การเคลื่อนไหวทางฟิสิกส์

สร้างแอนิเมชันที่น่าตื่นตาตื่นใจ โดยใช้การกระดอน, ยืดหยุ่น, และผลกระทบแรงโน้มถ่วง.

~เวลา: ~15นาที ~ ความแตกต่าง:~ เพิ่มเติม

สิ่งที่คุณจะสร้าง

ชื่อที่โดดเด่น เปิดเผยด้วยภาพเคลื่อนไหวของข้อความทางฟิสิกส์ องค์ประกอบออร์บิทัล และการเคลื่อนไหวของกล้องเรียบ.

ภาพ หน้า ปก

• ♪BOLLLLLOLY ♪ — ลูกบอลผลลัพท์กับฟิสิกส์จริง
• ~Alcuric left~ — เหมือนแอนิเมชันของฤดูใบไม้ผลิ
• ~Key เฟรม sequencing ~ — ท่าเต้นหลายเพลงที่ถูกต้อง
• ~ความสัมพันธ์ทางใจ~ — ธาตุที่โคจรรอบจุดศูนย์กลาง
• ~คาเมร่าแอนิเมชัน ~ — ซูมและส่งผลกระทบกับกระทะ~

ขั้น ที่ 1: ตั้ง แคน วา

1. เปิดเครื่องมือแก้ไข PinePaper
2. ตั้งขนาดผ้าใบเป็น ~ youTube ภาพตัวอย่าง (1280×720) ~
3. ตั้งค่าสีพื้นหลังเป็น #0a0a0a (สีดํา)

ขั้น ที่ 2: สร้าง หัว เรื่อง หลัก

1. กด สําหรับเครื่องมือข้อความ
2. คลิกตรงกลางผ้าใบ, ประเภท: ~PEEYSICS ~
3. ในถาดคุณสมบัติ:
   • ขนาดตัวอักษร: ~% 1 ~
   • ครอบครัวแบบอักษร: ~ Inter~ (หรือ Sans-serif ตัวหนา)
   • สี: #ffffff
4. ตรงกลางบนผ้าใบ

ขั้น ที่ 3: เพิ่ม แรง โน้ม ถ่วง ทิ้ง

เราจะทําให้ชื่อจากด้านบนลดลงด้วยผลกระทบการเด้ง.

1. เลือกข้อความหัวเรื่อง
2. เปิด **
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: เพิ่ม ความ เห็น เข้า กับ ผล กระทบ ที่ ไม่ ดี

1. สร้างข้อความกํากับ: < mination >
2. ขนาดตัวอักษร: ~~~, สี: #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' }
]);

ขั้น ที่ 5: เพิ่ม อนุภาค

สร้างความสนใจภาพ ด้วยธาตุที่หมุนรอบ.

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

4. ทําซ้ําและสร้างอนุภาคอีก 2 อนุภาค ที่มีเรดิไอและความเร็วที่แตกต่างกัน
   • อนุภาค 2: รัศมี 120, ความเร็ว 0.7, สี #f472b6 (pink)
   • อนุภาค 3: รัศมี 180, ความเร็ว 0.3, สี #34d399 (เขียว)

ขั้นที่ 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. กด 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);

ความแตกต่าง

เปิดเผยจดหมาย

ใช้อักษร callage with animation ที่ถูกเลื่อน:

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

ข้อ แนะ

“Timeing is Anything” — องค์ประกอบเริ่มต้นที่เวลาต่างกันเล็กน้อย (0.1-0.2s) สําหรับความรู้สึกตามธรรมชาติมากขึ้น.

~Combine lefts ~ — ใช้ bounce เพื่อลงจอด, elastic สําหรับปรับขนาด, easeOut เพื่อการหรี่เสียง.

‘60fps สําหรับฟิสิกส์’ — อัตราเฟรมที่สูงกว่าทําให้ผลกระทบการกระเด้ง/ปฏิกิริยาดูราบรื่นขึ้น.

ขั้นถัดไป

• [morphing animation] (/tutorials/morphing) — การแปลงรูปร่างเป็นกันและกัน
• (/tutorials/map-animation) — ข้อมูลภูมิศาสตร์แบบเคลื่อนไหว
• [Realation System] (/features/relations) — ดําน้ําลึกเข้าไปในความสัมพันธ์ของรายการ