Tại sao GIF động không phải thay vì hoạt ảnh CSS sprites?

Question

Trong các xu hướng gần đây, tôi đã thấy mọi người làm động các hình ảnh CSS bằng JavaScript thay vì sử dụng GIF động?

Ex:

• http://www.google.com/doodles/eadweard-j-muybridges-182nd-birthday (trên thực tế, Google đã sử dụng kỹ thuật này trong Doodles khác quá)
• https://everyme.com/ ('tôi' logo)
• và nhiều hơn nữa ...

Đó là tất cả chỉ để hiển thị hoặc thử nghiệm với công nghệ hoặc có bất kỳ lợi ích nào từ nó. Tôi quan tâm đến việc biết lợi ích, nếu có. Lý do tôi hỏi là tôi không thể hiểu được trong cả hai trường hợp chúng ta cần tạo ra các khung trung gian (chủ yếu là sử dụng kỹ thuật tweening).

Answer 1

• kiểm soát

  Bạn không có quyền kiểm soát GIF động. Bạn không thể bắt đầu chúng, bạn không thể ngăn chặn chúng. Họ chỉ animate ngay sau khi họ tải.

  Với sprites, bạn có thể kiểm soát hoạt ảnh. Bạn có thể bắt đầu, dừng và phản ứng với các sự kiện của trình duyệt, xoay qua hoạt ảnh. Ví dụ: Google Doodles thường kích hoạt khi bạn nhấp vào chúng.

  Có thể tìm thấy hệ thống điều khiển GIF tiện lợi trong thẻ 9gag. Bạn có thể bắt đầu bằng cách nối chúng vào DOM và dừng chúng bằng cách xóa chúng và hoán đổi chúng với chế độ xem "khung hình đầu tiên" được tạo trước. Nhưng đó là như xa như GIF đi.

• Instances độc lập

  Khi bạn nạp nhiều trường hợp của các GIF cùng, tất cả những trường hợp sử dụng cùng một hình ảnh trên trang và di chuyển cùng một lúc. Nếu bạn có một hàng nhảy múa kỳ lân GIF, họ sẽ nhảy cùng một lúc. Nhảy múa đồng bộ!

  Nhưng với sprites, ngay cả khi bạn đang sử dụng cùng một hình ảnh, hoạt ảnh dựa trên tập lệnh cơ bản. Vì vậy, nếu một sprite được tạo bởi một script và một script khác, cả hai animation có thể chạy độc lập và khác nhau.

  Điều này giúp bạn không thể tạo GIF khác và dễ sửa đổi vì bạn chỉ thay đổi tập lệnh.

• Đảm bảo hình ảnh động trơn tru

  Animated GIF chỉ động khi tải, và khi internet là chậm, hình ảnh động đóng băng cho đến hơn của hình ảnh được nạp.

  Ngược lại, lợi thế của sprites là bạn có thể tải trước chúng, đảm bảo tất cả các hình ảnh được tải trước. Điều này đảm bảo rằng các tài nguyên được sử dụng cho hoạt ảnh đó đã được tải trước hoạt ảnh để đảm bảo tài nguyên hoạt ảnh mượt mà nhất có thể.

  Tuy nhiên, GIF vẫn là hình ảnh. Bạn có thể tự động tải chúng ra khỏi DOM và lắng nghe sự kiện tải trước khi bạn thêm chúng vào DOM.

• phần render

  Với sprites PNG, bạn có thể làm "partials" trong phim hoạt hình, phá vỡ một cảnh hoạt hình đến các bộ phận. Ví dụ, khi một nhân vật đứng yên, nhưng cánh tay đang vẫy tay. Bạn không cần phải animate toàn bộ nhân vật, hoặc toàn bộ khung cảnh. Bạn có thể đặt một phần tử mô tả hình ảnh của cơ thể của nhân vật trong trạng thái "đóng băng" trong khi cánh tay là một phần tử khác có hình động. Điều này bảo tồn không gian và kích thước của bảng sprite. Một ví dụ điển hình cho việc này là Doodle Ngày của Mẹ 2012 của Google.

  Ngược lại, hầu hết thời gian, mọi khung hình trong hoạt ảnh GIF là toàn bộ hình ảnh và hoạt ảnh có hay không bất kỳ thứ gì trong đó di chuyển. Càng nhiều khung hình, kích thước của GIF càng lớn.

• GIF chỉ không quy mô

  GIF đã có nghĩa cho các biểu tượng. Tỷ lệ kích thước của tệp đối với kích thước hình ảnh không được phóng to ở mức GIF tốt hơn so với PNG và JPG.

Answer 2

Trên đầu trang của Joseph của Dreamer câu trả lời ...

Theo như tôi biết, hoặc ít nhất nó được sử dụng để được rằng, các file GIF KHÔNG màu sắc trung thực, một lý do khác để sử dụng một JPG/PNG như một sprite css.