Swift implements a simple loading animation, as well as an explanation of the animation

I. Creation of group animations

Start by creating a group animation, which is the animation of the change in size and transparency.

//Size Change         LetScaleanimation = Cakeyframeanimation (keypath:"Transform.scale") Scaleanimation.keytimes = [0,0.5,1] Scaleanimation.values = [1,0.4,1] Scaleanimation.duration = Duration//Transparency Changes         LetOpacityanimaton = Cakeyframeanimation (keypath:"Opacity")//This property is an array that specifies the time of each sub-path. Opacityanimaton.keytimes = [0,0.5,1]The //values property indicates the key frame point throughout the animation, and it is important to note that the starting point must be the first value of values. Opacityanimaton.values = [1,0.3,1] Opacityanimaton.duration = Duration//Group animation         LetAnimation = Caanimationgroup ()//Add animations of change in size and transparency to group animationsAnimation.animations = [Scaleanimation, Opacityanimaton]//transition effect of animationsAnimation.timingfunction = Camediatimingfunction (name:kcamediatimingfunctionlinear)//Duration of animationanimation.duration = Duration//Set the number of repetitions, huge can be seen as infinity, play the effect of looping animationAnimation.repeatcount = HUGE//Run once to remove the animationAnimation.removedoncompletion =false

Note that the above is the animation.timingFunction animation of the transition effect, there are some of these, you can choose according to their own needs
1. kCAMediaTimingFunctionLinear //Linear
2. kCAMediaTimingFunctionEaseIn //Fade in
3. kCAMediaTimingFunctionEaseOut //Fade Out
4. kCAMediaTimingFunctionEaseInEaseOut //fade in/Fade out
5. kCAMediaTimingFunctionDefault //default

Two. Create a circular layer

 //Draw circles  for  var i = 0 ; I < 8 ; i++ {let circle  = creatcircle (angle : Cgflo At (M_pi_4 * Double (i)), size : Circlesize, Origin:cgpoint (                x:x, y:y + 50 ), containersize: size , color : color ) Animation.begin  Time = BeginTime + begintimes[i] circle . Addanimation (animation, Forkey:  "animation" ) Layer.addsublayer (circle )}
     

This is the creation of eight small circles, the group animation to the eight circle, and added to the layer on this view, the creatCircle creation of this method is as follows

Func Creatcircle (#Angle: CGFloat,size: CGFloat, Origin:cgpoint, Containersize:cgsize,Color: Uicolor), Calayer {Let radius = containersize.width/2LetCircle= Createlayerwith (size: Cgsize (width:size, Height:size),Color:Color) Let frame = CGRect (x:origin.x + radius * (Cos(Angle) +1) -size/2, Y:ORIGIN.Y + radius * (Sin(Angle) +1) -size/2, Width:size, Height:size)Circle. frame = Framereturn Circle}

Above,,,, are angle size origin containerSize color All parameters passed in, -> CALayer this represents the return type in swift, where the return type is CALayer , unlike the return type in OC, written in front - (CALayer *) ... of the method
func creatCircle(# angle: CGFloat,in this case # , it means to add "#" before the parameter name of the function (or method), so that the parameter has the same local parameter name and external parameter name. (Note: In the method, the second and subsequent parameters, the default is the external parameter name consistent with the internal parameters, only the first parameter is not, you can use the "#" symbol to force the first parameter to add a local parameter name consistent with the external parameter name, but is not recommended.) ）

Three. Create Cashapelayer

This is the createLayerWith method above, as follows

Func Createlayerwith (# size:cgsize, Color:uicolor), Calayer {//Create Cashapelayer, if the cashapelayer is unfamiliar, brief introduction under CashapelayerLet Layer:cashapelayer = Cashapelayer ()//Create Bézier curve path (Cashapelayer depends on this path to render)        varPath:uibezierpath = Uibezierpath ()//addarcwithcenter, as the name implies, is based on the center point of the Circle (the OC syntax of the naming superiority and reflected 0.0), these parameters        /** Center:cgpoint Center point radius:cgfloat radius startangle:cgfloat start of radians endangle:cgfloat end Radian Clockwise:bool Painting Direction true: Clockwise false: Counterclockwise */Path.addarcwithcenter (Cgpoint (X:size.width/2, Y:size.height/2), Radius:size.width/2, StartAngle:0, Endangle:cgfloat (2* m_pi), clockwise:false);//Line width, if the circle fills the words can also not setLayer.linewidth =2        //Fill color, here is the color of the circleLayer.fillcolor = color. Cgcolor//Layer background colorLayer.backgroundcolor = Nil//Set Bezier path to layer's render pathLayer.path = path. CgpathreturnLayer }

CAShapeLayeris a layer subclass that is drawn by vector graphics instead bitmap of drawing. You specify properties such as color and lineweight to define the CGPath shapes you want to draw, and CAShapeLayer then render them automatically. Of course, you can also use Core Graphics direct to the original CALyer content to draw a path, compared to straight down, using the CAShapeLayer following advantages:

1. Rendering is fast. CAShapeLayerwith hardware acceleration, it's much faster to draw the same graphic Core Graphics .
2. Efficient use of memory. One CAShapeLayer does not need to create a hosted graphic like normal Calayer ( CALyer the contents property, if you want to assign a value to contents is layer.contents = (__bridge id)image.CGImage , so take up memory), so no matter how big, will not occupy too much memory.
3. is not clipped by the layer boundary. One CAShapeLayer can be drawn outside the bounds. Your layer path will not be clipped as normal as it is used Core Graphics CALayer .
4. does not appear pixelated. When you CAShapeLaye do a 3D transformation for R, it doesn't become pixelated like a normal layer with a homestay map.

Here, we can see the effect of the operation, as follows

Swift implements a simple loading animation, as well as an explanation of the animation