Kỹ thuật hoạt ảnh CSS dựa trên thời gian

 (yuanchuan.dev)
7 điểm bởi GN⁺ 2024-05-06 | 1 bình luận | Chia sẻ qua WhatsApp

Sử dụng phương pháp dựa trên thời gian cho hoạt ảnh CSS

  • Khi các hàm toán học trong CSS đã được hỗ trợ, có thể áp dụng lại kỹ thuật hoạt ảnh CSS dựa trên thời gian
    • mod(), round(), các hàm lượng giác, v.v. đã được hỗ trợ
    • Có thể cần bật cờ tính năng thử nghiệm để xem demo

Ý tưởng cơ bản

  • Có thể định nghĩa biến tùy chỉnh theo dõi thời gian (mili giây) bằng CSS Houdini API
    • Sử dụng quy tắc @property để định nghĩa biến --t và đặt giá trị ban đầu là 0
    • Sử dụng quy tắc @keyframes để tăng biến --t theo tuyến tính trong 24 giờ (86.400.000ms)
    • Các giá trị khác dựa trên --t sẽ thay đổi cùng nhau để tạo hiệu ứng hoạt ảnh
    • Có thể hiển thị giá trị của biến --t bằng hàm counter()

Điều chỉnh tốc độ khung hình

  • Duy trì chu kỳ cập nhật 60 khung hình một giây (FPS) là đủ cho hoạt ảnh mượt
  • Khi cần, có thể dùng hàm step() để kiểm soát tốc độ khung hình thủ công
    • Dùng step() trong thuộc tính animation-timing-function để tính giá trị FPS mong muốn

Biến đổi thời gian

  • Vì giá trị --t tăng liên tục một chiều, nên nó có thể không phù hợp với một số thuộc tính CSS
  • Dùng hàm min() để dừng hoạt ảnh khi đạt tới một giá trị nhất định
  • Dùng mod() để khởi động lại hoạt ảnh
  • Dùng sin() để tạo hiệu ứng chuyển động đi tới rồi quay lại

Hàm easing tùy chỉnh

  • Có thể tạo hàm easing tùy chỉnh bằng các hàm toán học và biến --t
  • Có thể tạo các hiệu ứng khó đạt được với cubic-bezier()
  • Ví dụ: ease-out-cubic, ease-out-elastic, v.v.

Thí nghiệm CSS Doodle

  • Trong các biểu thức phức tạp, var() và calc() có thể làm giảm tính dễ đọc của mã
  • Trong css-doodle có thể biểu diễn biến --t bằng hàm @t
  • Phiên bản mới của css-doodle cho phép cho phép trực tiếp viết các biểu thức toán học đơn giản bên trong đối số
  • Ngoài ra còn cung cấp thêm các hàm @T và @TS
    • @T thể hiện thời gian từ đầu ngày
    • @TS là dạng viết tắt của @t(/1000), theo dõi thời gian theo giây
  • Có thể triển khai ví dụ đồng hồ và ví dụ chuyển động nhảy bằng css-doodle

Kết luận

  • Cách tiếp cận dùng biến thời gian này rất thú vị
  • Dù dùng Keyframes có thể trực quan hơn, trong cảnh demo với nhiều phép tính toán học và biến đầu vào thì dùng biến thời gian có thể tạo ra nhiều kết quả đa dạng hơn

Ý kiến của GN⁺

  • Kỹ thuật hoạt ảnh CSS dựa trên thời gian không chỉ mở rộng phạm vi hoạt ảnh có thể làm được chỉ với CSS, mà còn có vẻ tăng cường tiềm năng kết hợp với các công nghệ khác như shader hoặc WebGL
  • Kết hợp với các công cụ như CSS Houdini và CSS Doodle, sẽ có thể tạo ra biểu đạt linh hoạt và đa dạng hơn
  • Tuy nhiên, khi áp dụng thực tế vào dự án, có thể có các vấn đề cần cân nhắc như khả năng tương thích trình duyệt và hiệu năng. Nên so sánh kỹ ưu và nhược điểm của cách dựa trên Keyframe và cách này để lựa chọn dùng phù hợp
  • Cũng cần phân tích ưu và nhược điểm khi so sánh với các thư viện hoạt ảnh chuyên sâu như GSAP. Sẽ rất tốt nếu tìm kiếm cách phối hợp bổ sung lẫn nhau
  • Hy vọng sẽ có thêm nhiều ví dụ và trường hợp ứng dụng của hoạt ảnh CSS dựa trên thời gian được chia sẻ để các nhà phát triển frontend có thể áp dụng dễ dàng hơn

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-05-06
Bình luận Hacker News

  • Có thể kiểm soát tiến trình animation bằng JavaScript bằng cách dùng animation-delay âm trong CSS. Ví dụ đặt animation-delay: -1500ms thì nó sẽ bắt đầu ngay lập tức nhưng bỏ qua tới mốc 1.5 giây. Điều chỉnh giá trị này bằng JavaScript giúp bạn scrub animation CSS và khiến mọi animation tương thích với vòng lặp tick kiểu game engine gồm các bước tính toán-cập nhật-kết xuất.

  • Khi phát triển vượt quá easing đơn giản hoặc chỉ vài keyframe cơ bản cho một hai kênh, bạn sẽ nhanh chóng chạm tới giới hạn của cách tiếp cận này. Theatre.js hữu ích nhờ có UI kiểu studio với timeline để chỉnh keyframe và đường cong Bezier, cùng runtime nội suy giá trị theo timeline sau khi kéo keyframe vào.

  • Bài viết này tận dụng @property tùy chỉnh của CSS, với tỷ lệ hỗ trợ trình duyệt là 88%. Cần lưu ý cách mỗi trình duyệt thiết lập giá trị mặc định khác nhau: Chrome sẽ dùng giá trị mặc định khi giá trị chưa được định nghĩa hoặc không hợp lệ, còn Firefox chỉ dùng giá trị mặc định khi chưa được định nghĩa. Với hầu hết dự án, chuyện này không thành vấn đề; nhưng để xử lý sự không khớp triển khai giữa các trình duyệt, có thể cần thiết lập giá trị mặc định của Firefox bằng JavaScript.

  • CSS hỗ trợ đầy đủ các hàm toán học như mod(), round(), hàm lượng giác, v.v. CSS không thể khởi chạy timer như JavaScript, nhưng giờ đây có thể dùng CSS Houdini API để định nghĩa biến tùy chỉnh và theo dõi thời gian tính bằng mili giây. Khi đã có JavaScript, tại sao còn cần tất cả mớ này nữa? Một lớp vẽ không lẽ chỉ nên quan tâm tới các primitive vẽ? Tại sao lại cứ dồn dần thêm nhiều lớp trừu tượng hơn?

  • Đồng hồ này trông rất sang trọng. Bài viết rất tốt. Chrome vẫn chưa phát hành hỗ trợ CSS cho mod(), nên nếu không dùng bản pre-release thì phần lớn ví dụ trên trang sẽ không được animate.

  • Nếu muốn có animation CSS mượt mà trên mọi trình duyệt mà không cần kiểm soát tick, cách làm FLIP rất hữu ích.

  • Mình từng muốn một thứ kiểu 'box breathing' có thể tùy chỉnh cả chu kỳ hít vào-ngừng-hít ra-ngừng cho vừa cơ thể và tạo hiệu ứng mong muốn, nhưng không thể làm được nếu không dùng JS hoặc độ phức tạp khổng lồ như trên trang này. Trang này có những demo rất sáng tạo!

  • Thú vị là bản demo trước khi có mod() vẫn hoạt động, nhưng mod() và sin() thì không làm gì cả trên Chrome Android mới nhất.

  • Animation ở cuối trang rất ấn tượng. Trông giống như một hơn là một .

  • Rất ấn tượng, nhưng cảm giác như đã quay lại mức độ mà Flash có thể làm được từ hàng chục năm trước. Không muốn Flash quay trở lại, nhưng thật tuyệt nếu có công cụ thân thiện hơn để tạo animation CSS.