What DOM animation technique should you use?
Bây giờ bạn đã nhìn thấy ba kỹ thuật cho phép bạn động các bộ phận của trang web của bạn:
window.setInterval/ setTimeout, window.requestAnimationFramehình ảnh động, và CSS / chuyển tiếp.
Khi bạn đang xem xét sử dụng kỹ thuật nào, bạn nên xem xét những câu hỏi sau:
- Nó thực sự có thể làm những gì tôi muốn làm?
- Kỹ thuật này thực hiện tốt như thế nào? (Nó có làm chậm trình duyệt / máy tính không?)
- Làm thế nào chính xác thời gian của tôi cần phải được?
- Nó có hoạt động trong tất cả các trình duyệt mà tôi muốn trang web của tôi hoạt động không?
Khi tạo trang web, chúng tôi rất quan tâm đến hiệu suất, vì vậy chúng tôi muốn coi đó là tiêu chí quan trọng nhất. Tuy nhiên, hiệu suất trình duyệt sẽ thay đổi khi trình duyệt mới xuất hiện và trình duyệt di động có thể hoạt động rất khác so với trình duyệt trên máy tính để bàn, vì vậy kỹ thuật hoạt động tốt nhất hiện nay có thể không phải là kỹ thuật hoạt động tốt nhất vào ngày mai. Hiện tại, hoạt hình / chuyển tiếp CSS là hiệu suất cao nhất, sau đó
requestAnimationFrame, sau đó setInterval.
Tuy nhiên, CSS không thể làm mọi thứ. Ví dụ: để vẽ pixel và hình dạng trong
<canvas>thẻ, bạn phải gọi các hàm như fillRect(), bạn không thể sử dụng CSS. Bạn sẽ cần phải sử dụng requestAnimationFramehoặc setIntervalgọi các chức năng đó định kỳ thay thế. Trên thực tế, đó là những gì chúng tôi làm ở đây trên Khan Academy, trong môi trường Xử lý của chúng tôi. TreatmentJS là một thư viện JS ghi ra một <canvas>thẻ và nếu bạn xác định một draw()hàm trong mã của mình, thì ProcessJS sử dụng setIntervalđể gọi draw()hàm đó nhiều lần dựa trên frameRate.
Đôi khi, bạn muốn gọi các hàm JavaScript theo định kỳ, nhưng không phải vì bạn muốn làm động một cái gì đó trên trang. Bạn có thể đang thăm dò máy chủ để cập nhật, giống như Twitter khi cập nhật nguồn cấp dữ liệu thời gian thực của nó. Trong trường hợp đó, bạn chỉ có thể sử dụng
setIntervalvà không có vấn đề gì về thời gian không chính xác, bởi vì bạn chỉ gọi nó mỗi phút hoặc lâu hơn. Đó là những gì chúng tôi làm trên Khan Academy trên trang yêu cầu trợ giúp, để liên tục kiểm tra các yêu cầu trợ giúp mới cứ sau 2 phút.
Tất nhiên, bạn nên ghi nhớ khả năng tương thích trình duyệt. Nếu bạn đang viết mã cần hoạt động trong IE9, thì bạn không thể sử dụng
requestAnimationFramehoặc hoạt hình CSS. Bạn cần sử dụng kết hợp các kỹ thuật hoạt động trên các trình duyệt hoặc tìm một thư viện phù hợp với bạn, như Velocity.js .
Có rất nhiều để tìm hiểu về tất cả các kỹ thuật này. Theo các liên kết sau để tìm hiểu thêm:
Phần thưởng dành cho người hâm mộ Doctor Who: một trong những ví dụ yêu thích của tôi về sức mạnh của hoạt hình CSS3 là TARDIS hoạt hình này .
Nhận xét
Đăng nhận xét