哪些支持动画的格式适用于网络？

13

哪些格式支持动画适用于网络，每种格式的优缺点是什么。

image-format animation

— nium
source

另请参见为网络插图制作动画的最佳方法是什么？有关每种格式的更多信息

— Zach Saucier

13

这取决于所需的动画类型。

.gif图片 -完全受支持，但仅限用于框架。.png文件应该支持动画，但是您根本不会经常看到它。
Flash，Silverlight和其他插件 -Flash最为普遍，但是所有插件都需要安装在浏览器中，而不必指望将其安装在用户的计算机上。可能不适用于移动平台。
CSS3-有限的变换或动画，有限的浏览器支持。
HTML5视频 -未来，但对浏览器的支持有限。
JavaScript-需要启用，但应具有接近通用的浏览器支持。动画类型有限。参见Raphael.js。
画布标签 -现代浏览器支持，但支持丰富的动画。

— 维塔士媒体
source

我将在这里进行细讲，但是<canvas>动画本质上是JavaScript-它只是可以绘制内容的另一种格式。如果要精确，则应区分动画HTML元素，SVG（raphael.js使用的动画）和HTML5<canvas>

— 易江

简而言之，SVG和画布动画之间的区别 -使用SVG，每个路径都是一个元素，您可以将数据和事件（如单击和鼠标悬停）绑定到div并与之交互，而在Canvas中，这更像是浏览器创建事物，他们的行为规则然后忘记了它们。SVG在IE 9之前的IE中不存在，这就是Raphael很棒的原因-它控制SVG，或者在IE6-8中，它使用IE的旧自有品牌（称为VML）。我唯一不知道Raphael不能使用的是旧的Android股票浏览器（我认为在版本2之前）。

— user56reinstatemonica8

2

除了Virtuosi Media的出色答案之外：

苹果公司最近在其网站上使用了JPEG和PNG静止图像进行动画制作。他们使用JavaScript来切换图像。如果您没有太多的框架，需要alpha透明性支持，希望动画在页面上就位，并且想要广泛的浏览器支持，那么这是一种很棒的技术。缺点是下载大小和工作量。

它也可以是交互式的。如果滚动到Apple iPad页面的Smart Cover部分，则可以看到它的运行状态：http : //www.apple.com/ipad/features/

— 马克·爱德华兹
source

1

当在动画图层的图像下方的图层上覆盖包含透明度的图像时。您会发现PNG24是唯一一种将抗锯齿与背景图像正确融合的图像格式。使用GIF和PNG8，您会发现自己的边缘都很矮胖。看起来不太好，但是真的很容易错过。

— 约翰·德菲尔
source