IOS implements simple loading, waiting for animation (ideas and implementations)

First look at the final realization of the basic effect
IOS implements simple loading, waiting for animation (ideas and implementations)
loads animation.Gif
Sum up your own implementation ideas and the classes you use

1., this is certainly to customize the View class, named XDColorCircle bar, and finally used to achieve such an effect

XDColorCircle / / create the instantiated object XDColorCircle *circle=[[XDColorCircle alloc]initWithFrame:CGRectMake (0, 100, self.view.frame.size.width, 200]); / / add to the view display of [self.view addSubview:circle];

2. and then in the XDColorCircle code thinking

  • You need to have a gradient layer first (from white to indigo), and the layer needs to show only a circle shape
  • The gradient layer is drawn with the CAGradientLayer class
  • Assign a circle to the CAGradientLayer’s mask so that it shows only one circle, CAShapeLayer
  • To add basic animation to the CAGradientLayer layer, use CABasicAnimation to rotate the layer
  • Needs a big Label but certainly this Label cannot draw on the CAGradientLayer layer, the layer set mask how to draw a circle, are displayed (~ ~ “at this”)
  • So, finally, the loop should be plotted on another View, and then done with the middle Label as a child view of the XDColorCircle

3., the idea of smoothing the code is very convenient

/ / the first in the written inside the constructor. - (instancetype) initWithFrame: (CGRect frame) {self = [super initWithFrame:frame]; if return self (self) {}};

Create the View where the circle is located

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

Create a gradient layer and add it to the circle view

CAGradientLayer * gradientLayer layer] = [CAGradientLayer; 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); gradientLayer.frame =CGRectMake (0, 0, self.frame.size.width, self.frame.size.height); [circleView.layer insertSublayer:_gradientLayer atIndex:0];

Add the mask property so that the layer shows only one circle

CAShapeLayer *layer=[[CAShapeLayer alloc]init] (pathRef=CGPathCreateMutable); CGMutablePathRef; 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);

Turn the circle up and add animation

CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@ "transform.rotation.z"]; / / set; animation options animation.duration = 1; animation.removedOnCompletion = NO; animation.fillMode = kCAFillModeForwards; animation.repeatCount = HUGE_VALF; animation.fromValue = [NSNumber / / set rotation angle numberWithFloat:0.0]; / / animation.toValue = numberWithFloat:2 * [NSNumber starting point M_PI]; / / [circleView.layer addAnimation:animation forKey:@ end angle "rotate-layer"];

Add the big text Label in the middle

UILabel *label=[[UILabel alloc]init]; label.text=@ "test"; 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. and then use it in controller

XDColorCircle / / create the instantiated object XDColorCircle *circle=[[XDColorCircle alloc]initWithFrame:CGRectMake (0, 100, self.view.frame.size.width, 200]); / / add to the view display of [self.view addSubview:circle];
IOS implements simple loading, waiting for animation (ideas and implementations)
effect diagram.Png
# is just a simple animation to achieve a small example, can be seen using CAShapeLayer and CABasicAnimation can make more dazzling animation