UILabel上添加gif动态图

最新推荐文章于 2026-03-25 02:34:23 发布

原创最新推荐文章于 2026-03-25 02:34:23 发布 · 2.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

iOS 专栏收录该内容

31 篇文章

订阅专栏

遇到一个新需求，需要在富文本上添加gif或者其他动态图，原来的使用的富文本不支持动态图，就研究下了国外大牛的demo，其实还是很简单的，主要原理就是把动态图切成一帧帧图片，然后利用NSTimer和动态图的周期循环在UILabel上画图片。。。但是亲测了一下不会引起cpu和内存方面的担忧，所以我们可以在第三方的富文本源码上进行修改或者重新封装一下，废话不多少，直接上代码。

1.拿gif为例，首先处理gif成图片数字和得到动画周期

//测试处理消息区 gif 得到图片数组和动画周期 _images _duration

-(void)getImagesAndDuration{

NSString *path = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"gif"];

NSData *data = [NSData dataWithContentsOfFile:path];

CGImageSourceRef source = CGImageSourceCreateWithData((__bridge CFDataRef)data, NULL);

size_t count = CGImageSourceGetCount(source);

_images = [NSMutableArray array];

_duration = 0.0f;

for (size_t i = 0; i < count; i++) {

CGImageRef image = CGImageSourceCreateImageAtIndex(source, i, NULL);

_duration += [self sd_frameDurationAtIndex:i source:source];

[_images addObject:[UIImage imageWithCGImage:image scale:[UIScreen mainScreen].scale orientation:UIImageOrientationUp]];

CGImageRelease(image);

}

-(float)sd_frameDurationAtIndex:(NSUInteger)index source:(CGImageSourceRef)source {

float frameDuration = 0.1f;

CFDictionaryRef cfFrameProperties = CGImageSourceCopyPropertiesAtIndex(source, index, nil);

NSDictionary *frameProperties = (__bridge NSDictionary *)cfFrameProperties;

NSDictionary *gifProperties = frameProperties[(NSString *)kCGImagePropertyGIFDictionary];

NSNumber *delayTimeUnclampedProp = gifProperties[(NSString *)kCGImagePropertyGIFUnclampedDelayTime];

if (delayTimeUnclampedProp) {

frameDuration = [delayTimeUnclampedProp floatValue];

}

else {

NSNumber *delayTimeProp = gifProperties[(NSString *)kCGImagePropertyGIFDelayTime];

if (delayTimeProp) {

frameDuration = [delayTimeProp floatValue];

}

// Many annoying ads specify a 0 duration to make an image flash as quickly as possible.

// We follow Firefox's behavior and use a duration of 100 ms for any frames that specify

// a duration of <= 10 ms. See <rdar://problem/7689300> and <http://webkit.org/b/36082>

// for more information.

if (frameDuration < 0.011f) {

frameDuration = 0.100f;

}

CFRelease(cfFrameProperties);

return frameDuration;

}

2.绘制gif 我们的项目用的是TTTAttributedLabel，绘制图片代码基本都差不多，根据自己项目的需要，传入相应的数据，在绘制图片处进行修改

- (void)drawStrike:(CTFrameRef)frame

inRect:(CGRect)rect

context:(CGContextRef)c

{

[super drawStrike:frame inRect:rect context:c];

//PS:这个是在TTT里drawFramesetter....方法最后做了修改的基础上。

CGFloat emojiWith = self.font.lineHeight*kEmojiWidthRatioWithLineHeight;

CGFloat emojiOriginYOffset = self.font.lineHeight*kEmojiOriginYOffsetRatioWithLineHeight;

//修正绘制offset，根据当前设置的textAlignment

CGFloat flushFactor = TTTFlushFactorForTextAlignment(self.textAlignment);

CFArrayRef lines = CTFrameGetLines(frame);

NSInteger numberOfLines = self.numberOfLines > 0 ? MIN(self.numberOfLines, CFArrayGetCount(lines)) : CFArrayGetCount(lines);

CGPoint lineOrigins[numberOfLines];

CTFrameGetLineOrigins(frame, CFRangeMake(0, numberOfLines), lineOrigins);

BOOL truncateLastLine = (self.lineBreakMode == NSLineBreakByTruncatingHead || self.lineBreakMode == NSLineBreakByTruncatingMiddle || self.lineBreakMode == NSLineBreakByTruncatingTail);

CFRange textRange = CFRangeMake(0, (CFIndex)[self.attributedText length]);

for (CFIndex lineIndex = 0; lineIndex < numberOfLines; lineIndex++) {

CTLineRef line = CFArrayGetValueAtIndex(lines, lineIndex);

//这里其实是能获取到当前行的真实origin.x，根据textAlignment，而lineBounds.origin.x其实是默认一直为0的(不会受textAlignment影响)

CGFloat penOffset = (CGFloat)CTLineGetPenOffsetForFlush(line, flushFactor, rect.size.width);

CFIndex truncationAttributePosition = -1;

//检测如果是最后一行，是否有替换...

if (lineIndex == numberOfLines - 1 && truncateLastLine) {

// Check if the range of text in the last line reaches the end of the full attributed string

CFRange lastLineRange = CTLineGetStringRange(line);

if (!(lastLineRange.length == 0 && lastLineRange.location == 0) && lastLineRange.location + lastLineRange.length < textRange.location + textRange.length) {

// Get correct truncationType and attribute position

truncationAttributePosition = lastLineRange.location;

NSLineBreakMode lineBreakMode = self.lineBreakMode;

// Multiple lines, only use UILineBreakModeTailTruncation

if (numberOfLines != 1) {

lineBreakMode = NSLineBreakByTruncatingTail;

}

switch (lineBreakMode) {

case NSLineBreakByTruncatingHead:

break;

case NSLineBreakByTruncatingMiddle:

truncationAttributePosition += (lastLineRange.length / 2);

break;

case NSLineBreakByTruncatingTail:

default:

truncationAttributePosition += (lastLineRange.length - 1);

break;

}

//如果要在truncationAttributePosition这个位置画表情需要忽略

}

//找到当前行的每一个要素，姑且这么叫吧。可以理解为有单独的attr属性的各个range。

for (id glyphRun in (__bridge NSArray *)CTLineGetGlyphRuns(line)) {

//找到此要素所对应的属性

NSDictionary *attributes = (__bridge NSDictionary *)CTRunGetAttributes((__bridge CTRunRef) glyphRun);

//判断是否有图像，如果有就绘制上去

NSString *imageName = attributes[kCustomGlyphAttributeImageName];

if (imageName) {

CFRange glyphRange = CTRunGetStringRange((__bridge CTRunRef)glyphRun);

if (glyphRange.location == truncationAttributePosition) {

//这里因为glyphRange的length肯定为1，所以只做这一个判断足够

continue;

}

CGRect runBounds = CGRectZero;

CGFloat runAscent = 0.0f;

CGFloat runDescent = 0.0f;

runBounds.size.width = (CGFloat)CTRunGetTypographicBounds((__bridge CTRunRef)glyphRun, CFRangeMake(0, 0), &runAscent, &runDescent, NULL);

if (runBounds.size.width!=emojiWith) {

//这一句是为了在某些情况下，例如单行省略号模式下，默认行为会将个别表情的runDelegate改变，也就改变了其大小。这时候会引起界面上错乱，这里做下检测(浮点数做等于判断似乎有点操蛋啊。。)

continue;

}

runBounds.size.height = runAscent + runDescent;

CGFloat xOffset = 0.0f;

switch (CTRunGetStatus((__bridge CTRunRef)glyphRun)) {

case kCTRunStatusRightToLeft:

xOffset = CTLineGetOffsetForStringIndex(line, glyphRange.location + glyphRange.length, NULL);

break;

default:

xOffset = CTLineGetOffsetForStringIndex(line, glyphRange.location, NULL);

break;

}

runBounds.origin.x = penOffset + xOffset;

runBounds.origin.y = lineOrigins[lineIndex].y;

runBounds.origin.y -= runDescent;

//上面代码千篇一律重点在这里 self.rankGifImageArray self.duration 是图片数组和动画周期

NSUserDefaults * nextImage = [NSUserDefaults standardUserDefaults];

int imgIndex = [[nextImage objectForKey:@"location"] intValue];

UIImage *image;

if (imgIndex < [self.rankGifImageArray count]-1) {

imgIndex++;

}else{

imgIndex= 0;

}

image = [self.rankGifImageArray objectAtIndex: imgIndex];

[nextImage setObject:[NSString stringWithFormat:@"%d",imgIndex] forKey: @"location"];

runBounds.origin.y += 3; //稍微矫正下。

runBounds.size.width = 28;

runBounds.size.height = 13;

CGContextDrawImage(c, runBounds, image.CGImage);

[self startGif:self.duration/self.rankGifImageArray.count];

}

- (void)startGif:(NSTimeInterval)time

{

if (!gifTimer) {

gifTimer = [NSTimer timerWithTimeInterval:time target:self selector:@selector(gifAnimate:) userInfo:nil repeats:YES];

[[NSRunLoop mainRunLoop] addTimer:gifTimer forMode:NSRunLoopCommonModes];

}

- (void)gifAnimate:(NSTimer *)timer

{

[super setNeedsDisplay];

}

总结：我们要做的就是在富文本处理图片的基础上进行修改，达到实现动态图效果。