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