脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → IOS → ios 加载等待动画

iOS 实现简单的加载等待动画示例（思路与实现）

 更新时间：2017年05月13日 15:41:34   作者：夏点  
本篇文章主要介绍了iOS 实现简单的加载等待动画示例（思路与实现），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

先看下最后基本要实现的效果


总结一下自己的实现思路与所用到的类

1.这个肯定是要自定义的View类，起名为XDColorCircle吧，最后用的时候达到这样的效果

//创建XDColorCircle的实例化对象
 XDColorCircle *circle=[[XDColorCircle alloc]initWithFrame:CGRectMake(0 ,100,self.view.frame.size.width,200)];
//添加到视图上展示
 [self.view addSubview:circle];

2.然后就是在XDColorCircle里面代码思路

  1. 需要先有一个渐变的图层(渐变由白到靛)且图层需只显示一个圆圈形状
  2. 渐变图层用CAGradientLayer这个类绘制
  3. 为这个CAGradientLayer的mask赋值一个圆圈的图层让它只展示一个圆圈CAShapeLayer
  4. 为CAGradientLayer图层添加基础动画就用CABasicAnimation来实现图层的旋转
  5. 中间需要一个大Label但肯定这个Label不能绘制在这个CAGradientLayer所在的图层之上了，因这个图层设置mask了 怎么绘制都显示个圈 ╮(￣▽￣"")╭
  6. 所以最后确定了圈圈应该在另创建一个View上绘制然后与中间的Label一同做为XDColorCircle的子视图

3.思路捋顺代码就很方便

//先都写在这个构造方法里面吧
- (instancetype)initWithFrame:(CGRect)frame
{
  self = [super initWithFrame:frame];
  if (self) {
  }
  return self;
}

创建圈圈所在的View

    self.backgroundColor=[UIColor clearColor];
    UIView *circleView=[[UIView alloc]init];
    circleView.frame=CGRectMake(0, 0,frame.size.width,frame.size.height);
    circleView.backgroundColor=[UIColor blueColor];
    [self addSubview: circleView];

创建渐变图层并添加到圈圈视图

    CAGradientLayer * gradientLayer = [CAGradientLayer layer];
    gradientLayer.colors = @[(__bridge id)[UIColor whiteColor].CGColor,(__bridge id)[UIColor cyanColor].CGColor];
    gradientLayer.locations = @[@0.2,@1.0];
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1.0, 0);
    gradientLayer.frame =CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
    [circleView.layer insertSublayer:_gradientLayer atIndex:0];

添加mask属性只让图层只显示一个圈圈

    CAShapeLayer *layer=[[CAShapeLayer alloc]init];
    CGMutablePathRef pathRef=CGPathCreateMutable();
    CGPathAddRelativeArc(pathRef, nil,frame.size.width/2.0,frame.size.height/2.0,frame.size.width<frame.size.height?frame.size.width/2.0-5:frame.size.height/2.0-5,0, 2*M_PI);
    layer.path=pathRef;
    layer.lineWidth=5;
    layer.fillColor=[UIColor clearColor].CGColor;
    layer.strokeColor=[UIColor blackColor].CGColor;
    CGPathRelease(pathRef);
    circleView.layer.mask=layer;

让圈圈转起来添加动画

    CABasicAnimation *animation=[CABasicAnimation     animationWithKeyPath:@"transform.rotation.z"]; ;
    // 设定动画选项
    animation.duration = 1;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.repeatCount =HUGE_VALF;
    // 设定旋转角度
    animation.fromValue = [NSNumber numberWithFloat:0.0]; // 起始角度
    animation.toValue = [NSNumber numberWithFloat:2 * M_PI]; // 终止角度
    [circleView.layer addAnimation:animation forKey:@"rotate-layer"];

添加中间的大文字Label

    UILabel *label=[[UILabel alloc]init];
    label.text=@"测试中";
    label.font=[UIFont systemFontOfSize:32];
    label.textAlignment=NSTextAlignmentCenter;
    label.frame=CGRectMake(0, 0,frame.size.width,frame.size.height);
    label.backgroundColor=[UIColor clearColor];
    [self addSubview:label];

4.然后在controller里面使用

//创建XDColorCircle的实例化对象
 XDColorCircle *circle=[[XDColorCircle alloc]initWithFrame:CGRectMake(0 ,100,self.view.frame.size.width,200)];
//添加到视图上展示
 [self.view addSubview:circle];

只是个简单的动画实现小例子，可以看出活用CAShapeLayer和CABasicAnimation可以做出更炫的动画效果

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

您可能感兴趣的文章:

相关文章

  • iOS使用视听媒体框架AVFoundation实现照片拍摄

    iOS使用视听媒体框架AVFoundation实现照片拍摄

    这篇文章主要为大家详细介绍了iOS使用视听媒体框架AVFoundation实现照片拍摄，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-04-04
  • iOS UISegmentControl实现自定义分栏效果

    iOS UISegmentControl实现自定义分栏效果

    这篇文章主要为大家详细介绍了iOS UISegmentControl实现自定义分栏效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • iOS整个APP实现灰色主题的示例代码

    iOS整个APP实现灰色主题的示例代码

    这篇文章主要介绍了iOS整个APP实现灰色主题的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • iOS开发之UITableView详解

    iOS开发之UITableView详解

    在iOS开发中UITableView可以说是使用最广泛的控件，我们平时使用的软件中到处都可以看到它的影子，类似于微信、QQ、新浪微博等软件基本上随处都是UITableView。当然它的广泛使用自然离不开它强大的功能，今天这篇文章将针对UITableView重点展开讨论
    2016-04-04
  • IOS 常见的循环引用总结

    IOS 常见的循环引用总结

    这篇文章主要介绍了IOS 常见的循环引用总结的相关资料,循环引用，指的是多个对象相互引用时，使得引用形成一个环形，导致外部无法真正是否掉这块环形内存。其实有点类似死锁，需要的朋友可以参考下
    2017-03-03
  • fastlane自动化打包iOS APP过程示例

    fastlane自动化打包iOS APP过程示例

    这篇文章主要为大家介绍了fastlane自动化打包iOS APP的过程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • iOS如何使用自己添加的字体库

    iOS如何使用自己添加的字体库

    这篇文章主要为大家介绍了iOS如何使用自己添加的字体库详细过程，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • iOS开发之视图切换

    iOS开发之视图切换

    在iOS开发中视图的切换是很频繁的，独立的视图应用在实际开发过程中并不常见，除非你的应用足够简单。在iOS开发中常用的视图切换有三种，今天我们将一一介绍,希望大家能够喜欢。
    2016-04-04
  • iOS小组件开发之WidgetKit功能讲解

    iOS小组件开发之WidgetKit功能讲解

    这篇文章主要为大家介绍了iOS小组件开发WidgetKit功能讲解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • IOS 实现3D 浮动效果动画

    IOS 实现3D 浮动效果动画

    这篇文章主要介绍了IOS 实现3D 浮动效果动画的相关资料,需要的朋友可以参考下
    2016-09-09

最新评论