Có làm ảnh động giá trị của chuyển đổi CSS3 với quy tắc javascript tăng tốc phần cứng không?

Question

Bạn có thể tận dụng lợi thế của hoạt ảnh tăng tốc phần cứng bằng cách đặt thời lượng hoạt ảnh và đặt giá trị ban đầu và cuối cùng của chuyển đổi CSS3.

Điều gì xảy ra nếu thay vì đặt thời lượng hoạt ảnh và sử dụng khung hình chính, bạn tạo hiệu ứng cho giá trị của chuyển đổi CSS3 mong muốn trực tiếp bằng JavaScript? Bạn vẫn sẽ tận dụng lợi thế của tăng tốc phần cứng, hoặc là tăng tốc phần cứng loại trừ?

Answer 1

Nó là phần cứng được tăng tốc, nhưng dưới dạng Rich đề cập, việc chuyển đổi CSS trở nên dễ dàng và hiệu quả hơn. Vấn đề là việc chuyển đổi hình động 3D với jQuery không đơn giản, nếu bạn làm:

$('div').animate({ 
    '-vendor-transform' : "translate3d(100px,0,0)"; 
}, 500) 

Nó không hoạt động. Thậm chí nếu bạn làm:

$('div').css("-webkit-transform", "translate3d(0,0,0)"); 
alert($('div').css("-webkit-transform")) 

Bạn không nhận được trở lại translate3d(0,0,0), bạn sẽ có được matrix(1, 0, 0, 1, 100, 0)

Vì vậy, bạn phải viết rất nhiều mã hoạt hình tùy chỉnh liên quan đến ma trận chỉ để có được mọi thứ chuyển động trên màn hình.

Dưới đây là ví dụ về biến đổi 3d hoạt hình tùy chỉnh: http://www.eleqtriq.com/wp-content/static/demos/2010/rotation/, hãy xem mã nguồn để xem liệu đó có phải là mức javascript bạn cảm thấy thoải mái hay không.

Answer 2

Nó sẽ không được tăng tốc phần cứng cho trình duyệt webkit trừ khi bạn sử dụng chuyển tiếp. Ngoài ra, chỉ biến đổi 3d được gia tốc, do đó, một cách nhanh chóng để đảm bảo rằng các phần tử sẽ sử dụng cây vẽ 3d nếu nó sẵn là thêm:

-webkit-transform: translate3d(0,0,0); 
transform: translate3d(0,0,0); 

Các biến đổi lý do là nhanh chóng bằng cách này, là vì theo định nghĩa, chúng không ảnh hưởng đến bất kỳ phần tử nào khác - điều này có nghĩa là trình duyệt không cần phải vẽ lại toàn bộ cửa sổ, chỉ là phần đang được chuyển đổi.

Cách cũ của hoạt ảnh thực sự nên được coi là lỗi thời, vì nó kém hiệu quả hơn nhiều so với chuyển tiếp và thường có tốc độ khung hình thấp hơn, đặc biệt là trên iOS.