欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-19 18:50:22
先看下最后基本要实现的效果 总结一下自己的实现思路与所用到的类 1.这个肯定是要自定义的view类,起名为xdcolorcircle吧,最后用的时候达到这样的效...

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

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

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

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

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

上一篇:

下一篇: