iOS开发-下拉刷新动画loading旋转指示器动画效果

news2024/11/6 3:12:27

iOS开发-下拉刷新动画loading旋转指示器动画效果

之前开发中实现下拉刷新动画loading旋转指示器动画效果

一、效果图

在这里插入图片描述

二、基础动画

CABasicAnimation类的使用方式就是基本的关键帧动画。

所谓关键帧动画,就是将Layer的属性作为KeyPath来注册,指定动画的起始帧和结束帧,然后自动计算和实现中间的过渡动画的一种动画方式。

fillMode
大意:fillMode的作用就是决定当前对象过了非active时间段的行为. 比如动画开始之前,动画结束之后

  • kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态
  • kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态
  • kCAFillModeBackwards 这个和kCAFillModeForwards是相对的,就是在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始.你可以这样设定测试代码,将一个动画加入一个layer的时候延迟5秒执行.然后就会发现在动画没有开始的时候,只要动画被加入了layer,layer便处于动画初始状态
  • kCAFillModeBoth 理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画

可以查看

https://blog.csdn.net/gloryFlow/article/details/131991202

三、实现代码

3.1 代码实现动

主要实现CABasicAnimation动画,KeyPath是transform.rotation.z

- (CAAnimation *)rotateAnimation {
    //初始化一个动画
    CABasicAnimation *animation = [CABasicAnimation animation];
    //动画运动的方式,现在指定的是围绕Z轴旋转
    animation.keyPath = @"transform.rotation.z";
    //动画持续时间
    animation.duration = 0.5;
    
    //结束的角度
    animation.toValue = [NSNumber numberWithFloat:M_PI*2];
    //动画的运动方式
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    //是否反向移动动画
    
    //重复次数
    animation.repeatCount = MAXFLOAT;

    //动画结束后的状态
    animation.fillMode = kCAFillModeBackwards;
    
    //如果为true,动画将在其活动持续时间过后从渲染树中移除。默认为“是”
    animation.removedOnCompletion = NO;

    return animation;
}

完整代码如下

#import "INRefreshRoundLoading.h"
#import "UIColor+Addition.h"

static CGFloat kRoundSize = 26.0;

@interface INRefreshRoundLoading ()

@property (nonatomic, strong) CAShapeLayer *roundLayer;
@property (nonatomic, strong) CAShapeLayer *loadingLayer;

@property (nonatomic, assign) CGFloat startAngle;
@property (nonatomic, assign) BOOL isLoading;

@end

@implementation INRefreshRoundLoading

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.isLoading = NO;
        
        [self.layer addSublayer:self.roundLayer];
        [self.layer addSublayer:self.loadingLayer];

        [self drawContentShapeLayer];
        [self layoutSubLayersFrame];
        
        self.loadingLayer.strokeStart = 0.0;
    }
    return self;
}

- (void)layoutSubLayersFrame {
    self.roundLayer.frame = CGRectMake((CGRectGetWidth(self.bounds) - kRoundSize)/2,  (CGRectGetHeight(self.bounds) - kRoundSize)/2, kRoundSize, kRoundSize);
    self.loadingLayer.frame = CGRectMake((CGRectGetWidth(self.bounds) - kRoundSize)/2,  (CGRectGetHeight(self.bounds) - kRoundSize)/2, kRoundSize, kRoundSize);
}

- (void)displayPrecent:(CGFloat)precent {
    if (precent < 0) {
        precent = 0;
    }
    
    if (precent > 1.0) {
        precent = 1.0;
    }
    
    if (!self.isLoading) {
        self.loadingLayer.strokeStart = precent;
    }
}

- (void)startAnimation {
    self.isLoading = YES;
    
    self.loadingLayer.strokeStart = 0.7;
    [self.loadingLayer addAnimation:[self rotateAnimation] forKey:@"rotate"];
}

- (void)stopAnimation {
    self.isLoading = NO;
    [self.loadingLayer removeAnimationForKey:@"rotate"];
}

- (void)drawContentShapeLayer {
    // Drawing code
    [self drawLoadingLayer];
    [self drawRoundLayer];
}

- (CAAnimation *)rotateAnimation {
    //初始化一个动画
    CABasicAnimation *animation = [CABasicAnimation animation];
    //动画运动的方式,现在指定的是围绕Z轴旋转
    animation.keyPath = @"transform.rotation.z";
    //动画持续时间
    animation.duration = 0.5;
    
    //结束的角度
    animation.toValue = [NSNumber numberWithFloat:M_PI*2];
    //动画的运动方式
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    //是否反向移动动画
    
    //重复次数
    animation.repeatCount = MAXFLOAT;

    //动画结束后的状态
    animation.fillMode = kCAFillModeBackwards;
    
    /*
 大意:fillMode的作用就是决定当前对象过了非active时间段的行为. 比如动画开始之前,动画结束之后
 kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态
 kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态
 kCAFillModeBackwards 这个和kCAFillModeForwards是相对的,就是在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始.你可以这样设定测试代码,将一个动画加入一个layer的时候延迟5秒执行.然后就会发现在动画没有开始的时候,只要动画被加入了layer,layer便处于动画初始状态
 kCAFillModeBoth 理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画
     */
    
    //如果为true,动画将在其活动持续时间过后从渲染树中移除。默认为“是”
    animation.removedOnCompletion = NO;

    return animation;
}


#pragma mark - DrawShapeLayer
- (void)drawLoadingLayer {
    
    UIBezierPath* path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(kRoundSize/2, kRoundSize/2) radius:kRoundSize/2 startAngle:0 endAngle:M_PI*2 clockwise:YES];
    
    UIGraphicsBeginImageContext(self.loadingLayer.frame.size);
    [path stroke];
    UIGraphicsEndImageContext();
    
    self.loadingLayer.path = path.CGPath;
}

- (void)drawRoundLayer {
    
    UIBezierPath* path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(kRoundSize/2, kRoundSize/2) radius:kRoundSize/2 startAngle:0 endAngle:M_PI*2 clockwise:YES];
    
    UIGraphicsBeginImageContext(self.roundLayer.frame.size);
    [path stroke];
    UIGraphicsEndImageContext();
    
    self.roundLayer.path = path.CGPath;
}

#pragma mark - SETTER/GETTER
- (CAShapeLayer *)roundLayer {
    if (!_roundLayer) {
        _roundLayer = [CAShapeLayer layer];
        _roundLayer.backgroundColor = [UIColor clearColor].CGColor;
        //设置线条的宽度和颜色
        _roundLayer.lineWidth = 3.0f;
        _roundLayer.strokeColor = [UIColor colorWithHexString:@"dcdcdc" alpha:1.0].CGColor;
        _roundLayer.fillColor = [UIColor clearColor].CGColor;
        _roundLayer.lineCap     = kCALineCapRound;
    }
    return _roundLayer;
}

- (CAShapeLayer *)loadingLayer {
    if (!_loadingLayer) {
        _loadingLayer = [CAShapeLayer layer];
        _loadingLayer.backgroundColor = [UIColor clearColor].CGColor;
        //设置线条的宽度和颜色
        _loadingLayer.lineWidth = 3.0f;
        _loadingLayer.strokeColor = [UIColor colorWithHexString:@"ff7e48" alpha:1.0].CGColor;
        _loadingLayer.fillColor = [UIColor clearColor].CGColor;
        _loadingLayer.lineCap     = kCALineCapRound;
    }
    return _loadingLayer;
}

@end

3.2 MJRefresh使用该动画

我这里继承MJRefreshStateHeader

需要根据刷新控件的状态来执行开启动画与结束动画操作

刷新控件的状态如下

typedef NS_ENUM(NSInteger, MJRefreshState) {
    // 普通闲置状态
    MJRefreshStateIdle = 1,
    // 松开就可以进行刷新的状态
    MJRefreshStatePulling,
    // 正在刷新中的状态
    MJRefreshStateRefreshing,
    // 即将刷新的状态
    MJRefreshStateWillRefresh,
    // 所有数据加载完毕,没有更多的数据了
    MJRefreshStateNoMoreData
};

INRefreshHeader.h

#import "MJRefresh.h"
#import "INRefreshRoundLoading.h"

@interface INRefreshHeader : MJRefreshStateHeader

@property (nonatomic, assign) BOOL showInsetTop;

@property (nonatomic, strong) INRefreshRoundLoading *roundLoading;

@end

INRefreshHeader.m

@implementation INRefreshHeader

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        self.lastUpdatedTimeLabel.hidden = YES;
        self.stateLabel.hidden = YES;
        
        [self addSubview:self.roundLoading];
    }
    return self;
}

- (INRefreshRoundLoading *)roundLoading {
    if (!_roundLoading) {
        _roundLoading = [[INRefreshRoundLoading alloc] initWithFrame:CGRectMake(0.0, 0.0, CGRectGetWidth([UIScreen mainScreen].bounds), self.bounds.size.height)];
    }
    return _roundLoading;



- (void)setState:(MJRefreshState)state {
    MJRefreshCheckState
    
    // 根据状态做事情
    if (state == MJRefreshStateIdle) {
        if (oldState == MJRefreshStateRefreshing) {
            self.roundLoading.alpha = 1.0;

            // 如果执行完动画发现不是idle状态,就直接返回,进入其他状态
            if (self.state != MJRefreshStateIdle) return;
            
            self.roundLoading.alpha = 1.0;

            [self.roundLoading stopAnimation];

        } else {
            [self.roundLoading stopAnimation];

        }
    } else if (state == MJRefreshStatePulling) {
        [self.roundLoading stopAnimation];

    } else if (state == MJRefreshStateRefreshing) {
        self.roundLoading.alpha = 1.0;
    }
}

- (void)prepare {
    [super prepare];
    self.mj_h = 60.0;
}

- (void)placeSubviews {
    [super placeSubviews];
    
    CGFloat centerX = self.mj_w * 0.5;
    CGFloat centerY = self.mj_h * 0.5;
    self.roundLoading.center = CGPointMake(centerX, centerY);
}

/** 当scrollView的contentOffset发生改变的时候调用 */
- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change {
    [super scrollViewContentOffsetDidChange:change];
    NSLog(@"change:%@",change);
    
    CGPoint old = [change[@"old"] CGPointValue];
    CGPoint new = [change[@"new"] CGPointValue];
    
    CGFloat precent = -new.y/self.mj_h;
    [self.roundLoading displayIndicator:precent];
}

/** 当scrollView的contentSize发生改变的时候调用 */
- (void)scrollViewContentSizeDidChange:(NSDictionary *)change {
    [super scrollViewContentSizeDidChange:change];
}

/** 当scrollView的拖拽状态发生改变的时候调用 */
- (void)scrollViewPanStateDidChange:(NSDictionary *)change {
    [super scrollViewPanStateDidChange:change];
}

- (void)setShowInsetTop:(BOOL)showInsetTop {
    _showInsetTop = showInsetTop;
    
}

- (void)backInitState {
    
}

@end

3.3 具体的TableView使用

需要设置UITableView的下拉刷新操作:tableView.mj_header = header

- (void)configureRefresh {
    __weak typeof(self) weakSelf = self;
    INRefreshHeader *header = [INRefreshHeader headerWithRefreshingBlock:^{
        [weakSelf refreshData];
    }];
    
    INRefreshFooter *footer = [INRefreshFooter footerWithRefreshingBlock:^{
        [weakSelf loadMoreData];
    }];
    self.editView.tableView.mj_header = header;
    self.editView.tableView.mj_footer = footer;
}

- (void)refreshData {
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self.editView.tableView.mj_header endRefreshing];
        [self.editView.tableView.mj_footer endRefreshing];
    });
}

- (void)loadMoreData {
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self.editView.tableView.mj_header endRefreshing];
        [self.editView.tableView.mj_footer endRefreshing];
    });
}

四、小结

iOS开发-下拉刷新动画loading旋转指示器动画效果,使用mjrefresh一个好用的上下拉刷新的控件。实现CABasicAnimation基础效果,根据不同的mjrefresh下拉刷新操作来执行动画效果。

学习记录,每天不停进步。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/807309.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

尚医通10:科室排班日期+科室排班详细数据+搭建平台用户系统前端环境

内容介绍 1、查看科室排班日期统计数据 2、查看科室排班详细数据 3、搭建平台用户系统前端环境 4、首页静态数据整合 5、首页数据显示接口 6、首页数据显示前端 查看科室排班日期统计数据 1确认需求 2、实现接口 1&#xff09;分析接口 *参数&#xff1a;page、limit、h…

C语言基础入门详解一

前些天发现了一个蛮有意思的人工智能学习网站,8个字形容一下"通俗易懂&#xff0c;风趣幽默"&#xff0c;感觉非常有意思,忍不住分享一下给大家。 &#x1f449;点击跳转到教程 前言&#xff1a; 初识C语言 //#include 相当于java的import,stdio全称&#xff1a;st…

秒级体验本地调试远程 k8s 中的服务

点击上方蓝色字体&#xff0c;选择“设为星标” 回复”云原生“获取基础架构实践 背景 在这个以k8s为云os的时代&#xff0c;程序员在日常的开发过程中&#xff0c;肯定会遇到各种问题&#xff0c;比如&#xff1a;本地开发完&#xff0c;需要部署到远程k8s集群&#xff0c;本地…

【雕爷学编程】Arduino动手做(175)---机智云ESP8266开发板模块5

37款传感器与执行器的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&am…

区间预测 | MATLAB实现VAR向量自回归时间序列区间预测

区间预测 | MATLAB实现VAR向量自回归时间序列区间预测 目录 区间预测 | MATLAB实现VAR向量自回归时间序列区间预测预测效果基本介绍程序设计参考资料预测效果 基本介绍 区间预测 | MATLAB实现VAR向量自回归时间序列区间预测 VAR(Vector Autoregression)模型是一种广泛应用于时…

pytest 自定义HOOK函数

除了系统提过的HOOK函数外&#xff0c;也可以通过自定义HOOK的方式实现想要的功能。 首先创建一个py文件&#xff0c;里面定义自己的HOOK函数&#xff0c;主要pytest里面的hook函数必须以pytest开头。 #myhook.pydef pytest_myhook(user):"""自定义HOOK函数&q…

SpringBoot项目部署(前后端分离、Linux部署项目)

一、架构 部署环境说明&#xff1a; 192.168.122.100(服务器A)&#xff1a; Nginx&#xff1a;部署前端项目、配置反向代理 Mysql&#xff1a;主从复制结构中的主库 192.168.122.131 (服务器B)&#xff1a; jdk: 运行Java项目 git:版本控制工具 (从gitee中拉取源码) maven:…

No104.精选前端面试题,享受每天的挑战和学习(小米)

文章目录 聊一下vue和react的区别react生命周期有哪些hooks解决了什么问题小程序跳转传参怎么传附录&#xff1a;「简历必备」前后端实战项目&#xff08;推荐&#xff1a;⭐️⭐️⭐️⭐️⭐️&#xff09; &#x1f4c8;「作者简介」&#xff1a;前端开发工程师 | 蓝桥云课签…

CenOS设置启动级别

背景知识 init一共分为7个级别&#xff0c;这7个级别的所代表的含义如下 0&#xff1a;停机或者关机&#xff08;千万不能将initdefault设置为0&#xff09;1&#xff1a;单用户模式&#xff0c;只root用户进行维护2&#xff1a;多用户模式&#xff0c;不能使用NFS(Net File S…

Banana Pi BPI-CM4 评测(计算模块 4),更快性能,旨在替换树莓派CM4

如果您正在寻找可靠的单板计算机来提升您的下一个项目&#xff0c;但无法找到满足您需求的 Raspberry Pi&#xff0c;请看看我是否可以提供帮助。在这篇详细的评论中&#xff0c;我将向您介绍 Banana Pi CM4&#xff0c;这是一款适用于各种任务的多功能且强大的解决方案。从经验…

Blazor前后端框架Known-V1.2.8

V1.2.8 Known是基于C#和Blazor开发的前后端分离快速开发框架&#xff0c;开箱即用&#xff0c;跨平台&#xff0c;一处代码&#xff0c;多处运行。 Gitee&#xff1a; https://gitee.com/known/KnownGithub&#xff1a;https://github.com/known/Known 概述 基于C#和Blazor…

太强了~ 这份《23 种设计模式加强版》宝典,阿里 P8 都得细细研究

说在前面的话 Java 作为老牌纯正的编程语言&#xff0c;在规范性上有着天然优势。因此本版的设计模式讲解全部用 Java 语言来描述&#xff0c;并针对 Java 语言的特性对讲解内容做了相当大的改动。 不知道大家是否听过编程界的一段话&#xff1a;掌握设计模式相当于华山派的&…

信号和槽函数的扩展

信号和槽函数的扩展 一个信号连接多个槽函数一个槽函数连接多个信号信号连接信号 一个信号可以连接多个槽函数, 发送一个信号有多个处理动作 需要写多个connect&#xff08;&#xff09;连接槽函数的执行顺序和信号的发射顺序相同&#xff08;QT5中&#xff09;信号的接收者可…

C#实现读写CSV文件的方法详解

目录 CSV文件标准 文件示例RFC 4180简化标准读写CSV文件 使用CsvHelper使用自定义方法总结 项目中经常遇到CSV文件的读写需求&#xff0c;其中的难点主要是CSV文件的解析。本文会介绍CsvHelper、TextFieldParser、正则表达式三种解析CSV文件的方法&#xff0c;顺带也会介绍一…

SpringBoot中MongoDB的使用

SpringBoot中MongoDB的使用 MongoDB 是最早热门非关系数据库的之一&#xff0c;使用也比较普遍&#xff0c;一般会用做离线数据分析来使用&#xff0c;放到内网的居 多。由于很多公司使用了云服务&#xff0c;服务器默认都开放了外网地址&#xff0c;导致前一阵子大批 MongoD…

骨传导耳机是什么?为什么不用塞到耳朵里?

骨传导耳机其实就跟它的名字一样&#xff0c;用骨传导声音的耳机&#xff0c;整个声音传导过程都是开放双耳的&#xff0c;不接触耳膜&#xff0c;佩戴非常舒适的耳机。 为什么不需要塞进耳朵里&#xff0c;首先咱们要先知道骨传导的原理&#xff1a; 如上图所示&#xff0c;骨…

【Linux命令200例】less强大的文件内容查看工具

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;本文已收录于专栏&#xff1a;Linux命令大全。 &#x1f3c6;本专栏我们会通过具体的系统的命令讲解加上鲜活的实操案例对各个命令进行深入…

项目实战 — 消息队列(1) {需求分析}

一、什么是消息队列 消息队列&#xff08;Message Queue ,MQ&#xff09;&#xff0c;就是将阻塞队列的数据结构&#xff0c;提取成了一个程序&#xff0c;独立进行部署。也就是实现一个生产者消费模型。 有关生产者消费者模型&#xff0c;参考多线程 — 阻塞队列_多线程阻塞…

redis基本架构:一个键值数据库包含什么?(这篇文章主要是一个引导的作用)

我们设计一个简单的smpliekv数据库&#xff0c;来体验简直数据库包含什么 体来说&#xff0c;一个键值数据库包括了访问框架、索引模块、操作模块和存储模块四部分&#xff08;见 下图&#xff09;。接下来&#xff0c;我们就从这四个部分入手&#xff0c;继续构建我们的 Simpl…

【MyBatis】MyBatis 3.5+版本报错合集(持续更新)

报错&#xff1a;BindingException 1. org.apache.ibatis.binding.BindingException: Type interface xxx is not known to the MapperRegistry. 2. org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): xxx 解决方案 在pom.xml中添加如下代码…