Công cụ tạo ảnh động trên web mới trong tính năng nhấp nháy giúp thúc đẩy hiệu ứng chuyển đổi và ảnh động CSS

Alex Danilo

Người dùng mong muốn có ảnh động mượt mà 60 khung hình/giây trong giao diện người dùng đa thiết bị hiện đại. Việc đạt được mức hiệu suất đó bằng các ảnh động gốc hiện tại của web có thể khó khăn. Thật may là chúng tôi đang nghiên cứu cách triển khai ảnh động Blink mới vừa được xuất hiện trong Chrome Canary!

Điều thú vị là tính năng này giúp đơn giản hoá nội dung bên trong của Blink và đặt nền tảng cho việc đưa vào các tính năng API mới lấy từ thông số kỹ thuật của Web Animations 1.0.

Cho đến nay, Ảnh động CSS và Chuyển đổi CSS đã được triển khai riêng biệt, được viết độc lập, không nhất thiết hoạt động tốt khi kết hợp với nhau. Trong vài năm qua, các trình triển khai trình duyệt đã làm việc cùng nhau để xây dựng mô hình ảnh động thế hệ mới có hỗ trợ đồng bộ hoá, tạo chuỗi ảnh động để chạy theo trình tự, tìm các điểm tuỳ ý trong thời gian tạo ảnh động, cho phép ảnh động thay đổi tốc độ, đảo ngược và hơn thế nữa.] Nỗ lực này đã dẫn đến sự hình thành của đặc tả W3C Web Animations 1.0.

Bước đầu tiên của nhóm Blink trong việc giới thiệu Web Animations là thay thế việc triển khai Blink CSS Animations/Transitions C++ hiện có bằng công cụ Web Animations. Sau khi đạt được mốc đó, chúng tôi muốn nhiều nhà phát triển nhất có thể kiểm tra xem có vấn đề gì không và quan trọng hơn là cần theo dõi quá trình triển khai và cho chúng tôi biết những điểm tốt/không tốt hoặc có thể cần thay đổi.

Tiếp theo sẽ là triển khai một API cho phép bạn tạo, sửa đổi và thẩm vấn các ảnh động từ JavaScript. API này được thiết kế để cho phép ảnh động chạy hiệu quả (bằng cách sử dụng ngữ nghĩa khai báo để JavaScript quản lý việc tạo ảnh động nhưng chuyển quyền kiểm soát cho trình duyệt) trong khi vẫn để lộ toàn bộ quyền kiểm soát ảnh động cho nhà phát triển JavaScript.

Chúng tôi đang mong nhận được ý kiến phản hồi tích cực về API đề xuất này để đảm bảo không bỏ lỡ tính năng nào cần thiết cho việc kiểm soát ảnh động một cách hiệu quả. Giống như bất kỳ tính năng mới nào, thông số kỹ thuật sẽ tiếp tục thay đổi, vì vậy bây giờ là lúc để thể hiện tiếng nói của bạn – lý tưởng là bằng cách đăng ký và đóng góp vào danh sách gửi thư public-fx@w3.org (và đặt [Ảnh động trên web] trong dòng tiêu đề để được chú ý).

Hãy dùng thử công cụ mới đã hỗ trợ hiệu ứng Chuyển đổi và Ảnh động CSS, đồng thời đăng mọi phát hiện lạ lên công cụ theo dõi lỗi của Chromium để chúng tôi biết về điều đó.

Chúng tôi rất vui mừng khi mang đến các tính năng hoạt ảnh thế hệ tiếp theo cho Blink và mong muốn hợp tác với các nhà phát triển trình duyệt khác như WebKitMozilla cũng đã cam kết triển khai mô hình mới.