Mục tiêu kỹ thuật

• Kiểm soát visual hierarchy (thứ tự nhìn)
• Sử dụng shape + màu + spacing đúng
• Tránh lỗi phổ biến: animation đúng nhưng xấu / rối / rẻ tiền

---

1. Chuẩn bị scene

Bước 1

• New Scene:
  • 1920×1080
  • 3–4s
  • 30fps

Bước 2 (background)

• Tạo Rectangle full màn:
  • Width: 1920
  • Height: 1080
  • Fill: màu tối (ví dụ: #0F172A)

👉 Luôn có background rõ ràng → tránh “trôi nổi”

---

2. Tạo layout cơ bản (quan trọng hơn animation)

Mục tiêu: bố cục sạch, có chủ thể

---

Bước 1 — tạo 3 hình

• Circle (trung tâm)
  • Size: 160
  • Màu: sáng (ví dụ: xanh)
• 2 Rectangle nhỏ:
  • Size: 80 x 80
  • Màu phụ

---

Bước 2 — căn chỉnh

• Chọn tất cả → dùng Align
  • Circle ở giữa
  • 2 rectangle hai bên

👉 Nguyên tắc:

• 1 main object
• 2 support objects

---

3. Áp dụng nguyên tắc màu (không làm bừa)

Dùng công thức an toàn:

• 1 màu chính (primary)
• 1 màu phụ (secondary)
• 1 màu nền (background)

---

Ví dụ:

• Background: tối
• Main: xanh sáng
• Phụ: tím / cyan nhẹ

👉 Tránh:

• Quá nhiều màu
• Màu saturation cao cùng lúc

---

4. Bo góc (corner radius)

Bước

• Chọn Rectangle
• Corner Radius: 16–24

👉 Kết quả:

• Nhìn “modern” hơn ngay lập tức

---

5. Thêm shadow (tạo chiều sâu)

Bước

• Chọn Circle
• Add Shadow:
  • Blur: 20–40
  • Opacity: 20–30%

👉 Không lạm dụng → chỉ main object có shadow

---

6. Animate đúng cách (không phá layout)

Mục tiêu: animation hỗ trợ design

---

Bước 1 — animate Circle (main)

• Frame 0:
  • Scale: 0% → keyframe
• Frame 0.6s:
  • Scale: 110%
• Frame 0.9s:
  • Scale: 100%

👉 Tạo hiệu ứng “pop”

---

Bước 2 — animate 2 rectangle

Quan trọng: không chạy cùng lúc

• Rectangle trái:
  • Start: 0.3s
  • Slide từ trái vào
• Rectangle phải:
  • Start: 0.5s
  • Slide từ phải vào

---

👉 Đây là:
Stagger (lệch thời gian)

---

7. Easing chuẩn design

Bước

• Chọn tất cả keyframe
• Dùng:
  • Ease Out cho entrance
  • Ease In cho exit (nếu có)

---

👉 Quy tắc:

• Vào nhanh, dừng mềm
• Không dùng linear

---

8. Tạo nhịp (timing rhythm)

Mẫu timing chuẩn:

• Main xuất hiện: 0 → 0.6s
• Phụ 1: 0.3s
• Phụ 2: 0.5s

👉 Mắt người sẽ:

• Nhìn main trước
• Sau đó mới tới phụ

---

9. Mini animation hoàn chỉnh

Bạn cần đạt:

• Circle:
  • Pop in (scale)
• 2 Rectangle:
  • Slide in lệch nhau
• Tổng thời gian:
  • ~2–3s

---

10. Kiểm tra chất lượng (rất quan trọng)

Checklist:

• Có 1 điểm focus rõ (không rối)
• Màu không chói
• Object không chồng lấn vô nghĩa
• Animation không đồng loạt
• Có nhịp (rhythm)

---

11. Bài tập bắt buộc

Bài 1

• Tạo layout:
  • 1 hình tròn lớn
  • 3 hình nhỏ xung quanh
• Animate stagger

Bài 2

• Làm lại nhưng:
  • Đổi màu (theme khác)
  • Giữ bố cục

👉 Mục tiêu: luyện design consistency

---

12. Lỗi phổ biến

1. “Mỗi cái chạy một kiểu”

→ Thiếu hệ thống

2. Màu quá nhiều

→ Nhìn rẻ ngay lập tức

3. Tất cả xuất hiện cùng lúc

→ Mất focus

4. Không có khoảng trắng

→ Bị ngộp

---

13. Tư duy quan trọng

• Ngày 1–2: bạn làm cho chạy
• Ngày 3: bạn làm cho đẹp và có thứ tự

Motion tốt = Design + Timing (không chỉ kỹ thuật)