iOS利用CALayer实现动画加载的效果

 更新时间:2016年10月21日 10:35:53   投稿:daisy  
网上关于动画加载的效果大多每一个圆圈都是使用UIView,因为这种容易控制,但是这里用的是CALayer,文中给出了详细的实现示例代码,相信会对大家的学习和理解很有帮助,感兴趣的朋友们下面来一起看看吧。

首先来看看效果图

实现过程如下

控制器调用就一句代码:

[self showLoadingInView:self.view];

方便控制器如此调用,就要为控制器添加一个分类

.h文件

#import <UIKit/UIKit.h>
#import "GQCircleLoadView.h"
@interface UIViewController (GQCircleLoad)
//显示动画
- (void)showLoadingInView:(UIView*)view;
//隐藏动画
- (void)hideLoad;
@property (nonatomic,strong) GQCircleLoadView *loadingView;
@end

.m文件

#import "UIViewController+GQCircleLoad.h"
#import <objc/runtime.h>
@implementation UIViewController (GQCircleLoad)
- (GQCircleLoadView*)loadingView
{
 return objc_getAssociatedObject(self, @"loadingView");
}
- (void)setLoadingView:(GQCircleLoadView*)loadingView
{
 objc_setAssociatedObject(self, @"loadingView", loadingView, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
- (void)showLoadingInView:(UIView*)view{
 if (self.loadingView == nil) {
  self.loadingView = [[GQCircleLoadView alloc]init];
 }
 if (view) {
  [view addSubview:self.loadingView];
  self.loadingView.frame = view.bounds;
 }else{
  UIWindow *appKeyWindow = [UIApplication sharedApplication].keyWindow;
  [appKeyWindow addSubview:self.loadingView];
  self.loadingView.frame = appKeyWindow.bounds;
 }
}
- (void)hideLoad{
 [self.loadingView removeFromSuperview];
}
@end

接下来就是GQCircleLoadView继承UIView,里面通过drawRect画出圆圈,并且动画的实现

#import "GQCircleLoadView.h"
#define WINDOW_width [[UIScreen mainScreen] bounds].size.width
#define WINDOW_height [[UIScreen mainScreen] bounds].size.height
static NSInteger circleCount = 3;
static CGFloat cornerRadius = 10;
static CGFloat magin = 15;
@interface GQCircleLoadView()<CAAnimationDelegate>
@property (nonatomic, strong) NSMutableArray *layerArr;
@end

@implementation GQCircleLoadView
- (instancetype)initWithFrame:(CGRect)frame{
 if (self = [super initWithFrame:frame]) {
  self.backgroundColor = [UIColor clearColor];
 }
 return self;
}
// 画圆
- (void)drawCircles{
 for (NSInteger i = 0; i < circleCount; ++i) {
  CGFloat x = (WINDOW_width - (cornerRadius*2) * circleCount - magin * (circleCount-1)) / 2.0 + i * (cornerRadius*2 + magin) + cornerRadius;
  CGRect rect = CGRectMake(-cornerRadius, -cornerRadius , 2*cornerRadius, 2*cornerRadius);
  UIBezierPath *beizPath=[UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:cornerRadius];
  CAShapeLayer *layer=[CAShapeLayer layer];
  layer.path=beizPath.CGPath;
  layer.fillColor=[UIColor grayColor].CGColor;
  layer.position = CGPointMake(x, self.frame.size.height * 0.5);
  [self.layer addSublayer:layer];

  [self.layerArr addObject:layer];
 }

 [self drawAnimation:self.layerArr[0]];

 // 旋转(可打开试试效果)
// CABasicAnimation* rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
// rotationAnimation.toValue = [NSNumber numberWithFloat: - M_PI * 2.0 ];
// rotationAnimation.duration = 1;
// rotationAnimation.cumulative = YES;
// rotationAnimation.repeatCount = MAXFLOAT;
// [self.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];
}

// 动画实现
- (void)drawAnimation:(CALayer*)layer {
 CABasicAnimation *scaleUp = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
 scaleUp.fromValue = @1;
 scaleUp.toValue = @1.5;
 scaleUp.duration = 0.25;
 scaleUp.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

 CABasicAnimation *scaleDown = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
 scaleDown.beginTime = scaleUp.duration;
 scaleDown.fromValue = @1.5;
 scaleDown.toValue = @1;
 scaleDown.duration = 0.25;
 scaleDown.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

 CAAnimationGroup *group = [[CAAnimationGroup alloc] init];
 group.animations = @[scaleUp, scaleDown];
 group.repeatCount = 0;
 group.duration = scaleUp.duration + scaleDown.duration;
 group.delegate = self;
 [layer addAnimation:group forKey:@"groupAnimation"];

}
#pragma mark - CAAnimationDelegate
- (void)animationDidStart:(CAAnimation *)anim
{
 if ([anim isKindOfClass:CAAnimationGroup.class]) {
  CAAnimationGroup *animation = (CAAnimationGroup *)anim;

  [self.layerArr enumerateObjectsUsingBlock:^(CAShapeLayer *obj, NSUInteger idx, BOOL * _Nonnull stop) {

   CAAnimationGroup *a0 = (CAAnimationGroup *)[obj animationForKey:@"groupAnimation"];
   if (a0 && a0 == animation) {
    CAShapeLayer *nextlayer = self.layerArr[(idx+1)>=self.layerArr.count?0:(idx+1)];
    [self performSelector:@selector(drawAnimation:) withObject:nextlayer afterDelay:0.25];
    *stop = YES;
   }
  }];
 }
}
- (void)drawRect:(CGRect)rect{
 [super drawRect:rect];
 [self drawCircles];
}
- (NSMutableArray *)layerArr{
 if (_layerArr == nil) {
  _layerArr = [[NSMutableArray alloc] init];
 }
 return _layerArr;
}
@end

Demo就不上传了,总共四个文件代码已经全贴上了!

总结

以上就是这篇文章的全部内容了,有兴趣可以试试打开上面的旋转的动画代码,关闭旋转代码,进一步修改也可实现出QQ邮箱的下拉刷新效果,希望这篇文章的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

相关文章

  • iOS对象指针和基础数据类型的强转详解

    iOS对象指针和基础数据类型的强转详解

    最近在做一些小功能,忽然发现有的基础数据转换居然都忘记了。于是想着要赶紧整理下记下来!本文就是记录的一些内容,主要介绍了iOS中对象指针和基础数据类型的强转,有需要的朋友们可以参考借鉴,下面来一起学习学习吧。
    2016-11-11
  • Flutter使用push pop方法及路由进行导航详解

    Flutter使用push pop方法及路由进行导航详解

    这篇文章主要为大家介绍了Flutter使用push pop方法及路由进行导航详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • iOS 10新的通知机制中添加图片的方法详解

    iOS 10新的通知机制中添加图片的方法详解

    这篇文章主要介绍了iOS 10新的通知机制中添加图片的方法,文中介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-03-03
  • iOS开发之数字每隔3位用逗号分隔

    iOS开发之数字每隔3位用逗号分隔

    以前在做电商app时经常会针对稍大的金额展示出来,需要每隔千位添加逗号便于用户识别,下面通过本文给大家分享ios中数字每隔3位用逗号分隔的实例代码,需要的朋友参考下吧
    2017-09-09
  • iOS使用核心的50行代码撸一个路由组件

    iOS使用核心的50行代码撸一个路由组件

    使用组件化是为了解耦处理,多个模块之间通过协议进行交互。本文给大家介绍iOS使用核心的50行代码撸一个路由组件的相关知识,需要的朋友可以参考下
    2018-09-09
  • IOS 身份证校验详细介绍及示例代码

    IOS 身份证校验详细介绍及示例代码

    这篇文章主要介绍了IOS 身份证校验详细介绍及示例代码的相关资料,这里对身份校验比较详细,附有简单实例,需要的朋友可以参考下
    2017-01-01
  • 详解Swift model 解析的两种方法

    详解Swift model 解析的两种方法

    这篇文章主要介绍了详解Swift model 解析的两种方法的相关资料,希望通过本文大家能够掌握这里的两种实现方法,需要的朋友可以参考下
    2017-09-09
  • Swift实现iOS应用中短信验证码倒计时功能的实例分享

    Swift实现iOS应用中短信验证码倒计时功能的实例分享

    这篇文章主要介绍了Swift实现iOS应用中短信验证码倒计时功能的实例分享,开启和关闭倒计时功能的步骤实现比较关键,需要的朋友可以参考下
    2016-04-04
  • IOS 开发中发送e-mail的几种方法总结

    IOS 开发中发送e-mail的几种方法总结

    这篇文章主要介绍了IOS 开发中发送e-mail的几种方法总结的相关资料,需要的朋友可以参考下
    2017-03-03
  • IOS获取缓存文件的大小并清除缓存文件的方法

    IOS获取缓存文件的大小并清除缓存文件的方法

    今天通过本文给大家介绍的离线缓存的功能实现,主要分为缓存文件大小的获取、清除缓存文件的实现。本文给大家介绍的非常详细,具有一定的参考借鉴价值,感兴趣的朋友一起看看吧
    2016-10-10

最新评论