在 Flash Player 中显示GIF动画

Posted on Sep 26, 2012

之前遇到这个需求,本人坚持”不重复发明轮子”的原则,弘扬”积极的偷懒不算偷懒”的精神,找到了两个解决方案。因为之前研究了GIF格式和LWZ算法,所以理解起来,没有太大的问题。

方案一:as3gif

作者:Thibault Imbert 项目地址:http://code.google.com/p/as3gif/

2007年Thibault 在他的Blog里介绍了这个方法,从java GIF encoder 移植而来,可以实现gif的编码、解码和显示。调用也很简单,代码如下:

	// we create the GIFPlayer, it plays automatically by default
	var myGIFPlayer:GIFPlayer = new GIFPlayer();
	// we show it
	addChild ( myGIFPlayer );
	// we load a gif file
	myGIFPlayer.load ( new URLRequest ("animation.gif") );
	// you can also load any valid GIF stream (ByteArray) with the loadBytes method (version 0.2)
	myGIFPlayer.loadBytes ( gifStream );
	// listen for the IOErrorEvent.IO_ERROR event, dispatched when the GIF fails to load
	myGIFPlayer.addEventListener ( IOErrorEvent.IO_ERROR, onIOError );
	// listen for the GIFPlayerEvent.COMPLETE event, dispatched when GIF is loaded
	myGIFPlayer.addEventListener ( GIFPlayerEvent.COMPLETE, onCompleteGIFLoad );
	// listen for the FrameEvent.FRAME_RENDERED event, dispatched when a GIF frame is rendered on screen
	myGIFPlayer.addEventListener ( FrameEvent.FRAME_RENDERED, onFrameRendered );
	// listen for the FileTypeEvent.INVALID event, dispatched when an invalid file is loaded
	myGIFPlayer.addEventListener ( FileTypeEvent.INVALID, onInvalidFileLoaded );
	// get total frames
	myGIFPlayer.totalFrames;
	// standard methods
	myGIFPlayer.play();
	myGIFPlayer.stop();
	myGIFPlayer.gotoAndStop(3);
	myGIFPlayer.gotoAndPlay(3);

优点:简单易用,接口丰富,满足一般应用。具备GIF编码类,可将位图数据添加至GIF动画帧中。

缺点:解码和播放的性能不太理想。在加载大的文件时耗时太长,动画帧控制不准确。

方案二:AS3GifPlayer

作者:Brian McKelvey 项目地址:https://github.com/Worlize/Flash-Animated-GIF-Library

由于方案一在解码方面的不足,Brian McKelvey 完全从无到有,重写了基于Flash Player的GIF解码类,据称解码的性能提高了2个数量级(10^2)。另外动画帧的播放也更精确,因为是基于舞台的帧率而播放的,而且当舞台帧率太低时还支持跳帧。上面的Demo就是采用AS3GifPlayer的。

示例代码如下:

	player.addEventListener(GIFPlayerEvent.COMPLETE, handleGifLoadComplete);
	player.addEventListener(AsyncDecodeErrorEvent.ASYNC_DECODE_ERROR, handleAsyncDecodeErrorEvent);
	player.addEventListener(GIFPlayerEvent.FRAME_RENDERED, handleFrameRendered);
	player.loadBytes(ref.data);

优点:简单易用,接口丰富,性能优越,代码结构清晰易读。

缺点:只有解码和播放功能,无编码功能。


参考资料

  1. AS3 GIF Animation Encoding Class 0.1 by Thibault Imbert
  2. AS3 GIF Player Class 0.3 by Thibault Imbert
  3. https://github.com/Worlize/Flash-Animated-GIF-Library