服务器之家

服务器之家 > 正文

iOS实现逐帧动画做loading视图

时间:2021-06-08 16:05     来源/作者:shannonchou

本文实例为大家分享了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

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021德云社封箱演出完整版 2021年德云社封箱演出在线看
2021德云社封箱演出完整版 2021年德云社封箱演出在线看 2021-03-15
返回顶部