Vào cuối năm ngoái, tôi đã xây dựng trang web Chrome Dev Summit. Tôi muốn trang web có giao diện và cảm giác Material Design, vì đây là một ngôn ngữ thiết kế tuyệt vời và tôi cảm thấy nó sẽ phù hợp với loại trang web mà tôi muốn tạo. Tuy nhiên, cũng như mọi ngôn ngữ thiết kế mới, bạn sẽ có những câu hỏi, thách thức và quyết định cần đưa ra, đặc biệt là khi xử lý các quy ước của web.
Một khía cạnh của trang web mà chúng tôi gặp nhiều khó khăn khi tạo là hiệu ứng "chiếm toàn bộ màn hình" khi bạn nhấp vào một thẻ.
Để hiệu ứng như thế này chạy ở tốc độ 60 khung hình/giây, chúng tôi đã phải suy nghĩ, tạo mẫu và đưa ra một số thoả hiệp thú vị. Tại Hội nghị nhà phát triển Chrome, tôi đã nói về hiệu ứng này và giải thích chi tiết cách tôi tạo ra hiệu ứng đó.
Xây dựng một ảnh động có hiệu suất cao
Ảnh động có hiệu suất cao, ít nhất là hiện nay, là những ảnh động ưu tiên trình kết hợp của trình duyệt. Nếu có thể giữ nguyên các thuộc tính biến đổi và độ mờ, thì thông thường bạn sẽ thấy hiệu suất cao. Cách tiếp cận chung mà tôi đã áp dụng cho hiệu ứng thẻ là:
- Đo vị trí của tất cả các phần tử trong thẻ khi thẻ được thu gọn.
- Chuyển đổi các lớp của thẻ để mở rộng thẻ (không có hiệu ứng chuyển động).
- Đo lại vị trí của các phần tử trong thẻ khi thẻ được mở rộng.
- Tính toán sự khác biệt.
- Áp dụng các phép biến đổi phủ định để di chuyển các phần tử trở lại vị trí bắt đầu.
- Bật hiệu ứng chuyển động.
- Xoá các phép biến đổi phủ định và xem các phần tử di chuyển nhanh đến vị trí cuối cùng trên màn hình.
Tất cả những điều này có vẻ tốn kém, nhưng có một khoảng thời gian là 100 mili giây kể từ thời điểm người dùng tương tác cho đến khi ảnh động phải bắt đầu. Nếu nhiều hơn mức này, người dùng sẽ cảm thấy có độ trễ. Bạn có thể sử dụng thời gian này để thực hiện công việc chuẩn bị tốn kém để có thể chạy rẻ hơn trong chính ảnh động. Ngoài ra, còn có một khoảng thời gian từ 50 đến 100 mili giây ở cuối để thực hiện công việc dọn dẹp. Khoảng thời gian này có thể hữu ích tuỳ thuộc vào việc bạn đang cố gắng làm gì.
Công việc tốn kém để thực hiện ảnh động được thực hiện trong 100 mili giây đầu tiên đó và trên Nexus 5, công việc này mất khoảng 70 mili giây, vì vậy vẫn còn thời gian dự phòng.
Lấy mã
Nếu muốn xem trang web này chi tiết hơn, bạn sẽ rất vui khi biết rằng mã nguồn của trang web đã được phát hành trên GitHub, vì vậy, hãy truy cập và xem thử!