Những định dạng hỗ trợ hoạt hình phù hợp cho web?

13

Những định dạng hỗ trợ hoạt hình phù hợp với web và những ưu và nhược điểm của mỗi định dạng.

image-format animation

— Alinium
nguồn

Xem thêm Cách tốt nhất để tạo hiệu ứng minh họa cho web là gì? để biết thêm thông tin về từng định dạng

— Zach Saucier

13

Nó phụ thuộc vào loại hoạt hình bạn cần.

hình ảnh .gif - Được hỗ trợ đầy đủ, nhưng hạn chế sử dụng với khung. Các tệp .png được cho là có hỗ trợ cho hoạt hình, nhưng bạn hoàn toàn không thấy nó trong tự nhiên.
Flash, Silverlight và các plugin khác - Flash có tính phổ biến nhất, nhưng tất cả các plugin cần được cài đặt trong trình duyệt và không nhất thiết phải được cài đặt để cài đặt trên máy tính của người dùng. Có thể không hoạt động cho các nền tảng di động.
CSS3 - Chuyển đổi hoặc hoạt hình có giới hạn, hỗ trợ trình duyệt hạn chế.
Video HTML5 - Tương lai, nhưng hỗ trợ trình duyệt hạn chế.
JavaScript - Cần được kích hoạt, nhưng cần có sự hỗ trợ của trình duyệt phổ quát. Các loại hình ảnh động hạn chế. Xem Raphael.js .
Thẻ Canvas - Hỗ trợ trình duyệt hiện đại, nhưng hỗ trợ hình động phong phú.

— Truyền thông Virtuosi
nguồn

Tôi sẽ đến nitpick ở đây, nhưng <canvas>hoạt hình chủ yếu là JavaScript - nó chỉ là một định dạng khác nhau trên đó có thể được vẽ. Nếu bạn muốn chính xác, bạn nên phân biệt giữa hoạt hình các yếu tố HTML, SVG (mà raphael.js sử dụng) và HTML5<canvas>

— Yi Jiang

Sự khác biệt giữa SVG và hoạt hình canvas một cách ngắn gọn - với SVG, mọi đường dẫn là một yếu tố bạn có thể liên kết dữ liệu và sự kiện như nhấp và di chuột đến và tương tác với như một div, trong khi trong Canvas, nó giống như trình duyệt tạo ra mọi thứ, mang lại họ quy tắc hành vi sau đó quên chúng. SVG không tồn tại trong IE trước IE 9, đó là lý do Raphael tuyệt vời - nó kiểm soát SVG, hoặc, trong IE6-8, nó sử dụng tương đương thương hiệu riêng của IE (gọi là VML). Điều duy nhất tôi biết Raphael không hoạt động là các trình duyệt chứng khoán Android cũ (trước phiên bản 2 tôi nghĩ).

— user56reinstatemonica8

2

Đây là câu trả lời tuyệt vời của Virtuosi Media:

Apple gần đây đã sử dụng hình ảnh JPEG và PNG cho hoạt hình trên trang web của họ. Họ sử dụng JavaScript để chuyển đổi hình ảnh. Đó là một kỹ thuật tuyệt vời nếu bạn không có quá nhiều khung hình, cần hỗ trợ trong suốt alpha, muốn hoạt hình được đặt đúng chỗ trên trang và nếu bạn muốn hỗ trợ trình duyệt rộng. Nhược điểm là kích thước tải xuống và nỗ lực.

Nó cũng có thể tương tác. Nếu bạn cuộn đến phần Smart Cover trên trang iPad của Apple, bạn có thể thấy nó hoạt động: http://www.apple.com/ipad/features/

— Marc Edwards
nguồn

1

Khi chồng các hình ảnh có độ trong suốt lên trên của hình ảnh hoạt hình trên các lớp bên dưới hình ảnh. Bạn sẽ thấy rằng PNG24 là định dạng hình ảnh duy nhất trong đó tính năng khử răng cưa kết hợp chính xác với hình ảnh nền. Với GIF và PNG8, bạn sẽ thấy rằng các cạnh của bạn đều chunky. Trông không được tốt lắm, nhưng thực sự rất dễ bỏ lỡ.

— John Drefahl
nguồn