Chuyển từ “animate từng object” → “thiết kế hệ thống tự chạy”

Mục tiêu kỹ thuật

• Tạo nhiều phần tử bằng Repeater/Array
• Điều khiển bằng 1 nguồn thay vì keyframe từng object
• Làm 2 pattern: grid và circular loader

---

1. Chuẩn bị scene

Bước

• New Scene: 1920×1080, 30fps, 3–4s
• Background tối (#0F172A)

---

2. Tạo phần tử gốc (source)

Bước

• Tạo Circle
  • Size: 20–24
  • Fill: màu sáng

👉 Nguyên tắc:

Chỉ làm việc với 1 object gốc, phần còn lại để hệ thống nhân bản.

---

3. Repeater dạng Grid

Mục tiêu: tạo ma trận chấm (dots grid)

---

Bước 1 — thêm Repeater

• Chọn Circle
• Add → Repeater / Array

---

Bước 2 — thiết lập grid

Trong Inspector của Repeater:

• Columns: 12
• Rows: 6
• X Spacing: 40
• Y Spacing: 40

👉 Bạn đã có ~72 phần tử không cần duplicate thủ công.

---

Bước 3 — căn giữa

• Bật Align → Center toàn bộ grid vào màn hình

---

4. Animate theo index (offset)

Mục tiêu: tạo “wave” chạy qua grid

---

Bước 1 — animate Scale của Circle gốc

• Time 0s: Scale 40% → keyframe
• Time 1s: Scale 100%

---

Bước 2 — offset theo index

Trong Repeater:

• Tìm Offset / Delay / Index Offset
• Set:
  • Delay: 0.02–0.05s

---

👉 Kết quả:

• Mỗi chấm scale lệch nhau → tạo sóng

---

5. Biến wave thành “sống”

Thêm loop

Bước

• Keyframe:
  • 0s: 40%
  • 0.5s: 100%
  • 1s: 40%
• Bật loop (nếu có) hoặc copy chu kỳ

---

👉 Bạn có wave chạy liên tục.

---

6. Repeater dạng Circular (radial)

Mục tiêu: tạo loading spinner

---

Bước 1 — tạo Circle mới

• Size: 16
• Đặt lệch tâm (ví dụ X = 150)

---

Bước 2 — thêm Repeater

• Count: 12–16

---

Bước 3 — xoay vòng

• Rotation tổng: 360°

👉 Hệ thống tự phân bố thành vòng tròn.

---

7. Animate loader

Cách 1 — rotate cả hệ

Bước

• Group toàn bộ
• Rotation:
  • 0s: 0°
  • 2s: 360°
• Linear

---

Cách 2 — fade theo index (đẹp hơn)

Bước

• Animate Opacity:
  • 100% → 20%
• Offset theo index:
  • Delay: 0.05s

---

👉 Hiệu ứng “đuổi nhau” (classic loader)

---

8. Kết hợp Scale + Opacity

Bước

• Scale: 60% → 100%
• Opacity: 30% → 100%
• Offset theo index

---

👉 Loader nhìn “có chiều sâu” hơn.

---

9. Nguyên tắc cốt lõi cần hiểu

1. Source-driven

• Mọi thứ bắt đầu từ 1 object

2. Index-based animation

• Animation lệch nhau theo thứ tự

3. Không duplicate thủ công

• Nếu bạn Ctrl+D nhiều → đang làm sai cách

---

10. Mini project (bắt buộc)

Project 1 — Wave grid

• Grid ≥ 8×8
• Có:
  • Scale wave
  • Loop
  • Offset index

---

Project 2 — Loading spinner

• Circular repeater
• Có:
  • Rotation hoặc fade offset
  • Loop mượt

---

11. Checklist

• Không duplicate object thủ công
• Dùng Repeater để tạo hệ
• Có offset theo index
• Animation loop mượt

---

12. Lỗi phổ biến

1. Animate từng phần tử

→ Sai tư duy Cavalry

2. Offset quá lớn

→ Motion bị rời rạc

3. Không loop chuẩn

→ Giật khi lặp

---

13. Tư duy quan trọng

• Ngày 1–4: bạn “điều khiển object”
• Ngày 5:Bạn thiết kế hệ thống sinh ra motion

---

So sánh nhanh

Cách cũ	Cách Cavalry
Duplicate 50 object	1 object + repeater
Keyframe từng cái	Offset theo index
Khó sửa	Sửa 1 → ảnh hưởng toàn bộ