Biến dữ liệu thành animation — lợi thế thực tế của Cavalry

---

Mục tiêu kỹ thuật

• Import CSV / JSON vào Cavalry
• Bind (liên kết) dữ liệu → thuộc tính (text, scale, position)
• Tạo bar chart animation tự cập nhật theo data
• Hiểu cách xây template dùng lại

---

1. Chuẩn bị dữ liệu (CSV)

Tạo file CSV (rất quan trọng — làm đúng format)

Mở Excel/Google Sheets → tạo bảng:

Name,Value
A,30
B,55
C,80
D,45
E,70

Lưu:

• File → Save as → .csv

👉 Quy tắc:

• Dòng 1 = header
• Không ký tự lạ / khoảng trắng thừa

---

2. Import vào Cavalry

Bước

• File → Import → Data (CSV/JSON)
• Chọn file vừa tạo

---

Kết quả

• Xuất hiện Data Source trong scene

---

3. Tạo bar chart (cấu trúc cơ bản)

Mục tiêu: mỗi dòng = 1 cột

---

Bước 1 — tạo Rectangle (bar gốc)

• Width: 80
• Height: 10 (tạm thời nhỏ)
• Anchor: đặt bottom (quan trọng)

👉 Anchor bottom giúp bar “mọc lên” từ đáy

---

Bước 2 — Repeater

• Count = số dòng data (5)
• X spacing: 120

---

4. Bind dữ liệu → chiều cao

Mục tiêu: Value điều khiển Height

---

Bước 1

• Chọn Rectangle

Bước 2

• Tại Height:
  • Bind tới:
    • Value (từ CSV)

---

Bước 3 — scale hệ số

• Vì Value nhỏ, cần nhân:
  • Height = Value * 5–10

---

👉 Kết quả:

• Mỗi bar cao thấp theo data

---

5. Bind text (label)

Mục tiêu: hiển thị Name + Value

---

Bước 1

• Tạo Text dưới mỗi bar

Bước 2

• Bind:
  • Text = Name

---

Bước 3 (tuỳ chọn)

• Tạo Text khác:
  • Bind = Value

---

👉 Mỗi cột có label riêng

---

6. Animate bar chart

Mục tiêu: cột “mọc lên”

---

Bước 1

• Animate Scale Y:
  • 0s: 0%
  • 1s: 100%

---

Bước 2 — offset theo index

• Delay: 0.1–0.2s

---

👉 Kết quả:

• Cột xuất hiện lần lượt

---

7. Thêm easing chuẩn

• Ease Out cho Scale
  → mọc nhanh, dừng mềm

---

8. Auto update (điểm mạnh)

Test

Bước

• Mở file CSV
• Đổi:
  • Value (ví dụ 30 → 90)
• Save → quay lại Cavalry

---

👉 Kết quả:

• Chart tự thay đổi

---

9. Sorting (nâng cao nhẹ)

Mục tiêu: sắp xếp cột theo Value

---

Cách

• Trong Data Source:
  • Sort by Value
  • Asc / Desc

---

👉 Dùng cho:

• Ranking animation

---

10. Dùng JSON (khi phức tạp hơn)

Ví dụ JSON

[
  {"name": "A", "value": 30},
  {"name": "B", "value": 55}
]

---

👉 JSON phù hợp:

• Data lồng nhau
• API / automation

---

11. Mini project — Animated Chart

Yêu cầu

• ≥ 5 bars
• Có:
  • Height bind từ data
  • Text label
  • Animation stagger
  • Easing

---

12. Template hóa (rất quan trọng)

Mục tiêu: dùng lại

---

Bước

• Giữ:
  • Data source
  • Binding
• Khi cần:
  • Chỉ thay CSV

---

👉 1 file → nhiều video khác nhau

---

13. Checklist kỹ thuật

• CSV đúng format
• Bind đúng field (Name/Value)
• Có scale hệ số
• Anchor đúng (bottom)
• Animation có offset

---

14. Lỗi phổ biến

1. CSV lỗi format

→ Không load được

2. Quên scale Value

→ Bar quá nhỏ

3. Anchor sai

→ Bar phóng từ giữa (xấu)

4. Không offset

→ Tất cả mọc cùng lúc

---

15. Tư duy quan trọng

• Đây không còn là “animation thủ công”
• Mà là:Hệ thống render dữ liệu thành motion

---

Ứng dụng thực tế

• Video báo cáo
• Content TikTok (top list, stats)
• Ads tự động
• Dashboard animation

---

Công thức

• Visual:Repeater
• Logic:Data binding
• Motion:Offset + easing