2016-12-03 15 views
19

Tôi hiện đang thử hoạt ảnh của angular2 và tôi đã tự hỏi họ sẽ mang lại lợi thế cụ thể nào cho các hoạt ảnh/chuyển tiếp css chuẩn.hoạt hình góc 2 hoạt hình vs hoạt ảnh css - khi nào nên sử dụng cái gì?

ví dụ: một thẻ vật liệu được thiết kế đặc trưng và hiệu ứng di chuột với các hộp đổ bóng. Hầu hết các khung công tác css đều sử dụng: hover và css-transition. Có lợi thế cụ thể nào khi sử dụng hoạt ảnh 2 góc không?

Tôi đọc ở đâu đó rằng một số thuộc tính hoạt ảnh css không gọi GPU càng nhiều, do đó có sự cố chậm trễ và chậm trễ. Điều gì về hình ảnh động angular2?

+2

Vâng, tôi không biết nhiều về Angular, nhưng tôi nghĩ họ chỉ tận dụng hoạt ảnh CSS. [Trong thực tế, tài liệu của họ nói] (https://angular.io/docs/ts/latest/guide/animations.html): * "Hệ thống hoạt hình của Angular cho phép bạn tạo hoạt ảnh chạy ** với cùng một loại hiệu suất gốc * * tìm thấy trong các hoạt ảnh CSS thuần túy. "*. Họ cũng chỉ định rằng họ sử dụng [hoạt ảnh web] (https: //w3c.github.io/web-animations /) trong đó [có thể] (http://caniuse.com/#feat=web-animation). Đây là hit đầu tiên khi bạn google cho "hoạt hình 2 góc" – GolezTrol

+1

Tôi tin rằng các hoạt ảnh angular2 chỉ tạo hoạt ảnh css khi chúng được biên dịch. Lợi thế là có thể thêm và kiểm soát hoạt ảnh ở cấp thành phần dễ dàng hơn. –

+0

cảm ơn phản ứng nhanh, vì vậy về cơ bản những gì tôi nhận được với hình động 2 góc là các phương thức (như animat() và style()) làm cho hình động dễ kiểm soát hơn (?) –

Trả lời

19

Câu hỏi thực tế là nhiều hơn hoạt ảnh javascript và hoạt ảnh css (vì hoạt ảnh của angular2 dựa trên hoạt ảnh javascript).

Câu trả lời là khi bạn có thể - sử dụng hoạt ảnh CSS.

Trình duyệt hiện đại sử dụng different thread cho hoạt ảnh CSS, do đó, chuỗi javascript không bị ảnh hưởng bởi hoạt ảnh CSS.

Bạn có thể sử dụng HTML5 Animation Speed Test để kiểm tra hiệu suất của các khung công tác VS CSS khác nhau (javscript) trên trình duyệt của bạn.

Nói chung:

trình duyệt có khả năng tối ưu hóa dòng chảy rendering. Tóm lại, chúng tôi luôn cố gắng tạo các hoạt ảnh của chúng tôi bằng cách sử dụng các hiệu ứng chuyển tiếp/hoạt ảnh CSS nếu có thể. Nếu hoạt ảnh của bạn thực sự phức tạp, bạn có thể phải dựa vào hoạt ảnh dựa trên JavaScript.

Nếu bạn muốn biết cụ thể về hoạt ảnh Angular2 - chỉ cần kiểm tra phần tử trong trình duyệt của bạn và kiểm tra xem hoạt ảnh có CSS ​​(transition/animationFrame hoặc javascript) (bạn sẽ có thể thấy giá trị trong . style thay đổi thuộc tính trong phim hoạt hình)

+0

Thật tuyệt, nhưng mặc dù Angular là JavaScript, tôi nghĩ nó vẫn sử dụng CSS để tạo hiệu ứng động. Không có chuyên gia ở đây, nhưng các liên kết tôi đã đề cập trong bình luận trước đó của tôi dường như rõ ràng về điều này. – GolezTrol

+0

@GolezTrol, kiểm tra cập nhật từ 1 phút trước để trả lời của tôi :) nó giải thích làm thế nào để kiểm tra xem các hình ảnh động của angular2 là css hoặc js dựa. – Dekel

2

Câu trả lời là thực sự trong các tài liệu:

https://angular.io/guide/animations

hệ thống hình ảnh động góc của phép y ou tạo hoạt ảnh chạy với cùng một loại hiệu suất gốc được tìm thấy trong hoạt ảnh CSS thuần túy. Bạn có thể cũng tích hợp chặt chẽ logic hình ảnh động của bạn với phần còn lại của mã ứng dụng để dễ kiểm soát.

Nó cũng tóm tắt sự cần thiết phải theo dõi độ dài của hoạt ảnh để cắt giảm và tránh quá tải trình duyệt hoặc trong hoạt ảnh chuỗi.

Nói chung, nếu bạn có một điều đơn giản, CSS có lẽ dễ dàng hơn. Nhưng nếu bạn liên tục làm hoạt hình trong ứng dụng của mình, bạn sẽ nhận được rất nhiều sức mạnh với chút ít từ phía dưới của Ảnh động góc.

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