正文

iOS实现逐帧动画做loading视图

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0702

这篇文章主要为大家详细介绍了iOS实现逐帧动画做loading视图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

.h文件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
#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文件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
#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中使用如下：

初始化视图：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
//设置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的代理方法中切换状态：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#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];
    }
}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持米米素材网。

原文链接：https://blog.csdn.net/fangzhangsc2006/article/details/11763483