为什幺你的 Firefox 面板会动?

为什幺你的 Firefox 面板会动? 跨年欢乐的烟火彷彿还没散去,年关的气味又已经缓缓飘起,可惜对于身负两本杂誌出刊重任的编辑部来说,现在就已经开始水深水热的截稿。不过不管怎幺说,大过年的总要应应景,帮浏览器变个装应该也是个不错的点子,最近小编发现了几个Firefox面板是「会动的」,你知道是怎幺做到的吗?

为什幺你的 Firefox 面板会动?

▲如果是从附加元件视窗去寻找「更多布景主题」,要再按这里才是面板的主页。

为什幺你的 Firefox 面板会动?

▲由于Personas是由扩充套件发展而来的,所以这里还有另一个入口。

▲只要滑鼠移过面板图片就可以预览套用后的效果。

Firefox面板的英文名称是Personas,是一种轻量的布景主题,简单的说,只是把浏览器操作介面下的底图换掉而已,所以门槛十分低。而Firefox跟Personas各自都有面板的下载网页,看起来资源也都差不多,差别是Firefox官网提供了中文使用介面。

为什幺你的 Firefox 面板会动?

▲这个闪电特效的动态面板,会由左至右划过天际。

为什幺你的 Firefox 面板会动?

▲虽然万圣节早就过了,不过这个面板的配色和右边的蜘蛛动画很有趣。

为什幺你的 Firefox 面板会动?

▲这个写轮眼转啊转的卡卡西面板实在太酷了。

为什幺你的 Firefox 面板会动?

▲肚子会变大变小的Snoopy睡午觉面板,小编现正套用中。

比GIF更漂亮的APNG

为什幺会有动态面板呢,这是因为Firefox面板支援APNG这个进阶的动画格式。APNG主要是为了取代阳春的GIF发展出来的,如果有玩过GIF动画的人,应该知道GIF只有256色,虽然可以支援透明背景,但是透明度只有透明、不透明两种变化。简单的说,就是套用在複杂背景的时候效果会很粗糙,文字说起来複杂,看看底下Mozilla所製作的示範网页应该会更清楚:

为什幺你的 Firefox 面板会动?

▲示範网页会先以一张小图来测试你的浏览器能不能支援APNG。

为什幺你的 Firefox 面板会动?

▲网页中间有一段GIF(第一排)和APNG(第二、三排)的对比。

刚刚提到了GIF的限制,再来比对一下APNG的优点,基本上可以把APNG视为PNG的动态版,所以它支援24位元的影像与8位元的透明度,也就是颜色更丰富,透明度变化更多,可以呈现半透明或渐层的边缘效果。

从示範网页来看,第一排的GIF在有色背景下,恐龙边缘会出现不该出现的锯齿状边线,另外恐龙本身的颜色也有一些斑点状、不连续的色块。至于APNG的版本除了恐龙的「皮肤」质感更滑嫩,边缘还有一小圈光晕的效果。

APNG的发展瓶颈

既然APNG这幺棒,以后大家都改用APNG取代GIF不就好了?可惜APNG目前的应用并不普及,甚至有点到了冷门的地步。支援APNG的浏览器只有Firefox和Opera,其他浏览器看起来都没有想支援的打算,另外Firefox操作介面上的小动画,例如网页载入时分页标籤上的甜甜圈也是APNG,这是因为最早APNG就是为了储存浏览器介面上的动画,而被Mozilla所创造出来的。

APNG的另一个问题,就是缺乏主流的绘图软体支援,教学资源也十分匮乏,小编试用了其中还算可以搬上檯面的GIMP外挂,弄了半天也搞不懂它的製作流程是什幺,而且目前的製作工具不像GIF、Flash,有针对动画设计的视觉化编辑功能,而是得「一格一格」的自己土法炼钢。

如果你刚刚已经套用一些动态面板的话,Firefox设定档里头就会底图快取下来,设定档的位置是在「%appdata%\Mozilla\Firefox\Profiles」底下,里头有个「XXX.default」的资料夹便是,里面会有两个「lightweighttheme-」为首而命名的档案,就是现成的APNG练习题了。

为什幺你的 Firefox 面板会动?

▲在Firefox设定档目录找到「lightweighttheme-header」、「lightweighttheme-footer」两个档案。

为什幺你的 Firefox 面板会动?

▲複製出来并且加上副档名「PNG」,就可以看到APNG的真面目。

为什幺你的 Firefox 面板会动?

▲GIMP并不是装好外挂就可以直接侦测出APNG,要手动选取档案格式才行。

为什幺你的 Firefox 面板会动?

▲用APNG格式打开后,会发现一共是有四个画格的连环图。

由于APNG档的第一个画格会被储存为一般的PNG档串流,所以当你用不支援APNG的影像打开,便出现不会动的一般PNG档了。这个「向下相容」的特性似乎是它的优点,但是应用软体并没有办法简单判别图档是一般PNG或动态APNG,它们的副档名都是PNG,这也造成APNG发展的限制。

撇开APNG不够普及和难以製作的问题,动态的Firefox面板还是相当好玩的,也许之后会有人研发更好的动画格式和编辑工具,不过这些就留给程式人员去伤脑筋吧。

延伸阅读:维基百科的APNG条目