Create a simple animation (a)---the General HUD

First of all, I am dealing with the idea of animation: (Novice on the road, the old driver light spray, if there is a better way to implement please God teach grateful)

# # #. Analyze animation composition

# #. If you are moving a picture, consider using the basicanimation or keyframeanimation implementation, and then use the easing function if necessary.

# # #. More complex animations consider whether to use a uibezierpath frame to draw

Today we imitate to do a scene toggle load wait animation, such as this

Let's analyze the composition of this picture.

# # #. A gray background.

# #. A white ring.

# # #. A closed arc (the white part)

Does not seem to be a simple displacement animation, we use Uibezierpath plus cadisplaylink frame one frame to try to paint

A gray background,

This is relatively simple, we create a uiview subclass directly, the background color is set to gray

The White ring,

You can draw a circle directly with Uibezierpath, note the width of the adjustment line so easy

    // Add an outer circle    Uibezierpath *apath = [Uibezierpath bezierpath];     5 ;    [Apath addarcwithcenter:cgpointmakeradius: startangle:0  Endangle:2 * m_pi clockwise:yes];    [Apath stroke];

A closed arc,

As with Uibezierpath, set the center of the circle to draw an arc and then close the path, _count is a variable set, with the controller in the timer control to achieve the effect of animation

//draw the inner circle first//Set LinesPath.linewidth =5; Path.linecapstyle=Kcglinecapround; Path.linejoinstyle=Kcglinejoinround; //Set Center Point[Path Movetopoint:cgpointmake (_mywidth/2, _myheight/2)]; //set an inner tangent arc[Path Addarcwithcenter:cgpointmake (_mywidth/2, _myheight/2) Radius: -STARTANGLE:M_PI *3/2ENDANGLE:M_PI *3/2+2* M_PI/ -*_count Clockwise:yes]; //Line Closure[path Closepath]; [path fill];

Attention should be paid to adjusting the line width of the outer circle and inner closed arc

Then create a timer in the controller and change the value of the _count to achieve the effect of the animation

On the code:

First create a UIView subclass,

#import <UIKit/UIKit.h>@interface  myview:uiview@property (nonatomic, assign) cgfloat   mywidth; @property (nonatomic, assign) cgfloat   myheight; @property (nonatomic, assign) Nsinteger count; @end

Add a pattern to the DrawRect

#import "MyView.h"@implementationMyView- (ID) initWithFrame: (CGRect) frame {cgrect MyFrame= CGRectMake (frame.origin.x,0, Frame.size.width, frame.size.height); Self=[Super Initwithframe:myframe]; if(self) {self.mywidth=Frame.size.width; Self.myheight=Frame.size.height; }        returnSelf ;}- (void) DrawRect: (cgrect) rect {//Drawing Code//Set Line ColorUicolor *color =[Uicolor Whitecolor]; [ColorSet]; //Draw Inner CircleUibezierpath *path =[Uibezierpath Bezierpath]; //Set LinesPath.linewidth =5; Path.linecapstyle=Kcglinecapround; Path.linejoinstyle=Kcglinejoinround; //Set Center Point[Path Movetopoint:cgpointmake (_mywidth/2, _myheight/2)]; //set an inner tangent arc[Path Addarcwithcenter:cgpointmake (_mywidth/2, _myheight/2) Radius: -STARTANGLE:M_PI *3/2Endangle:m_pi*3/2+2* M_PI/ -*_count Clockwise:yes]; //Line Closure[path Closepath];        [Path fill]; //Add an outer circleUibezierpath *apath =[Uibezierpath Bezierpath]; Apath.linewidth=5; [Apath Addarcwithcenter:cgpointmake ( -, -) Radius: +startangle:0Endangle:2*M_pi Clockwise:yes];    [Apath stroke]; }@end

Called in the Controller

#import "ViewController.h"#import "MyView.h"@interfaceViewcontroller () @property (nonatomic, strong) MyView*MyView, @property (nonatomic, strong) Cadisplaylink*DisplayLink; @property (nonatomic, assign) Nsinteger count;@end@implementationViewcontroller- (void) viewdidload {[Super viewdidload]; //Create a timer_displaylink =[Cadisplaylink displaylinkwithtarget:self selector: @selector (Counton)]; _displaylink.paused=YES;        [_displaylink Addtorunloop:[nsrunloop Currentrunloop] formode:nsrunloopcommonmodes]; //Create a custom view instance_myview = [[MyView alloc] Initwithframe:cgrectmake ( Max,0, -, -)]; _myview.backgroundcolor=[Uicolor Graycolor]; _myview.count=1;        [Self.view Addsubview:_myview]; //Here you can add extra animations to set the way the HUD appears[UIView animatewithduration:0.5animations:^{_myview.frame= CGRectMake ( Max, Max, -, -); _displaylink.paused=NO;        }]; }//timer events, modifying animation parameters- (void) Counton {_count++; _myview.count=_count; if(_count >290) {[_displaylink invalidate];    [_myview Removefromsuperview]; }        //Redraw[_myview setneedsdisplay];}

Create a simple animation (a)---the General HUD