Adobe Edge Animate对图形格式的支持和各种图形格式的区别
Adobe Edge Animate对图形格式的支持和各种图形格式的区别
版权声明:
本文版权属于 北京联友天下科技发展有限公司。
转载的时候请注明版权和原文地址。
一、概述
当你做好了一张图片，想要把它用于Edge Animate中时，纠结了……图片格式这么多，到底选择哪一种格式导出呢？不要担心，Edge Animate支持PNG，GIF，JPG和SVG格式的图片。接下来将为大家详解各种格式类型之间的区别，在哪种情况下要用哪一种格式类型。
以下截图显示的是不同格式类型保存的同一张图片（带Alpha通道）：
二、JPEG
JPEG（或JPG）格式的图形比PNG格式的图形具有更高的压缩率，它的文件大小更小。当你不需要图片背景透明（不带透明通道，比如作为一张背景图的时候）则尽量选择JPEG格式的图片。如果你选择JPEG格式导出图片，90%的可能你会得到一张文件大小更小的图片，这样会减少加载工程的时间。大部分设计工具都提供JPEG格式的输出，因为JPEG格式在文件大小和图像质量的平衡上达到最优。图像质量越低，图像大小越小，反之亦然。当然，JPEG格式的文件在保存的时候已经被栅格化，当放大的时候会出现方块像素（即马赛克）。
三、PNG
如果你需要图像带透明通道（背景透明），那么PNG文件是最理想的选择了。PNG文件也支持alpha的渐变，所以PNG也是制作半透明颜色图像的理想格式。与JPEG一样，当PNG文件也被栅格化，当放大的时候会出现方块像素。
PNG有三种主要的文件格式。（用PNG做成的动画也是GIF的有力竞争者，但是PNG动画没有广泛的浏览器支持）
1.PNG-8
由Photoshop或者Illustrator导出的PNG-8文件不支持透明度渐变功能，也就是说每个像素要么就是透明的要么就是不透明的，没有中间过渡，所以在曲线或者斜线出现的图像边缘会有锯齿（见上图）。但是如果你的图像只包含横平竖直的直线并且需要背景透明（比如一个蓝色正方形，背景透明），那么PNG-8是导出最小文件的最佳选择。
2.PNG-24
PNG-24支持透明度渐变过渡，也就是说可以得到极佳的透明度过渡效果。这种格式在Edge Animate中很常见，因为它让图像效果更佳，也方便设计者对分层的元素进行操作。
3.PNG-32
PNG-32与PNG-24类似，不过PNG-32多出8个比特位来存放透明度数值，当然文件大小会更大。
四、SVG
SVG格式会保存图形中的向量数据，所以在浏览器中你可以将它放大而不会出现方块像素（马赛克）。但是当前版本的Edge Animate只是将SVG文件识别为平面设计图形，所以当SVG文件导入Edge Animate中，你不能继续编辑它（当然你可以在图形编辑软件中更改，重新保存，然后更新Edge Animate中的文件）。SVG文件一般仅在当你需要放大图像的时候使用，因为它的文件比其他格式更大。当前在Web上更为保险的方法就是使用PNG文件因为存在跨浏览器支持的问题。
当你从Illustrator中导出SVG文件的时候需要注意导出文件会包含隐藏的文件和图层数据，这样会莫名其妙地增加文件大小。SVG文件的宽高数据也与画板的大小有关，在导出SVG文件的时候需要将画板调整到与所需宽高一致。
根据不同的限制，SVG也有几种不同的格式。SVG1.1是被W3C所认可的文件格式。
五、GIF
GIF文件什么时候有用呢？当你的图形中包含动画的时候，GIF就派上用场了（如一个预加载动画）。GIF也支持透明度，但是它也有像PNG-8文件的局限性。PNG文件比GIF文件具备更优的压缩率和更好的图像效果，推荐当图形中包含动画的时候才使用GIF格式。
六、图像尺寸
根据Web的性质，不管你使用哪种文件格式，在某些情况下处理图形也会有一些特例。
1.iOS系统中的图像
目前，在iOS系统中的图像，如果分辨率超过1024 x 1024，就会被缩放导致扭曲失真。所以当你需要放置这种分辨率的图像时，可以试着把他们裁剪成两张或者更多的图片（分辨率更小），然后再Edge Animate中使用元件或者编组将他们组合在一起。
2.关于图形动画的一些特殊情况
本部分将讲述由于浏览器局限性而引起的一些动画效果不理想的问题。
- 假如在很长一段时间里对一个元素做变化很小的动画会导致动画产生抖动感。比如在2秒的时长里将一张图片从100%放大至103%。为了避免这种情况你可以选择减少动画时长或者增加动画属性值的变化幅度。
- 假如对一张分辨率很大的图片做动画，或者创建一个将图片放大很多倍的动画，在部分浏览器中可能会产生问题。
原文地址：
http://helpx.adobe.com/content/help/en/edge-animate/kb/best-practices-graphics-edge-animate.html
本文地址：
翻译/注解：北京联友天下科技发展有限公司 肖伟民
