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