Chuyển tiếp CSS, hoạt ảnh có hiệu suất khủng khiếp, hành vi

I'm working on a page turn animation. Hiệu suất là đáng thất vọng. Đặc biệt nếu bạn lấy lớp pages và làm cho nó có kích thước rộng 800px (dán $('.pages').css({width: '960px', height: '600px'}); vào bảng điều khiển của bạn). Tôi đã từng có khoảng 16 chuyển đổi chạy cùng một lúc và giảm xuống còn 9, nhiều trong số đó là biến đổi! Tôi không biết tôi có thể làm gì khác.Chuyển tiếp CSS, hoạt ảnh có hiệu suất khủng khiếp, hành vi

Chrome dường như không sử dụng GPU. Nó gai FPS trên lần lượt trang đầu tiên, nhưng sau đó dips xuống đều đặn (kích hoạt này với about:flags):

Chrome showing FPS dips

Hãy thử nó ra trong Safari và bạn sẽ có được hiệu suất tốt hơn nhưng thấy rằng các hình ảnh động không đồng bộ lên, thường tụt lại phía sau nhau, và có một sự lúng túng kỳ lạ mà Román Cortés's project also suffered from trong cùng một trình duyệt (tôi chưa làm cho nó hoạt động trong Fx).

Không có nhiều tài liệu hay về cách tối ưu hóa chuyển tiếp CSS và hoạt ảnh trên web và tôi chủ yếu là tự dạy. Tôi đã hy vọng một người nào đó sẽ có loại lời khuyên này.

Nguồn

2011-12-13 Caleb Hearon

Đây là a page flip I did khi chúng tôi ra mắt Sencha Animator. Nó cũng lấy cảm hứng từ bản gốc của Ramon Cortes, nhưng sử dụng các cơ chế khác nhau - theo như tôi nhớ. Đó là siêu mịn trong Safari và trên iOS, nhưng loại giật trên máy tính để bàn Chrome. Chưa kiểm tra nó trong Android 4 được nêu ra.

Nguồn

2011-12-13 19:23:21

Tốt, tôi sẽ phải nghiên cứu kỹ thuật này vì Safari có vẻ thích nó hơn. Tuy nhiên, Chrome trên Mac hiển thị nó với các khối pixel ngẫu nhiên chuyển sang màu đen hoặc hiển thị lớp bên dưới một cách ngẫu nhiên. –

Có, rõ ràng phiên bản webkit của Chrome 15 (?) Có lỗi trong đó các lệnh z ngầm ẩn đi khi các biến đổi được thêm vào. Tôi sẽ giải quyết một phiên bản có cài đặt chỉ mục z rõ ràng và xem liệu nó có khắc phục được mọi thứ hay không. –

Tôi chỉ tìm ra nếu bạn thêm '-webkit-transform-style: preserve-3d' nó không nhấp nháy như thế. Tôi vẫn nhận được một số clipping nơi nó không nên mặc dù. –

Để tận dụng lợi thế của GPU, bạn phải sử dụng translate3d(x,y,z) thay vì translate(x,y) trong -webkit-tranform's. Điều này sẽ buộc Chrome sử dụng GPU để hiển thị hoạt ảnh.

Hãy coi chừng rằng mặc dù hiệu suất sẽ tăng lên đáng kể nếu máy tính có thẻ video tốt, nó cũng sẽ làm suy giảm trên phần cứng chậm hơn.

Nguồn

2011-12-13 21:46:49

Cảm ơn, tôi đã thử dịch3d trên Chrome/MacOS và nó đã rất chậm khi tôi có 12 trang cấu trúc DOM hơi phức tạp. Toàn bộ trang đã chậm lại để thu thập thông tin trước khi tôi thậm chí còn hoạt ảnh bất cứ điều gì! Rất tiếc là tôi không thể tìm ra cách để làm cho nó không làm tê liệt một nền tảng trong khi tăng tốc một nền tảng khác. –

Tôi đang sử dụng Chrome 17 trên OSX và có vẻ như ổn - chạy ở khoảng 20-30fps, không có vấn đề về nhúng hoặc đồ họa. Tôi nghi ngờ rằng đây chỉ là vấn đề với các bản dựng Chrome cũ hơn.

Nguồn

2011-12-13 22:08:06

Phiên bản beta mới nhất thực sự có hiệu suất rất lớn. Cảm ơn. –

Hoạt ảnh hộp đổ bóng và -webkit-gradient là rất tốn kém, hãy thử xóa chúng tạm thời để xem nó có cải thiện hiệu suất hay không. Nếu có, hãy xem bạn có thể làm gì để thay thế chúng bằng hình ảnh.

Nguồn

2011-12-14 17:36:00 Duopixel

Chuyển tiếp CSS, hoạt ảnh có hiệu suất khủng khiếp, hành vi

Trả lời

Các vấn đề liên quan