Mục tiêu kỹ thuật

• Kiểm soát độ trễ theo thứ tự (index-based delay) một cách chính xác
• Tạo các pattern: domino, wave có hướng, ripple
• Phân biệt rõ: stagger đơn giản vs offset hệ thống

---

1. Ôn nhanh (đặt đúng tư duy)

• Ngày 5: bạn đã có Repeater + Offset cơ bản
• Ngày 6: bạn cần đạt:Điều khiển ai chạy trước, ai chạy sau, chạy theo hướng nào

---

2. Setup bài chính (grid nâng cao)

Bước

• Tạo Circle (size ~20)
• Add Repeater:
  • Columns: 12
  • Rows: 8
  • Spacing: 40
• Center vào màn hình

---

3. Phân biệt 2 kiểu delay

1. Delay theo index (1 chiều)

→ chạy theo thứ tự tạo phần tử

2. Delay theo không gian (2D)

→ chạy theo vị trí (trái→phải, trên→dưới, từ tâm ra)

👉 Ngày 6 tập trung vào cả hai

---

4. Domino effect (1 chiều rõ ràng)

Mục tiêu: chạy lần lượt từ trái → phải

---

Bước 1 — animate source

• Scale:
  • 0s: 40%
  • 0.6s: 100%

---

Bước 2 — offset

Trong Repeater:

• Delay: 0.03–0.05s

---

Bước 3 — kiểm tra thứ tự

Nếu chạy sai hướng:

• Đổi:
  • Reverse index (nếu có)
  • Hoặc đảo trục X

---

👉 Kết quả:

• Hiệu ứng domino chuẩn

---

5. Wave 2 chiều (quan trọng)

Mục tiêu: sóng lan theo hàng hoặc cột

---

Cách 1 — theo hàng ngang

Ý tưởng:

• Mỗi hàng chạy cùng lúc
• Hàng dưới trễ hơn

---

Bước

• Dùng tham số liên quan Row index
• Delay theo Row:
  • row * 0.05

---

Kết quả:

• Sóng đi từ trên → xuống

---

Cách 2 — theo cột

• Delay:
  • column * 0.05

→ Sóng trái → phải

---

6. Ripple (lan từ tâm)

Mục tiêu: sóng lan từ giữa ra ngoài

---

Bước 1

• Xác định tâm grid

Bước 2

• Dùng khoảng cách:
  • distance từ center

---

Trong Cavalry (concept)

• Delay ∝ distance

---

👉 Kết quả:

• Motion lan tròn (giống sóng nước)

---

7. Kết hợp nhiều layer delay

Mục tiêu: motion “giàu” hơn

---

Bước

Trên cùng 1 system:

• Scale: offset theo index
• Opacity: offset khác (0.02s)
• Position: offset nhẹ (0.01s)

---

👉 Không phải mọi thuộc tính đều delay giống nhau

---

8. Overlap (chồng nhịp)

Vấn đề

Nếu delay quá đều → nhìn “máy móc”

---

Cách xử lý

• Thêm overlap:
  • Object sau bắt đầu khi object trước chưa xong

---

Thiết lập

• Delay nhỏ hơn duration animation

Ví dụ:

• Animation: 0.6s
• Delay: 0.03s

---

👉 Tạo cảm giác liên tục

---

9. Mini project 1 — Advanced Wave Grid

Yêu cầu

• Grid ≥ 10×6
• Có:
  • Wave theo 1 hướng (row hoặc column)
  • Loop mượt
  • Scale + Opacity

---

10. Mini project 2 — Ripple Effect

Yêu cầu

• Lan từ tâm ra
• Có:
  • Scale hoặc Position
  • Delay theo distance
  • Nhịp rõ ràng

---

11. Checklist kỹ thuật

• Hiểu index ≠ position
• Biết điều khiển hướng (trái/phải/trên/dưới/tâm)
• Delay không phá nhịp tổng
• Có overlap (không bị rời rạc)

---

12. Lỗi phổ biến

1. Chỉ dùng 1 loại delay

→ Motion nghèo

2. Delay quá lớn

→ Nhìn như từng đoạn rời

3. Không kiểm soát hướng

→ Motion “ngẫu nhiên”, thiếu ý đồ

4. Tất cả thuộc tính delay giống nhau

→ Thiếu chiều sâu

---

13. Tư duy quan trọng

• Ngày 5: bạn có hệ thống
• Ngày 6:Bạn điều khiển nhịp của hệ thống

---

Công thức đơn giản cần nhớ

• Domino:delay = index * k
• Wave:delay = row/column * k
• Ripple:delay = distance * k