Gif 动图在macOS与iOS平台上都是被广泛使用的一种图片资源;但在这两个平台上关于Gif动图的支持却是完全不同的效果:NSImageView(macOS)默认支持Gif格式的图片资源,而UIImageView(iOS)默认是无法动画显示Gif格式的图片资源
0x00: 什么是Gif 图片?
GIF 分为静态GIF和动画GIF两种，扩展名为.gif，是一种压缩位图格式，支持透明背景图像，适用于多种操作系统，“体型”很小，网上很多小动画都是GIF格式。其实GIF是将多幅图像保存为一个图像文件，从而形成动画，最常见的就是通过一帧帧的动画串联起来的搞笑gif图，所以归根到底GIF仍然是图片文件格式 ---引自 <<百度百科>>
这里可以看到Gif 是保存了多幅图像的一个图像文件,有了这个基础认识,我们就可以使用代码来解析Gif图像了.
0x01: 关于ImageIO 框架
在iOS4.0+和macOS1.08+之后苹果提供了ImageIO框架,它是一个图像管理框架,提供了对图像的读写,管理颜色空间,图像格式以及访问图像元数据的功能.这个框架中提供了下面五个模块:
ImageIO.CGImageDestination
ImageIO.CGImageMetadata
ImageIO.CGImageProperties
ImageIO.CGImageSource
ImageIO.ImageIOBase
其中解析数据我们主要使用CGImageSource这个模块.
0x02: 为什么需要手动解析Gif?
既然在macOS中的NSImageView控件默认支持播放Gif图像资源,为什么我们还需要自己解析Gif呢? 这主要看具体的业务需求场景, 笔者遇到的几个实际需求场景如下:
- 需要控制Gif的播放次数.
- 需要提取Gif的某一帧图片.
- 需要给Gif 添加水印效果(需要将水印加到Gif的每一帧图片上).
- 获取Gif的内部图片信息.
由于NSImageView仅提供了一个animates布尔值来控制是否动画显示Gif图片,无法指定播放次数,同时在iOS平台中,UIImageview没有animates这个属性支持Gif格式图像,通常需要引入第三方库实现对Gif的支持,通过了解ImageIO,我们可以更容易理解第三方库是如何进行Gif处理的,这将有助于我们进行定制功能的开发或者有效的Bug处理.
0x03: 动手解析Gif
-
示例Gif 资源:
Gif示例资源 -
创建测试项目工程:
测试项目工程 - 核心代码:
/** 1. 获取gif 资源的路径 */
guard let gifPath = Bundle.main.pathForImageResource(NSImage.Name.init("timg.gif"))else{return}
/** 2. 读取gif 图片资源元数据 */
guard let gifData = NSData(contentsOfFile: gifPath) else {return}
/** 3. 根据图片元数据生成 cfImageSourceRef (包含了gif资源的内部数据信息) */
guard let imageSourceRef = CGImageSourceCreateWithData(gifData, nil) else {return}
/** 4. 获取gif 中的图片个数 */
let imageCount = CGImageSourceGetCount(imageSourceRef)
/** 5. 创建数组,用于存放转换后的NSImage */
var imageArray = [NSImage]();
for i in 0 ..< imageCount {
/** 6. 获取CGImage 资源 */
guard let cgImageRef = CGImageSourceCreateImageAtIndex(imageSourceRef, i, nil) else {continue}
/** 7. 根据CGImage 创建NSImage */
let image = NSImage(cgImage: cgImageRef, size: CGSize(width: cgImageRef.width, height: cgImageRef.height))
/** 8. 将NSImage 添加的数组中 */
imageArray.append(image)
}
/** 显示某一帧图片 (此示例中显示为100 ,图片总数为104)*/
imageView.image = imageArray[100];
-
示例代码运行效果:
代码运行效果
这里主要用到了CGImageSource中的几个函数:
- CGImageSourceCreateWithData(): 根据gif数据创建CGImageSource;
- CGImageSourceGetCount(): 获取gif中包含的图片总数;
- CGImageSourceCreateImageAtIndex(): 根据自定帧数创建一个CGImage对象;
到这里我们已经获取到Gif数据中的图片个数,并将每帧图片都保存到我们自己的一个数组中了,这样我们就可以使用NSTimer来实现动画效果了.
/ ** 懒加载定时器 */
lazy var animTimer = Timer(timeInterval: 0.1, target: self, selector: #selector(starGifAnimated), userInfo: nil, repeats: true)
/** 添加播放记录索引 */
var playIndex = 0
/** 动画执行方法 */
@objc func starGifAnimated() {
imageView.image = imageArray[playIndex]
playIndex += 1
if playIndex == imageArray.count {
playIndex = 0
}
}
-
动画效果:
使用NSTimer实现动效
细心的朋友可能会看到这里的动画是通过设置NSTimer每个0.1秒(这个值是随便写的)来重复执行的,那么我们如何来获取一个正确的Gif播放时长呢?
其实在CGImageSource中我们可以使用下面这个函数获取Gif每帧图片的播放时长;
- CGImageSourceCopyPropertiesAtIndex(): 获取指定帧的属性值 -> 返回一个字典;
kCGImagePropertyGIFDictionary: // 获取gif 信息的key
kCGImagePropertyGIFDelayTime: // 获取gif一帧时长的key
/** 9. 获取指定帧的属性信息 */
guard let properties = CGImageSourceCopyPropertiesAtIndex(imageSourceRef, i, nil) as? NSDictionary else {continue}
/** 10. 获取指定帧的gif信息字典 */
guard let gifDictInfo = properties[kCGImagePropertyGIFDictionary] as? NSDictionary else {continue}
/** 11. 获取一帧的时长 */
guard let duration = gifDictInfo[kCGImagePropertyGIFDelayTime] as? NSNumber else {continue}
/** 累加计算总时长 */
playTotalTime += duration.doubleValue
最后,我们根据总时长和总的图片数就可以计算出NSTimer的执行间隔了.
0x04: 小结
我们通过ImageIO 实现了手动解析Gif图像资源,并使用NSTimer循环所有图片数组实现Gif 的动画效果.通过这个例子希望能够帮助大家进一步的了解在macOS中NSImageView 和iOS平台中UIImageView如何更灵活的使用Gif图像资源.
本例中只是macOS上的效果,对于iOS有兴趣的朋友可以试着将解析后的NSImage数组赋值给UIImageView的animationImages属性实现Gif动效,权当阅读后的练习,就不给出具体代码了...
本文仅是关于ImageIO的一个简单介绍,通过解析Gif图像数据来揭开这个框架的冰山一角,后续有机会再继续补充.
0x05: One more thing....
- 使用
NSTimer时,因为repeats设置的为true, 需要注意内存释放问题. - 如需要实现
Gif水印,则需要使用CGImageDestination将数据写回到指定路径.
示例代码Github地址
