Hướng dẫn: Tạo một cột động động

Học cách tạo ra một câu trích dẫn hoạt động bằng mắt cho các câu chuyện bằng phim hoạt hình của Letter.

Time: 10 phút Difficulty: Bắt đầuer

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

Một câu nói sống động gây ấn tượng với ba cụm từ, mỗi câu sử dụng những cách ghép chữ khác nhau và những cách khác nhau cho thấy hoạt hình.

Trích dẫn động lực

Những đặc điểm bạn sẽ học

• leter Collage phong cách — Neon đá lát, tạp chí cắt giảm, hiệu ứng cắt giấy
• Staggered hoạt hình — Thư xuất hiện từng người một
• ** Máy phát điện mặt đất * — nền mặt trời hoạt cảnh
• Key khung hoạt hình — chuyển đổi màu và hiệu ứng lấp lánh

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

1. Open PinePaper Editor
2. Nhấn vào kích cỡ canvas thả xuống vào chân
3. Chọn Instagram Story (108×1920)

Bước 2: Thêm nền hoạt cảnh

1. Nhấn vào thanh bên phải Scenes
2. Đặt chế độ nền thành Gorator
3. Chọn Sunburst
4. Cấu hình các màu:
   • Màu 1: #FF6B6B ( giáng đỏ)
   • Màu 2: #4ECDC4 (teal)
   • Màu 3: #FFE66D (yellow)
5. Đặt Ray Count: 16
6. Bật Animate và đặt Speed: 0. 5
7. Click Gorrarate

Nền mặt trời chiếu sáng với màu sắc rực rỡ

Bước 3: Tạo dấu chấm phẩy chữ “DRAM lớn”

1. Ấn vào nút Letter Collage trong Thanh công cụ (hay bấm Q1Q)
2. Kiểu: DRAM big
3. Cấu hình kiểu:
   • Kiểu: Tile
   • Bảng màu: Neon
   • Cỡ phông chữ: 72
   • Bán kính góc: 8
   • Bật bóng
4. Vị trí trên cùng giữa (x: 540, y: 750)

Mã tương đương:

const dreamBig = app.letterCollage.create('DREAM BIG', {
  style: 'tile',
  palette: 'neon',
  x: 540,
  y: 750,
  fontSize: 72,
  cornerRadius: 8,
  shadowEnabled: true
});

Bước 4:

1. Với bản ghép được chọn, mở bảng điều khiển Timeline
2. Click Ad Staggered hoạt hình
3. Cấu hình:
   • Hiệu ứng: Pop In
   • Cám ơn
   • Thời gian: 0.5s
   • Chuỗi: Linear (từ trái sang phải)
   • Thoát ra

Mã tương đương:

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});

Bước 5: Tạo “WORK HARD” “Cellage”

1. Tạo một tập tin ký tự khác bằng:

   • Văn bản: WORK HARD
   • Kiểu dáng: Magazine (nhìn chú giải)
   • Bảng màu: Magazine
   • Cỡ phông chữ: 60
   • Vị trí: 540, 920)

2. Thêm hoạt hình đã so le:

   • Hiệu ứng: Fade Slide Up
   • Tiến lại gần: 0.1s
   • Dòng: Wave (Sự tiết lộ chảy)

Mã tương đương:

const workHard = app.letterCollage.create('WORK HARD', {
  style: 'magazine',
  palette: 'magazine',
  x: 540,
  y: 920,
  fontSize: 60
});

app.letterCollage.applyStaggeredAnimation(workHard.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.1,
  duration: 0.6,
  sequence: 'wave',
  easing: 'easeOut'
});

Bước 6: Tạo “STAY HUMBLE” Bức thư Collage

1. Tạo dòng chữ thứ ba:

   • Văn bản: STAY HUMBLE
   • Kiểu dáng: Pper Cut ( Hiệu ứng bóng 3D)
   • Cỡ phông chữ: 68
   • Vị trí: 540, 1100)

2. Thêm hoạt hình đã so le với:

   • Hiệu ứng: Pop In
   • Tiến lên
   • Các chuỗi: Center (từ giữa ra ngoài)
   • Phát triển: Bounce

Mã tương đương:

const stayHumble = app.letterCollage.create('STAY HUMBLE', {
  style: 'paperCut',
  x: 540,
  y: 1100,
  fontSize: 68
});

app.letterCollage.applyStaggeredAnimation(stayHumble.collageId, {
  effect: 'popIn',
  staggerDelay: 0.06,
  duration: 0.4,
  sequence: 'center',
  easing: 'bounce'
});

Bước 7: Thêm đường màu

1. Tạo hình chữ nhật cho bộ chia trang trí:

   • Bề rộng: 500, chiều cao: 8
   • Màu: trắng (#FFFFFF)
   • Vị trí bên dưới đoạn văn

2. Thêm khung phím cho rung động màu:

Mã tương đương:

const accentLine = app.create('rectangle', {
  x: 540, y: 1280,
  width: 500, height: 8,
  color: '#FFFFFF'
});

app.addAnimation(accentLine.data.id, [
  { time: 1.5, properties: { opacity: 0, scaleX: 0 } },
  { time: 2.0, properties: { opacity: 1, scaleX: 1 }, easing: 'easeOut' },
  { time: 3.0, properties: { fillColor: '#FFFFFF' } },
  { time: 3.8, properties: { fillColor: '#000000' }, easing: 'easeInOut' },
  { time: 4.6, properties: { fillColor: '#FFFFFF' }, easing: 'easeInOut' }
]);

Bước 8: Xem thử và phát

1. Nhấn Space để chơi hoạt hình
2. Dòng thời gian cho thấy một vòng lặp 6 giây
3. Xem những gì bị lung lay tiết lộ:
   • “DRAM vĩ đại” xuất hiện trong thư từ
   • “WORK HARD” xuất hiện với hiệu ứng sóng
   • “STAY HUMLE” nảy ra từ giữa

Bước 9: Xuất

Cho câu chuyện Facebook (Video)

1. Nhấn vào nút Export
2. Chọn WebM (được chọn) hay MP4
3. Cấu hình:
   • Thời gian: 6 giây
   • Tỷ lệ khung: 30 fps
   • Chất lượng: Thượng lưu
4. Click Export và chờ tải về

Nền tảng khác

Bộ mã toàn bộ

Đây là đoạn mã đầy đủ để tái tạo lại hoạt hình này:

// Setup canvas
app.setCanvasSize('instagram-story');

// Animated sunburst background
app.executeGenerator('drawSunburst', {
  colors: ['#FF6B6B', '#4ECDC4', '#FFE66D'],
  rayCount: 16,
  animate: true,
  animationSpeed: 0.5
});

// "DREAM BIG" - Neon tile style
const dreamBig = app.letterCollage.create('DREAM BIG', {
  style: 'tile',
  palette: 'neon',
  x: 540, y: 750,
  fontSize: 72,
  cornerRadius: 8,
  shadowEnabled: true
});

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});

// "WORK HARD" - Magazine ransom style
const workHard = app.letterCollage.create('WORK HARD', {
  style: 'magazine',
  palette: 'magazine',
  x: 540, y: 920,
  fontSize: 60
});

app.letterCollage.applyStaggeredAnimation(workHard.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.1,
  duration: 0.6,
  sequence: 'wave',
  easing: 'easeOut'
});

// "STAY HUMBLE" - Paper cut style
const stayHumble = app.letterCollage.create('STAY HUMBLE', {
  style: 'paperCut',
  x: 540, y: 1100,
  fontSize: 68
});

app.letterCollage.applyStaggeredAnimation(stayHumble.collageId, {
  effect: 'popIn',
  staggerDelay: 0.06,
  duration: 0.4,
  sequence: 'center',
  easing: 'bounce'
});

// Accent line with color animation
const accentLine = app.create('rectangle', {
  x: 540, y: 1280,
  width: 500, height: 8,
  color: '#FFFFFF'
});

app.addAnimation(accentLine.data.id, [
  { time: 1.5, properties: { opacity: 0, scaleX: 0 } },
  { time: 2.0, properties: { opacity: 1, scaleX: 1 }, easing: 'easeOut' },
  { time: 3.8, properties: { fillColor: '#000000' }, easing: 'easeInOut' },
  { time: 4.6, properties: { fillColor: '#FFFFFF' }, easing: 'easeInOut' }
]);

// Play the 6-second loop
app.playKeyframeTimeline(6, true);

Chạy nhanh: Dùng mẫu

Thay vì xây dựng từ con số không, nạp mẫu đã xây dựng sẵn:

1. Mở bảng điều khiển ** (bên phải thanh)
2. Chọn loại: Socal Media
3. Click Trích dẫn tiến hóa
4. Name

Tài liệu tham khảo

Comment

Mẹo

Contrast vấn đề — Ánh sáng văn bản về quá trình tối (hoặc ngược lại) là thiết yếu cho khả năng đọc.

Stagger time — 0.05-0.1s giữa các chữ cái là tự nhiên. Quá nhanh nhìn cơ khí.

Mix phong cách — Dùng các kiểu chữ cái khác nhau cho mỗi cụm từ thêm phần gây chú ý.

Bounce để nhấn mạnh — The bounce giảm cường trên “STAY HUMBBLE” gây thêm sự chú ý.

Bước kế

• Dịch bởi Vũ Hạnh, Mai Linh, Nga, Huy Tô, Yuki, Ann, Phương The Vampire3X Subteam
• Dịch bởi Vũ Hạnh, Mai Linh, Nga, Huy Tô, Yuki, Ann, Phương
• Dịch bởi Vũ Hạnh, Mai Linh, Nga, Huy Tô, Yuki, Ann, Phương
• Dịch bởi Vũ Hạnh, Mai Linh, Nga, Huy Tô, Yuki, Ann, Phương