iOS利用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使用xib手动实现动画效果的方法