Tạo animation “vẽ nét”, reveal logo/text chuẩn branding

---

Mục tiêu kỹ thuật

• Làm chủ Path (đường vector)
• Dùng Trim Path để “vẽ dần”
• Dùng Mask để reveal có kiểm soát
• Kết hợp với Offset / Easing để có nhịp chuyên nghiệp

---

1. Chuẩn bị scene

Bước

• New Scene: 1920×1080, 3–4s, 30fps
• Background tối

---

2. Vẽ Path cơ bản

Mục tiêu: tạo đường để animate

---

Bước 1

• Chọn Pen / Path Tool
• Vẽ 1 đường cong đơn giản (S hoặc wave)

---

Bước 2 (style)

• Stroke:
  • Width: 6–10
  • Cap: Round
  • Join: Round

👉 Cap tròn giúp đầu nét đẹp khi animate

---

3. Trim Path (cốt lõi)

Mục tiêu: “vẽ đường từ 0 → 100%”

---

Bước 1

• Chọn Path
• Add → Trim Path

---

Bước 2 — animate

• Tham số:
  • Start
  • End

---

Cách cơ bản:

• 0s:
  • End = 0%
• 1.5s:
  • End = 100%

---

👉 Kết quả:

• Đường được “vẽ ra”

---

4. Tạo motion đẹp hơn

Vấn đề

Linear → nhìn kỹ thuật, không có cảm xúc

---

Bước

• Easing:
  • Ease In Out

---

Nâng cao

• Dùng Velocity Graph:
  • Bắt đầu chậm → nhanh → chậm

---

5. Animate kiểu “draw + erase”

Mục tiêu: nét chạy qua rồi biến mất

---

Setup

• 0s:
  • Start = 0%
  • End = 0%
• 1s:
  • End = 100%
• 2s:
  • Start = 100%

---

👉 Kết quả:

• Đầu nét chạy tới đâu, đuôi biến mất tới đó

---

6. Offset nhiều path (logo style)

Mục tiêu: nhiều nét vẽ lệch nhau

---

Bước 1

• Duplicate path (hoặc nhiều path khác nhau)

---

Bước 2

• Delay mỗi path:
  • 0.1–0.3s

---

👉 Kết quả:

• Animation có thứ tự, không đồng loạt

---

7. Mask (reveal có kiểm soát)

Mục tiêu: che/hiện nội dung theo vùng

---

Bước 1

• Tạo Rectangle (mask)

Bước 2

• Đặt lên trên object cần che

Bước 3

• Set:
  • Mask / Clipping (tuỳ Cavalry UI)

---

Bước 4 — animate mask

• Position X:
  • Trái → phải

---

👉 Kết quả:

• Nội dung “lộ ra” theo mask

---

8. Text + Trim Path (rất hay dùng)

Mục tiêu: text hiện theo nét vẽ

---

Cách 1 (outline text)

• Convert text → path (nếu có)
• Dùng Trim Path

---

Cách 2 (line chạy qua text)

• Tạo 1 path ngang qua chữ
• Animate Trim Path
• Kết hợp Mask

---

👉 Hiệu ứng giống:

• Logo reveal
• Signature animation

---

9. Kết hợp với Repeater

Mục tiêu: nhiều nét chạy cùng lúc

---

Bước

• Path → Repeater (5–10 bản)
• Offset theo index:
  • 0.05–0.1s

---

👉 Tạo hiệu ứng “multi-line draw”

---

10. Mini project 1 — Line Animation

Yêu cầu

• 1 path cong
• Trim Path từ 0 → 100%
• Có easing đẹp

---

11. Mini project 2 — Logo Reveal (giả lập)

Yêu cầu

• 2–4 path
• Vẽ lần lượt (offset)
• Kết hợp mask hoặc fade

---

12. Mini project 3 — Text Reveal

Yêu cầu

• 1 dòng text
• Reveal bằng:
  • Mask hoặc line chạy qua

---

13. Checklist kỹ thuật

• Stroke có round cap
• Trim Path không linear
• Có offset nếu nhiều path
• Mask không bị lệch layer

---

14. Lỗi phổ biến

1. Stroke đầu vuông

→ Nhìn thô ngay lập tức

2. Không easing

→ Motion “kỹ thuật”, thiếu cảm xúc

3. Path quá phức tạp

→ Khó kiểm soát timing

4. Mask sai thứ tự layer

→ Không hoạt động

---

15. Tư duy quan trọng

• Trim Path không chỉ là hiệu ứng
• Nó là:Công cụ kể chuyện bằng “đường đi”

---

So sánh nhanh

Cách thường	Cách chuyên
Fade in	Draw bằng path
Xuất hiện đột ngột	Reveal có dẫn dắt
Ít kiểm soát	Kiểm soát từng %

---

Công thức dùng nhiều

• Logo:Trim Path + Offset + Ease
• Text:Mask + Line motion