Sự khác biệt giữa hoạt ảnh tốt và hoạt ảnh xuất sắc

• Hoạt ảnh là yếu tố cốt lõi quyết định chất lượng của UI, không chỉ làm giao diện đẹp mắt hơn mà còn mang lại cảm giác tự nhiên và tính trực quan trong tương tác
• Để tạo ra hoạt ảnh xuất sắc, cần có nhận thức về điểm gốc, lựa chọn Easing phù hợp, tận dụng hiệu ứng lò xo và hiểu sâu về công cụ
• So với các hàm CSS Easing cơ bản, đường cong Easing tùy chỉnh có thể truyền tải cảm giác nhập vai và năng lượng mạnh mẽ hơn
• Khi dùng hook useSpring của Framer Motion`, tương tác dựa trên vị trí chuột sẽ cho cảm giác chân thực và mượt mà hơn
• Hiểu càng sâu về các thuộc tính CSS thì càng có thể triển khai sáng tạo các hoạt ảnh mới hoặc cải thiện những hoạt ảnh hiện có

---

Hoạt ảnh nhận biết điểm gốc

• Với menu thả xuống mở ra khi nhấn nút, chuyển động bắt đầu từ vị trí của nút sẽ tạo cảm giác tự nhiên hơn
• Thay vì giá trị mặc định transform-origin: center, nên đặt là bottom center để tự nhiên hơn về mặt thị giác
• Dùng Radix hoặc shadcn/ui thì có thể được xử lý tự động

  .radix-dropdown {  
    transform-origin: var(--radix-popover-content-transform-origin);  
  }  
  

Sử dụng Easing phù hợp

• Trong đa số trường hợp, ease-in-out mang lại đường cong tăng tốc và giảm tốc tự nhiên hơn so với ease-in
• Đặc biệt khi một phần tử vốn đã tồn tại trên màn hình di chuyển, chuyển động thực tế kiểu như xe hơi tăng tốc rồi dừng lại là rất quan trọng
• Mặc định nên dùng ease-out, và có thể xem chi tiết ở liên kết riêng

Sử dụng đường cong Easing tùy chỉnh

• Easing mặc định của CSS (ease-in, ease-out) thiếu khả năng biểu đạt, nên cảm giác thực tế không mạnh
• ease phù hợp với các hiệu ứng đơn giản như hover, nhưng đa số chuyển động cần Easing tùy chỉnh
• Tài nguyên gợi ý:
  • easing.dev
  • easings.co

Tương tác dựa trên lò xo

• Nếu phần tử phản ứng ngay lập tức theo vị trí chuột thì có thể tạo cảm giác giả tạo
• Khi tận dụng Framer Motion và useSpring, sự thay đổi giá trị sẽ được phản ánh dần dần như lò xo, từ đó mang lại chuyển động chân thực và mượt mà hơn
• Cách này đặc biệt hiệu quả với hoạt ảnh mang tính trang trí, còn với UI thiên về chức năng thì có thể là ngoại lệ

Hiểu về công cụ

• Ví dụ: khi chuyển tab, màu chữ và thanh highlight cần chuyển đổi cùng nhau một cách tự nhiên
• Để làm được điều đó, cần tận dụng hợp lý clip-path và các kỹ thuật tương tự để hoạt ảnh không bị gượng
• Có thể nhận ra những khác biệt tinh tế bằng cách kiểm tra theo từng frame hoặc phát chậm
• Với biến đổi 3D trong CSS, cũng có thể triển khai sáng tạo các hiệu ứng như quỹ đạo hay hoạt ảnh loading 3D

Vì sao điều này quan trọng?

• Ngày nay, phần lớn phần mềm đã đủ tốt về mặt chức năng
• Để mang lại trải nghiệm khác biệt, UI cho cảm giác dễ chịu và yếu tố cốt lõi là hoạt ảnh là điều bắt buộc
• Hiểu khi nào, như thế nào và vì sao nên áp dụng hoạt ảnh ảnh hưởng rất lớn đến chất lượng sản phẩm
• Có thể xem nội dung chuyên sâu hơn trong khóa học Animations on the Web

[rhrnakrnakr]

Tiêu đề và nội dung không khớp nhau nhỉ. Bị lừa rồi.

[ndrgrd]

Animation thì đều tốt, nhưng có quá nhiều trang khiến ánh mắt bị hút vào phần animation hơn là nội dung.

Đặc biệt, nếu animation còn làm gián đoạn mạch đọc thì tôi đã thấy bực mình ngay cả trước khi đọc rồi.