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];
    }
}

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

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

时间: 2021-05-18

iOS动画教你编写Slack的Loading动画进阶篇

前几天看了一篇关于动画的博客叫手摸手教你写 Slack 的 Loading 动画,看着挺炫,但是是安卓版的,寻思的着仿造着写一篇iOS版的,下面是我写这个动画的分解~ 老规矩先上图和demo地址: 刚看到这个动画的时候,脑海里出现了两个方案,一种是通过drawRect画出来,然后配合CADisplayLink不停的绘制线的样式:第二种是通过CAShapeLayer配合CAAnimation来实现动画效果.再三考虑觉得使用后者,因为前者需要计算很多,比较复杂,而且经过测试前者相比于后者消耗更多的C

iOS动画解析之圆球加载动画XLBallLoading的实现

前言 当网页的页面大小较大,用户加载可能需要较长的时间,在这些情况下,我们一般会用到(加载)loading动画,提示于用户页面在加载中,本文将详细给大家介绍关于iOS圆球加载动画XLBallLoading实现的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.显示效果 二.原理分析 1.拆解动画 从效果图来看,动画可拆解成两部分:放大动画.位移动画 放大动画 比较简单,这里主要来分析一下位移动画 (1).先去掉缩放效果: 屏蔽放大效果 (2).去掉其中的一个圆球 现

iOS仿抖音视频加载动画效果的实现方法

前言 这几天一直跟开源的抖音demo斗智斗勇,今天跟大家分享的是抖音中或者快手中加载视频的动画,这个加载效果还是挺实用,下面话不多说了,来随着小编一起学习学习吧 上图看成品 实现原理 首先我创建一个视图 @interface ViewController () @property (nonatomic, strong) UIView *playLoadingView; @end @implementation ViewController - (void)viewDidLoad { [super

ios基于MJRefresh实现上拉刷新和下拉加载动画效果

本文介绍了ios基于MJRefresh实现上拉刷新和下拉加载动画效果,分享给大家,具体如下: 目录 1. 头部刷新动画 2.尾部刷新动画 头部刷新动画 #import <MJRefresh/MJRefresh.h> @interface HZNormalHeader : MJRefreshGifHeader @end #import "HZNormalHeader.h" @implementation HZNormalHeader #pragma mark - 重写父类的方

jQuery生成假加载动画效果

在使用PDFObject.js时,由于后台需要转换数据,在前台显示的时候,有很长一段时间显示空白页面,所以想到写一个假的加载动画 script片段: <script type="text/javascript"> var bar = 0; var line = "||" ; var amount ="||" ; function count(){ bar= bar+2 ; amount =amount + line; $("

分享8款优秀的 jQuery 加载动画和进度条插件

加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还有内容正在加载是一种非常好的方式.今天这篇文章向大家推荐10款基于 jQuery 实现的加载动画和进度条插件. Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示 Percentage Loader 一款轻量的 jQue

Angular4如何自定义首屏的加载动画详解

前言 相信大家都知道,在默认情况下,Angular应用程序在首次加载根组件时,会在浏览器的显示一个loading... 我们可以轻松地将loading修改成我们自己定义的动画.下面话不多说,来一起看看详细的介绍: 这是我们要实现首次加载的效果: 根组件标签中的内容 请注意:在你的入口文件index.html中,默认的loading...只是插入到根组件标签之间: <!doctype html> <html> <head> <meta charset="u

原生JS实现首页进度加载动画

js进度加载动画程序是本人的个人作品,写的不好,可以参考,但未经本人允许,请不要用于其它用途! 早上写了个首页进度加载动画,本想在我的博客里用上,测试发现博客园加载太快,根本看不到动画效果,直接就加载'Complete'了,算了,还是不要把博客搞得太臃肿了! 于是我就写了个演示页面,在body里加了个iframe来加载大一点的网站,这样就看出效果了! 用Safari打开貌似CSS动画的播放时间变成同步了,不知道什么原因,本地测试又没问题(请大神指点!),用Chrome.Firefox倒是没问题,

Android自定义view实现阻尼效果的加载动画

效果: 需要知识: 1. 二次贝塞尔曲线 2. 动画知识 3. 基础自定义view知识 先来解释下什么叫阻尼运动 阻尼振动是指,由于振动系统受到摩擦和介质阻力或其他能耗而使振幅随时间逐渐衰减的振动,又称减幅振动.衰减振动.[1] 不论是弹簧振子还是单摆由于外界的摩擦和介质阻力总是存在,在振动过程中要不断克服外界阻力做功,消耗能量,振幅就会逐渐减小,经过一段时间,振动就会完全停下来.这种振幅随时间减小的振动称为阻尼振动.因为振幅与振动的能量有关,阻尼振动也就是能量不断减少的振动.阻尼振动是非简谐运

Android仿网易一元夺宝客户端下拉加载动画效果(一)

上上周写的一个demo,仿照网易一元夺宝的下拉刷新效果. 原效果是(第一部分)一个小太阳拉下来,然后松开回弹上去, (第二部分)再掉下来一个硬币进行中轴旋转. 本文实现的效果的是第一部分的,效果演示图如下: Gif图看起来比较卡顿...其实真机演示效果还是很流畅的. 下面分析实现过程: 当时因为时间有限没有写在下拉刷新的组件中,也没有封装成一个单独的组件,只是在主布局后面写了一个View然后实现相应的操作,进行封装并不难,这里就不花时间BB了,下面是布局文件: <RelativeLayout x

jQuery Ajax 加载数据时异步显示加载动画

ajax加载后台数据就不说的那么细了. 看下面代码首先前台上放置代码 <div id="loadgif" style="width:66px;height:66px;position:absolute;top:50%;left:50%;"> <img alt="加载中..." src="../../Images/loading1.gif"/> </div> 在js脚本文件中首先把这个图片动画