Add Quartz Core framework

To use the Quartz Core framework, you need to add it to your project. Then the # import

Second, recognize layers

Those of you who know anything about Photoshop know the concept of layers, and the same is true here. In Photoshop an image must have at least one layer, one or more layers added together to form a bitmap. Here we have one or more layers stacked together to make up UIView (or its derived class) objects. Those of you who read my article on UIView might be wondering: Is UIView no different from layers? NO, there’s a difference, layers are elastic, and you can manipulate layers to make UIView have various effects, like 3d effects, deformations, etc.

To access a layer, you need to read the Layer property of UIview.

CALayer* layer = self.view.layer;  
Copy the code

All objects derived from UIView inherit this property, which means you can transform, scale, rotate, and even animate navigation bars, tables, text boxes, and many other types of view classes.

So again, this code up here we’re only reading one layer what if a UIView has multiple layers? It’s true that UIView only has one layer property, but the layer can be superimposed, the layer can be superimposed on top of the layer, so this layer is kind of a backplane, and we can overlay some transparent film on this floor, They add them together to form a composite image.

IOS development exchange technology group: 563513413, no matter you are big bull or small white are welcome to enter, share BAT, Ali interview questions, interview experience, discuss technology, we exchange learning and growth together!

Third, layer hierarchy

Layers have a number of generic methods and properties for manipulating sublayers and performing drawing operations. These methods allow you to overlay many individual layers together to draw a combined screen image.

A layer can have many sub-layers. When the screen is finally drawn, the sub-layers can be arranged and pinned together. This can be done by referring to layers in a racing game. A game might have several layers: one to draw the background, one to draw the characters, and one to draw the map display. You might have a special UIView class for each layer and a separate UIView class for integrating the game screen:

UIView* gameView = [[UIView alloc]initWithFrame:[[UIScreen mainScreen]applicationFrame] ]; UIView* backgroundView = [[UIView alloc]initWithFrame:[[UIScreen mainScreen]applicationFrame]]; UIView* roleView= [[UIView alloc]initWithFrame:CGRectMake(0.0, 0.0, 100.0, 200.0)]; UIView* mapView = [[UIView alloc]initWithFrame:CGRectMake(200.0, 0.0, 100.0, 100.0)]; // With the addSublayer method of the CALayer class, you can link all three UIView layers to the gameView object: CALayer* gameLayer = gameView.layer; [gameLayer addSublayer:backgroundView.layer]; [gameLayer addSublayer:roleView.layer]; [gameLayer addSublayer:mapView.layer];Copy the code

When the gameView object is displayed on the screen, the three layers are merged and drawn together. Each class draws its own layer, but when the game layer is displayed, all three layers are fused together.

GameView is not the only layer that can add sublayers. Sublayers can also add their own sublayers and build a complete layer hierarchy. For example, your game might add a layer to the mapView layer that displays a portion of the map, such as the remaining miles.

UILabel* lastDistance = [[UILabel alloc]initWithFrame:CGRectMake(0.0, 0.0, 20.0, 20.0) [mapView.layer addSublayer:lastDistance.layer];Copy the code

You can also adjust the position of a layer without changing its size by setting the layer’s Position property. This property accepts a CGPoint structure to position the layer offset on the screen. Unlike the frame property, the Position property specifies the focus of the layer, not the top left corner:

CGPoint lastDistancePosition = CGPointMake(100.0, 100.0);  
  lastDistance.layer.position = lastDistancePosition;  
Copy the code

Four, layout and display

In addition to adding sublayers, the CALayer class provides many different methods for inserting, adjusting, and removing sublayers.

When you add a sublayer with addSublayer, it is added to the top of the layer hierarchy, so it appears in front of all existing sublayers. With an alternative set of methods called insertSublayer, you can insert new views between existing layers.

With the atIndex argument, you can insert a layer at the specified subscript position:

[gamelayer insertSublayer:mapView.layer atIndex:1];  
Copy the code

To insert one layer above or below another, add the avove or below parameter:

[ gamelayer insertSublayer:mapView.layer below:backgroundView.layer];  
[ gamelayer insertSublayer:mapView.layer above:roleView.layer];  
Copy the code

To remove a layer from its parent layer, call the removeFromSuperlayer method on the child layer:

[ mapView.layer removeFromSuperlayer];  
Copy the code

To replace an existing sublayer with another layer, use the replaceSublayer method:

[ gamelayer replaceSublayer:backgroundView.layer with:newBackgroundView.layer ];  
Copy the code

To keep the sublayer in the layer stack but not visible when it is displayed, set the layer’s Hidden property. You can use the following code to toggle the map display without actually removing the layer:

- (void) Togglemap{ mapView.layer.hidden = (mapView.layer.hidden == NO)? YES:NO; }Copy the code

Five, the draw

When updating a layer, the changes are not immediately drawn on the screen. This allows you to secretly do a lot of writing to layers without showing them to the user until all the work is done. When the layer is ready to be redrawn, the layer’s setNeedsDisplay method is called:

[ gamelayer setNeedsDisplsy ];  
Copy the code

In some cases, you may simply not want to redraw part of the entire layer. Redrawing the entire screen would make the program inefficient. Using the setNeedsDisplayInRect method, you can redraw only the parts of the screen that need to be updated. This method takes a CGRect structure representing the update area as a parameter:

CGRect mapViewFrame = CGRectMake (150.0, 150,75.0, 75.0); [ gameLayer setNeedsDisplayInRect:mapViewFrame ];Copy the code

If you are drawing using the Core Graphics framework, you can draw directly within a Core Graphics context. This can be done using the renderInContext method:

CGContextRef myCGContext = UIGraphicsGetCurrentContext();  
[ gamelayer renderInContext:myCGContext ];  
Copy the code

Six, the transformation

To add a 3d transform or affineTransform to a layer, set the layer’s transform or affineTransform property, respectively.

Roleview. Layer. The transform = CATransform3DMakeScale (1.0, 1.0, 1.0); CGAffineTransform transform = CGAffineTransformMakeRotation (45.0); backgroundView.layer.affineTransform =transform ;Copy the code

Layer animation

Quartz Core is capable of much more than a simple palette layer. He can transform a 2D object into a jaw-dropping 3D texture, which is used to create NB transition animations.

I wrote a previous article about transitions, which is a way to transition between different UIView objects. You can use transitions directly on layers or sublayers. Animations can be created as CAtransition objects.

Layer transitions enhance the existing CATransition class and provide a way to add animations using the Animation engine of Quartz Core. This allows developers to take advantage of the 3d capabilities offered by Quartz Core without having to make major code changes. When a layer is animated, a CATransition or CAAnimation object is attached to the layer. The layer then calls Quartz Core, which branches out a new thread that handles all the graphics for the animation. Developers can upgrade an existing layer by adding desired animations in order. With the following example code, you can create a transition:

CATransition* animation = [[CATransition alloc]init]; Animation. Duration = 1.0; animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; animation.type = kCATransitionPush; animation.subtype = kCATransitionFromRight;Copy the code

Caveat: So far, the types of transitions apple allows users to create are extremely limited. The Quartz Core framework also supports quite a few other transitions internally, such as natural page-turning and zooming transitions, but is limited to Apple’s own apps. (Gross)

You can create an animation by creating a CABasicAnimation object. The following example creates an animation that rotates the layer a full 360 degrees:

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"]; Animation. ToValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation (3.1415, 0, 0, 1.0)]. Animation. Duration = 3.0; animation.cumulative =YES; animation.repeatCount=2;Copy the code

Once created, you can apply animations or transitions directly to a layer:

[mapView.layer addAnimation:animation forKey:@"animation"];  
Copy the code

Eight, layer transformation

The rendering capability of Quartz Core allows arbitrary manipulation of two-dimensional images as well as three-dimensional ones. An image can be rotated, scaled and distorted at any Angle on the X-Y-Z 3d axis. The CATransform3D family of functions is the force behind Apple’s Cover Flow technology and other aesthetic effects used on the iPhone. The iPhone supports zooming, rotation, affine, panning, and more.

Transformations are performed on separate layers, so multiple transformations can be performed simultaneously on a single layer surface. The Quartz Core framework uses CATransform3D objects to perform transformations. This object applies to the layer of the view and bends or otherwise manipulates the layer according to the desired 3D Settings. The application can still treat the object as two-dimensional, but when the object is presented to the user, it obeys any transformations already applied on top of the layer. The following example creates a transform to rotate a layer:

CATransform3D myTransform;  
myTransform = CATransform3DMakeRotation(angle,x,y,z);  
Copy the code

CATransform3DMakeRotation function creates a transformation on a graphics rotation, rotation Angle for radian Angle unit, axis x – y z. The values of x-y-z define the measurements along the axis in all directions (between -1 and +1). Assigning a value to an axis instructs the transformation to rotate about that axis. You can think of these values as straw sticks stuck into the image. If the stick is inserted along the X-axis, the image will rotate vertically around the stick. You can use different Angle values as axes to produce more complex rotations. But for most purposes, the values -1 and +1 will suffice.

To rotate a layer 45 degrees horizontally (vertically), use the following code:

MyTransform = CATransform3DMakeRotation (0.78, 1.0, 0.0, 0.0); //0.78 is an Angle of 45 degrees replaced by radiansCopy the code

To rotate the same Angle horizontally, you can specify a value for the Y-axis:

MyTransform = CATransform3DMakeRotation (0.78, 0.0, 1.0, 0.0);Copy the code

You can write a function of degrees in radians:

Double radians(float degrees){return (degrees*3.14159265)/180.0; }Copy the code

Call this function when you create:

MyTransform = CATransform3DMakeRotation (radians (45.0), 0.0, 1.0, 0.0);Copy the code

Once the transformation is created, it’s time to apply it to the layer you want to manipulate. The CALayer object provides a transform property that can be used to attach a transform to a layer. The layer will perform any transformation assigned to this property:

roleView.layer.transform = myTransform;  
Copy the code

When the object is displayed, it is displayed according to the transformation applied to it. In your code, the object will still be referred to as a two-dimensional object, but it will be rendered according to the transformation.