Hoạt hình Hướng dẫn: Vật lý- Bassical

Tạo ra các hoạt hình tuyệt đẹp bằng cách phản xạ, co giãn và hiệu ứng trọng lực theo trình tự khung phím.

Thời gian: 15 phút Difficulty: Cấp cao

Những gì bạn sẽ tạo ra

Một tiêu đề ấn tượng tiết lộ với hoạt hình dựa trên vật lý, các yếu tố quỹ đạo, và các chuyển động của máy ảnh mịn.

Những đặc điểm được che đậy

• Bounce làm giảm — Hiệu ứng viên bóng với vật lý thực tế
• Elustic làm giảm - giống như quá tay
• Key khung trình tự - chính xác thời gian của vũ đạo đa nhịp điệu
• Mối quan hệ Orbital — Các yếu tố xoay quanh một điểm trung tâm
• Camera hoạt hình — Hiệu ứng thu nhỏ mịn

Bước 1: Chuẩn bị dây

1. Open PinePaper Editor
2. Đặt kích cỡ của vải bạt là YouTube thu nhỏ (128×720)
3. Đặt màu nền là #0a0a0a (mặc định đen)

Bước 2: Tạo tiêu đề chính

1. Nhấn T cho công cụ văn bản
2. Ấn vào giữa vải, loại: PHYSICS
3. Bảng thuộc tính
   • Cỡ phông chữ: 120
   • Gia đình phông chữ: Inter (hoặc bất kỳ Sans-serif táo bạo)
   • Màu: #ffffff
4. Tập trung vào vải

Bước 3: Thêm lực hấp dẫn thả hoạt họa

Chúng ta sẽ đặt tiêu đề xuống từ trên cùng với hiệu ứng phản xạ.

1. Chọn đoạn tựa
2. Mở Timeline board (Tiếng cười)
3. Thêm khung phím:

Mã tương đương:

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

Bước 4: Thêm phụ đề với hiệu ứng cao độ

1. Tạo phụ đề: IN MOction
2. Cỡ phông: 48, màu: #60a5fa (xanh)
3. Vị trí dưới tiêu đề chính

Thêm hoạt hình đàn hồi:

Mã tương đương:

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

Bước 5: Thêm hạt hấp thụ

Tạo ra sự quan tâm bằng thị giác với các yếu tố quỹ đạo.

1. Tạo một vòng tròn nhỏ: bán kính 8, màu #fbbf24 (thành phố)
2. Vị trí gần giữa
3. Thêm orbits họ hàng:

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. Lặp lại và tạo ra thêm 2 hạt với các đường kính và tốc độ khác nhau:
   • Hạt 2: Bán kính 120, Tốc độ 0. 7, màu #f472b6 (pink)
   • Hạt 3: Bán kính 180, Tốc độ 0. 3, màu #34d399 (xanh)

Bước 6: Thêm cỡ ảnh

Tạo một cảm giác phim ảnh với hoạt hình máy ảnh.

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

Bước 7: Xem thử và Xuất

1. Nhấn Space để xem thử
2. Điều chỉnh thời gian khi cần
3. Xuất dạng WebM (đã kết hợp) hay MP4
   • Thời gian: 3 giây
   • Tỷ lệ khung: 60 fps (vật lý khác)
   • Loop: Yes (cho mạng xã hội)

Bộ mã toàn bộ

Đây là mã hoạt hình đầy đủ để tham khảo:

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

Biến thế

Thư được in ra

Dùng bản tóm tắt chữ cái với hoạt hình bị lung lay:

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

Hoạt hình đường dẫn

Làm cho các nguyên tố đi theo một đường cong Bzier:

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

Mẹo

Đánh bóng là mọi thứ — Bắt đầu các yếu tố khác nhau tại thời điểm (0.1-0.2 khác nhau) để cảm nhận tự nhiên hơn.

Combin làm giảm dần — Dùng bounce để hạ cánh, elastic để phóng to, easeOut để giảm dần.

60fps cho vật lý — tỷ lệ khung cao hơn làm hiệu ứng phản hồi trông mịn hơn.

Bước kế

• Biến hình thành nhau
• [Map hoạt hình] (/tutorials/map-animation) — dữ liệu động địa lý
• Dịch bởi Vũ Hạnh, Mai Linh, Nga, Huy Tô, Yuki, Ann, Phương