您的位置:首页技术文章
文章详情页

iOS实现逐帧动画做loading视图

浏览:36日期:2022-09-16 16:09:45

本文实例为大家分享了iOS实现逐帧动画做loading视图的具体代码,供大家参考,具体内容如下

我封装了一个可复用的loading视图组件,用于按照一定周期逐帧播放加载动画。代码如下:

.h文件

#import <UIKit/UIKit.h> //加载状态typedef enum { FZImageSequenceLoadingStatusStop = 1, // 停止 FZImageSequenceLoadingStatusLoading, // 加载中 FZImageSequenceLoadingStatusError //发生错误} FZImageSequenceLoadingStatus; @interface FZImageSequenceLoadingView : UIView { UIImageView *_imageView; UILabel *_lblMsg; NSTimer *timer; int currentImageIndex;} @property(strong) NSArray *imageArray; //动画序列的图片数组 @property(strong, nonatomic) UIImage *errorImage; @property(nonatomic, strong) NSString *errorMsg; @property(nonatomic, strong) NSString *loadingMsg; //提示文字 @property(nonatomic) CGRect imageFrame; //图片的Frame @property(nonatomic) CGRect msgFrame; //文字内容的Frame @property(nonatomic) float timerInterval; //切换图片的周期 /** 切换状态 */- (void)switchToStatus:(FZImageSequenceLoadingStatus)status; /** 通过图片名字和数量设置图片数组,如给定名字'name'、“.png”和数量4,则会去加载“name_1.png”到'name_4.png'的图片 */- (void)setImageArrayByName:(NSString *)name andExtName:(NSString *)extName andCount:(int)count; @end

.m文件

#import 'FZImageSequenceLoadingView.h' @implementation FZImageSequenceLoadingView @synthesize errorImage;@synthesize errorMsg;@synthesize imageArray;@synthesize loadingMsg;@synthesize timerInterval; - (id)initWithFrame:(CGRect)frame{ self = [super initWithFrame:frame]; if (self) {timerInterval = 1;currentImageIndex = -1; } return self;} /* // Only override drawRect: if you perform custom drawing. // An empty implementation adversely affects performance during animation. - (void)drawRect:(CGRect)rect { // Drawing code } */ - (void)setupSubviews {// self.backgroundColor = [UIColor redColor]; if (self.imageArray && self.imageArray.count > 0) {if (!_imageView) { _imageView = [[UIImageView alloc] init]; [self addSubview:_imageView];}//让图片view为本view的顶部居中,大小为图片数组中的第一张UIImage *firstImg = [self.imageArray objectAtIndex:0];_imageView.size = firstImg.size;_imageView.top = 0;_imageView.left = (self.size.width - _imageView.size.width) / 2; } if (self.loadingMsg) {CGSize labelSize = [self.loadingMsg sizeWithFont:[UIFont systemFontOfSize:11]];if (!_lblMsg) { _lblMsg = [[UILabel alloc] initWithFrame:CGRectZero]; _lblMsg.textAlignment = NSTextAlignmentCenter; [self addSubview:_lblMsg];}_lblMsg.font = [UIFont systemFontOfSize:11];_lblMsg.size = labelSize;_lblMsg.textColor = [UIColor darkGrayColor];_lblMsg.backgroundColor = [UIColor clearColor];_lblMsg.bottom = self.height;_lblMsg.left = (self.width - _lblMsg.width) / 2; }} - (void)switchToStatus:(FZImageSequenceLoadingStatus)status { if (!_lblMsg || !_imageView) {[self setupSubviews]; } switch (status) {case FZImageSequenceLoadingStatusError: [self switchToError]; break;case FZImageSequenceLoadingStatusLoading: [self switchToLoading]; break;case FZImageSequenceLoadingStatusStop: [self switchToStop]; break; }} - (void)switchToStop { [timer invalidate]; timer = nil; if (self.imageArray && self.imageArray.count > 0) {_imageView.image = [self.imageArray objectAtIndex:0]; }} - (void)switchToError { [timer invalidate]; timer = nil; //如果有错误状态的图 if (self.errorImage) {_imageView.image = self.errorImage;//如果没有就用第一张动画图 } else if (self.imageArray && self.imageArray.count > 0) {_imageView.image = [self.imageArray objectAtIndex:0]; }if (self.errorMsg) {_lblMsg.text = self.errorMsg; }} - (void)switchToLoading { if (self.loadingMsg) {_lblMsg.text = self.loadingMsg; } if (!timer) {timer = [NSTimer scheduledTimerWithTimeInterval:self.timerInterval target:self selector:@selector(showNextImage) userInfo:nil repeats:YES]; }} - (void)showNextImage { if (!imageArray || imageArray.count < 1) {return; } currentImageIndex = (currentImageIndex + 1) % self.imageArray.count; // 主线程执行: dispatch_async(dispatch_get_main_queue(), ^{_imageView.image = [imageArray objectAtIndex:currentImageIndex]; });} - (void)setImageArrayByName:(NSString *)name andExtName:(NSString *)extName andCount:(int)count { NSAssert((name && extName && (count > 0)), @'图片名字和数量错误'); NSMutableArray *imgs = [NSMutableArray arrayWithCapacity:count]; for (int i = 1; i <= count; i++) {NSString *imgName = [NSString stringWithFormat:@'%@_%i%@', name, i, extName];UIImage *image = [UIImage imageNamed:imgName];NSLog(@'%@', image);if (!image) { continue;}[imgs addObject:image]; } self.imageArray = imgs;} @end

使用示例,在uiwebview中使用如下:

初始化视图:

//设置loading视图- (void)setupLoadingView { if (!_loadingView) {_loadingView = [[FZImageSequenceLoadingView alloc] initWithFrame:CGRectMake(0, 0, 170, 70)];_loadingView.center = self.view.center;[_loadingView setImageArrayByName:@'loading' andExtName:@'.png' andCount:10];_loadingView.loadingMsg = @'努力加载中,请稍候';_loadingView.errorMsg = @'加载失败';_loadingView.timerInterval = 0.1;_loadingView.hidden = YES;[self.view addSubview:_loadingView]; }}

在uiwebview的代理方法中切换状态:

#pragma mark - webview delegate- (void)webViewDidStartLoad:(UIWebView *)webView { if (_loadingView.hidden) {_loadingView.hidden = NO;[_loadingView switchToStatus:FZImageSequenceLoadingStatusLoading]; }} - (void)webViewDidFinishLoad:(UIWebView *)webView { if (!_loadingView.hidden) {[_loadingView switchToStatus:FZImageSequenceLoadingStatusStop];_loadingView.hidden = YES; } }- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error { NSLog(@'load page error:%@', [error description]); if (!_loadingView.hidden) {[_loadingView switchToStatus:FZImageSequenceLoadingStatusError]; }}

目前该组件功能还不够完善,但是能满足目前我自己的需求,后续再继续丰富。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持好吧啦网。

标签: IOS
相关文章: