Biến project thành “hệ điều khiển”: chỉnh 1 chỗ → cập nhật toàn bộ

---

Mục tiêu kỹ thuật

• Tạo Control (Slider / Checkbox / Dropdown)
• Link properties (liên kết nhiều thuộc tính về 1 nguồn)
• Viết expression cơ bản để:
  • Chuẩn hoá (normalize) giá trị
  • Map (remap) dải giá trị
  • Điều kiện (if/else)
• Đóng gói thành control panel dùng lại

---

1. Tạo Control (Slider)

Mục tiêu: có 1 biến trung tâm điều khiển nhiều thứ

---

Bước 1

• Add → Control → Slider

Bước 2

• Đặt tên: Progress
• Range:
  • Min: 0
  • Max: 100
  • Default: 0

---

👉 Tư duy:

Mọi animation có thể quy về 1 tham số “tiến trình”

---

2. Link trực tiếp (không expression)

Mục tiêu: hiểu cơ chế liên kết

---

Bước

• Chọn object (ví dụ Circle)
• Tại Opacity:
  • Link → chọn Progress

---

Kết quả

• Progress = 0 → Opacity = 0
• Progress = 100 → Opacity = 100

---

👉 Đây là mapping 1–1 (chưa linh hoạt)

---

3. Expression cơ bản (rất quan trọng)

Mục tiêu: biến Progress thành nhiều hành vi khác nhau

---

Ví dụ 1 — Scale từ 50% → 120%

50 + (Progress/100) * 70

---

Giải thích

• Progress 0 → Scale 50
• Progress 100 → Scale 120

---

Ví dụ 2 — Position X từ -300 → 300

-300 + (Progress/100) * 600

---

👉 Công thức chuẩn:

output = min + (input_norm * range)

---

4. Normalize (chuẩn hoá)

Mục tiêu: đưa mọi input về 0–1

---

Công thức

t = Progress / 100

---

👉 Sau đó dùng t cho mọi phép tính
→ code gọn, dễ kiểm soát

---

5. Easing bằng expression

Mục tiêu: không phụ thuộc keyframe

---

Ví dụ (ease in-out đơn giản)

t = Progress/100;
t*t*(3 - 2*t)

---

👉 Dùng t đã “smooth” này để điều khiển:

• Scale
• Position
• Opacity

---

6. Điều kiện (if / else)

Mục tiêu: thay đổi hành vi theo ngưỡng

---

Ví dụ — bật/tắt

Progress > 50 ? 100 : 0

---

👉 Ứng dụng:

• Hiện/ẩn element
• Trigger animation

---

7. Delay bằng expression (nâng cao nhẹ)

Mục tiêu: mỗi phần tử trễ khác nhau mà vẫn dùng 1 slider

---

Ý tưởng

• Mỗi phần tử có index

---

Ví dụ

t = clamp((Progress/100) - index*0.05, 0, 1);
t*100

---

👉 Kết quả:

• 1 slider → animate cả chuỗi (stagger)

---

8. Control cho Data (kết hợp Ngày 10)

Mục tiêu: điều khiển chart bằng slider

---

Bước

• Scale Y của bar:

(Value * 5) * (Progress/100)

---

👉 Progress = 0 → tất cả = 0
👉 Progress = 100 → full chart

---

9. Tạo Control Panel (chuẩn production)

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

---

Bước

• Gom tất cả control:
  • Progress
  • Speed
  • Amplitude
• Đặt tên rõ:
  • CTRL_Progress
  • CTRL_Speed

---

👉 Khi giao file:

• Người khác chỉ chỉnh control, không đụng layer

---

10. Mini project — One Slider System

Yêu cầu

• 1 Slider: Progress
• Điều khiển:
  • Scale (object chính)
  • Position (di chuyển)
  • Opacity (fade)
  • Repeater (offset)

---

👉 1 thanh kéo → toàn bộ animation chạy

---

11. Mini project — Controlled Chart

Yêu cầu

• Bar chart (Ngày 10)
• Dùng Progress:
  • Animate toàn bộ chart
• Có stagger bằng expression

---

12. Checklist kỹ thuật

• Có ít nhất 1 slider control
• Dùng normalize (0–1)
• Không hardcode giá trị lung tung
• Có expression cho stagger
• Control đặt tên rõ ràng

---

13. Lỗi phổ biến

1. Không normalize

→ Công thức rối, khó debug

2. Mỗi object 1 logic riêng

→ Không còn là system

3. Hardcode quá nhiều số

→ Không tái sử dụng được

4. Không đặt tên control

→ File không dùng lại được

---

14. Tư duy quan trọng

• Ngày 10: dữ liệu điều khiển visual
• Ngày 11:Bạn tạo lớp điều khiển nằm trên toàn bộ hệ thống

---

Kiến trúc chuẩn

• Layer 1: Visual (shape, text)
• Layer 2: System (repeater, field)
• Layer 3: Control (slider, expression)

---

Công thức cốt lõi

• Normalize:t = input / max
• Map:output = min + t * range
• Stagger:t = base – index * delay