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可以做出更炫的动画效果

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

(0)

相关推荐

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

    首先来看看效果图 实现过程如下 控制器调用就一句代码: [self showLoadingInView:self.view]; 方便控制器如此调用,就要为控制器添加一个分类 .h文件 #import <UIKit/UIKit.h> #import "GQCircleLoadView.h" @interface UIViewController (GQCircleLoad) //显示动画 - (void)showLoadingInView:(UIView*)view; //隐

  • iOS动画解析之圆球加载动画XLBallLoading的实现

    前言 当网页的页面大小较大,用户加载可能需要较长的时间,在这些情况下,我们一般会用到(加载)loading动画,提示于用户页面在加载中,本文将详细给大家介绍关于iOS圆球加载动画XLBallLoading实现的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.显示效果 二.原理分析 1.拆解动画 从效果图来看,动画可拆解成两部分:放大动画.位移动画 放大动画 比较简单,这里主要来分析一下位移动画 (1).先去掉缩放效果: 屏蔽放大效果 (2).去掉其中的一个圆球 现

  • iOS 进度条、加载、安装动画的简单实现

    首先看一下效果图: 下面贴上代码: 控制器ViewController: #import <UIKit/UIKit.h> @interface ViewController : UIViewController @end /*** ---------------分割线--------------- ***/ #import "ViewController.h" #import "HWWaveView.h" #import "HWCircleVi

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

    先看下最后基本要实现的效果 总结一下自己的实现思路与所用到的类 1.这个肯定是要自定义的View类,起名为XDColorCircle吧,最后用的时候达到这样的效果 //创建XDColorCircle的实例化对象 XDColorCircle *circle=[[XDColorCircle alloc]initWithFrame:CGRectMake(0 ,100,self.view.frame.size.width,200)]; //添加到视图上展示 [self.view addSubview:c

  • jquery实现加载等待效果示例

    复制代码 代码如下: var dates = this.options.form.getWidgetByName("dates").getValue(); $.ajax({ url: "http://127.0.0.1:9009/Brilliantzz/service/snproduct.do", data:dates, beforeSend:function() { var h = document.body.clientHeight; $("<d

  • Android实现仿iOS菊花加载圈动画效果

    常见的实现方式 切图,做旋转动画 自定义View,绘制效果 gif图 1.切图会增加体积,但相对简单,不过在换肤的场景下,会使用不同颜色,需要准备多张图,不够灵活. 2.由于自定义的好处,不同颜色只需要提供自定义属性,换肤时切换属性设置即可,比较灵活. 3.gif图普遍比较大,而且加载gif没有原生支持,需要引入第三方库,而且消耗内存比较大,不推荐. 效果图: 完整代码 自定义属性: <?xml version="1.0" encoding="utf-8"?&

  • JS实现的自定义显示加载等待图片插件(loading.gif)

    本文实例讲述了JS实现的自定义显示加载等待图片插件.分享给大家供大家参考,具体如下: 在工作中遇到了一个问题 -- 某个业务流程分为几个阶段,每个阶段如果在数据没有显示出来之前就要显示加载图片loading.gif文件,如果有数据了就消失.为此,自己写了一个方法,方便整个工程使用. <button onclick="show()">show</button> <button onclick="hide()">hide</bu

  • Android使用glide加载gif动画设置播放次数

    在使用glide加载gif动画,有时需要设置播放的次数,然后播放玩一次或者几次之后,需要在播放完做一些其他的操作,直接看代码: Glide.with(this) .load(R.drawable.xiaoguo) .diskCacheStrategy(DiskCacheStrategy.SOURCE) .listener(new RequestListener<Integer, GlideDrawable>() { @Override public boolean onException(Ex

  • Python3实现的画图及加载图片动画效果示例

    本文实例讲述了Python3实现的画图及加载图片动画效果.分享给大家供大家参考,具体如下: #__*__coding:utf-8__*__ #python3 import time from tkinter import * def moveImage(event):#图片logo.gif的移动要绑定的函数 if event.keysym=='Up': canvas.move(1,0,-3)#移动ID为1的事物,使得横坐标加0,纵坐标减3 elif event.keysym=='Down': c

  • js+HTML5 canvas 实现简单的加载条(进度条)功能示例

    本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>www.jb51.net canvas实现加载条动画</title> </head> <body> <canv

  • Android 开发使用PopupWindow实现加载等待界面功能示例

    本文实例讲述了Android 开发使用PopupWindow实现加载等待界面功能.分享给大家供大家参考,具体如下: 实现加载等待界面我用了两种方式,一种是用PopupWindow实现,另一种便是用Activity实现.用Activity实现方法请见我的另一篇博客: Android 使用Activity实现加载等待界面 首先看效果: 用PopupWindow实现此功能还是比较简单的,首先我们写一个布局,只有一个登录按钮,用于触发等待界面: <?xml version="1.0" e

  • Android实现简单的加载进度条

    本文实例为大家分享了Android实现简单的加载进度条的具体代码,供大家参考,具体内容如下 1.效果图 2.自定义progressBar package com.example.myapplication7; import android.animation.ValueAnimator; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; im

随机推荐