[iOS] Gif 图片的显示 以及文字的特效

Gif 图片的显示: 

首先, 你需要一个开源三方, 也就是我们所熟悉的 SDWebImg

我们可以看到, 有一对文件是关于 Gif 的, 没错, 我们需要的就是这个.

在你们需要添加动态图片的地方 引用这个头文件.

#import <UIImage+GIF.h>

接下来我们需要一个 imageview 来放图片

@property (nonatomic, strong) UIImageView *loadingImageView;

下面就是动态图的解析方法了, 这个方法可以直接读取 gif 格式图片的每一个动画帧, 别忘了调用这个方法,这可不是自动执行的系统方法.

- (void)initLoadingImageView{

NSString  *name = @"43c353f13e852c1455ce2cd04fa19156.gif";

NSString  *filePath = [[NSBundle bundleWithPath:[[NSBundle mainBundle] bundlePath]] pathForResource:name ofType:nil];

NSData  *imageData = [NSData dataWithContentsOfFile:filePath];

if (!self.loadingImageView) {

self.loadingImageView = [[UIImageView alloc]init];

}

//    imgView.image = [UIImage animatedImageWithAnimatedGIFData:imageData];

self.loadingImageView.backgroundColor = [UIColor clearColor];

self.loadingImageView.image = [UIImage sd_animatedGIFWithData:imageData];

self.loadingImageView.frame = CGRectMake(80, 80, 100, 80);

self.loadingImageView.center = CGPointMake(self.view.center.x, self.view.frame.size.height / 3 - 60);

[self.img addSubview:self.loadingImageView];

[self.img bringSubviewToFront:self.loadingImageView];

}

文字的特效: 

效果如下:

关于这个, 有个开源小 demo, 叫 Twinkle.

可以直接把里面的 src 文件拖进你的工程中, 但是 demo 中是一个 button 点击后才显示动画, 并且只显示一次,在这里我 安利给大家一个让 label 文字显示这个效果并且无限播放.  hoho~

还是把 src 文件拖进你的工程, 然后引用头文件:

#import "UIView+Twinkle.h"

创建一个 label 属性来设置文字

@property (nonatomic, strong)UILabel *labelFlash;

别忘了给你的背景设置一个颜色, 不然 bulingbuling 的效果看不出来

然后就是设置你 label 的样式,位置和大小了.

self.labelFlash.text = @"JuJu";

self.labelFlash.font = [UIFont fontWithName:@"AvenirNext-Regular" size:32];

self.labelFlash.textColor = [UIColor colorWithRed:0.449 green:0.315 blue:1.000 alpha:1.000];

self.labelFlash.center = CGPointMake(self.view.center.x, self.view.center.y);

self.labelFlash.textAlignment = NSTextAlignmentCenter;

[self.view addSubview:self.labelFlash];

在上方代码最后调用一下动画效果就 ok 了.

[self.labelFlash twinkle];

到此, 你的 label 就可以看到效果了,虽然只是一遍.  要是没显示出来, 那你就是没放图片的原因,

上面就是 bulingbuling 的闪光图, 因为是白色, 拖到桌面就能看见了.

你也可以放一个小樱花,小树叶之类的图片, 但是名字要叫 TwinkleImage, 不然你就要改源码中的 imageName.

接下来就是让效果无限循环了, 首先先打开 TwinkleLayer+Anim.m 文件, 可以看见里面有三个属性和几个方法, 然后找到 fadeAnimation.repeatCount = 2 这句代码.

把 2 改成 MAXFLOAT 就好了. 

运行试试吧