iOS實現逐幀動畫做loading視圖
本文實例為大家分享了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]; }}
目前該組件功能還不夠完善,但是能滿足目前我自己的需求,后續再繼續豐富。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。
相關文章: