Trình chỉnh Easing & Cubic-Bezier
Kéo hai tay nắm P1, P2 để bẻ đường cong tốc độ, rồi bấm Play xem chấm chạy đúng theo easing đó. Trục ngang = thời gian, trục dọc = tiến độ, độ dốc = tốc độ.
Trình chỉnh đường cong (kéo tay nắm)
P0=(0,0) và P3=(1,1) cố định. Kéo P1, P2 — x giới hạn [0,1], y được ra ngoài [0,1] để tạo overshoot/nảy.
cubic-bezier(0.25, 0.10, 0.25, 1.00)
P1 = (0.25, 0.10)
P2 = (0.25, 1.00)
Cảm nhận tốc độ (Play để xem chấm chạy)
Chấm cam chạy theo easing đang chỉnh; chấm xám chạy tốc độ đều (linear) để so. Cả hai xuất phát và về đích cùng lúc — chỉ khác cách phân bố tốc độ.
Easing đang chỉnh
▶
Linear (tham chiếu)
●
Thời lượng: 1.4s
t = 0.00 · giá trị = 0.00
Dấu vết thời gian đều: các chấm mờ đặt tại những mốc thời gian cách đều (0, 0.1, 0.2 …). Chúng dồn lại chỗ vật chậm, giãn ra chỗ vật nhanh — chính là "spacing chart" của nguyên lý Timing & Spacing.
Cách đọc
• Dốc đứng = nhanh, thoai thoải = chậm, nằm ngang = đứng yên. Đường cong luôn đi từ góc dưới-trái (0,0) tới góc trên-phải (1,1).
• Kéo P1 lên cao → khởi đầu nhanh; để P1 nằm thấp-ngang → khởi đầu chậm (ease-in). Kéo P2 lên sát y=1 → về đích êm (ease-out).
• Kéo P2 lên trên y=1 (thử preset Nảy) → đường cong vọt quá đích rồi lùi về = overshoot. Thời gian (x) luôn bị giữ trong [0,1].
• Tham số vẽ đường cong t KHÔNG phải thời gian; chấm chạy dùng phép giải ngược (bisection) để tìm giá trị tại mỗi mốc thời gian thật.