Question

为什么那些讨厌的GIF在动画片方面仍然占主导地位？我相信现在有更好的替代方案，但为什么它们中没有一个能够获得牵引力呢？

Answer 1

动画png或APNG（http://en.wikipedia.org/wiki/APNG）。可以使用GIMP在APNG Plug-in中制作它们但是动画Gif真的是那里的主力 - 闪光灯有点接过了，但这本身并不是真正的形象。

此外，来自同一维基百科页面的其他替代方案：MNG文件格式是APNG的更强大的替代方案，虽然格式更复杂，并且支持更少的网络浏览器。

GIF文件格式比APNG具有更好的应用程序和浏览器支持，但每帧限制为256色，并且只支持1位alpha透明度，方法是将其中一种调色板颜色映射为透明。

SVG结合脚本或SMIL可以为矢量图形设置动画，并且可以合并光栅图形。（参见SVG动画。）

使用HTML 5 canvas Object创建的动态图形也可以设置动画。

网页动画的另一种方法是使用传统的静态图像，并使用JavaScript，[22] Adobe Flash，Microsoft Silverlight，Java或其他基于插件的技术为它们制作动画。

Answer 2

WebP是采用有损压缩和无损压缩的图像格式。它目前由谷歌开发。

与动画GIF相比，动画WebP的优势

与GIF的8位颜色和1位alpha相比，WebP支持具有8位alpha通道的24位RGB颜色。
WebP支持有损和无损压缩;事实上，单个动画可以组合有损和无损帧。 GIF仅支持无损压缩。 WebP的有损压缩技术非常适合从真实世界视频创建的动画图像，这是一种日益流行的动画图像来源。
WebP比GIF1需要更少的字节。转换为有损WebP的动画GIF小64％，而无损WebP小19％。这在移动网络上尤为重要。
在寻求存在的情况下，WebP需要更少的时间进行解码。在Blink中，滚动或更改选项卡可以隐藏和显示图像，从而导致动画暂停，然后跳转到另一个点。导致动画丢帧的过多CPU使用也可能需要解码器在动画中向前搜索。在这些场景中，动画WebP的总解码时间为GIF的0.57倍，从而减少了滚动期间的抖动和从CPU利用率峰值恢复的速度。

与动画GIF相比，动画WebP的缺点

在没有寻求的情况下，WebP的直线解码比GIF更加耗费CPU。有损WebP的解码时间是GIF的2.2倍，而无损WebP则需要1.5倍。
WebP支持并不像GIF支持那样普及，GIF支持实际上是普遍的。
向浏览器添加WebP支持会增加代码占用空间和攻击面。在Blink中，大约有1500行代码（包括WebP demux库和Blink端WebP图像解码器）。请注意，如果WebP和WebM共享更常见的解码代码，或者WebP的功能包含在WebM中，将来可以减少此问题。

https://developers.google.com/speed/webp

Answer 3

我想建议使用视频动画图片。现在，HTML5中的video标记得到广泛支持，对MPEG4的支持几乎相同。

<video autoplay loop src="sample.mp4">

使用自动播放和循环属性，可以轻松复制动画GIF的行为。

我会承认transparency in video仍然是一个问题。

Answer 4

我使用jquery插件为一系列PNG制作动画。见http://blog.shynet.nl/post/2010/08/28/Alternative-to-animated-GIFs-AnimateImages-jQuery-Plugin.aspx

我不确定具有大量图像的插件的性能。我只用它来闪烁图标

Answer 5

正如Nathan和其他人之前所说，有许多方法可以制作图形动画。

我个人更喜欢

（1）在Illustrator或Inkscape等中创建图形。

（2）以.SVG格式保存图形

（3）在您的网页中嵌入SVG代码（即，和之间的所有内容）

（4）使用snap.svg（javascript libary）为嵌入的svg图形设置动画。大多数现代浏览器都支持SVG

Answer 6

使用jquery，我能够来回旋转6个jpgs的透镜序列，以获得GIF动画的相同结果;例如，http://www.vicgi.com。 6图像的总文件大小仅为233KB。如果这是一个动画GIF，将有11帧，文件可能超过1MB。更不用说GIF的颜色数量限制为256个。

<强> HTML

<!-- Reserve a div for showing the images with id=banner -->
<div class="row">
    <img id="banner" src="images/first_image.jpg" class="img-responsive">
</div>

<强>的Javascript ：在body标记结束之前添加此代码，假设您已链接到jquery cdn或下载。

var images = [
"first_image.jpg",
"second_image.jpg",
"third_image.jpg",
"forth_image.jpg",
"fifth_image.jpg",
"sixth_image.jpg",
"fifth_image.jpg",
"forth_image.jpg",
"third_image.jpg",
"second_image.jpg",
];   // add the images if necessary

numImages = images.length,
index = 1;  // start from the second image because first image is already in the HTML

function cycleImages() {
    image = "images/" + images[index];   // assume all the images are store in the images sub-directory
    $("#banner").attr("src", image);     // set the src attribute of the <img tag to the image to be shown
    index++;                             // advanced to the next image
    if (index == numImages) index = 0;   // recycle to the first image
}

$(function() {                          // start the rotation when document is ready
    setInterval("cycleImages()", 800)
});

Answer 7

MNG format是一种类似PNG的动画格式，但它似乎没有得到太多的欢迎。所以这只是一个采用的问题 - 因为动画GIF工作正常（并且没有以前的专利限制），为什么不使用它们呢？为什么修复什么没破？

Answer 8

这显然是很久以前的事了，但时代变了，.webm似乎是一个很好的竞争者。

简而言之，它是一种媒体格式，意味着免版税。它将与HTML5视频标签一起使用（请参阅@KeithShaw的答案），并且需要支持相应编解码器的浏览器。然而，YouTube是其中一个采用者，以及其他一些我不会在此提及的行业。

这是该项目的网站：WebM Project

那里有动画GIF的替代品吗？

8 个答案: