Details about CALayer 3 and calayer

Details about CALayer 3 and calayer
CALayer3-layer attributesContents

• 1. Implicit animation attributes
• Ii. position and anchorPoint

Back to Top 1. Implicit animation attributes

* As mentioned above, each UIView is associated with a CALayer by default. We can call this Layer as the Root Layer ). All non-Root layers, that is, manually created CALayer objects, have implicit animations.

* When some attributes of a non-Root Layer are modified, some animation effects are automatically generated by default. These attributes are called Animatable Properties ).

* List several common Animatable Properties:

• Bounds: used to set the width and height of CALayer. Modifying this attribute will produce a scaling animation.

• BackgroundColor: used to set the background color of CALayer. Modifying this attribute will produce a gradient animation of the background color.
• Position: used to set the location of CALayer. Modifying this attribute produces a translation animation.

For example, if the position of CALayer is (100,100) at the beginning and is modified to (200,200) at a certain time point, then the whole CALayer will) this position is translated to (200,200)

* You can also query all the Animatable Properties in the official documentation.

1. Click Window-> Organizer

 

2. Enter "animatable" in the search box.

 

Back to Top 2, position, and anchorPoint

* The position and anchorPoint attributes are of the CGPoint type.

* Position can be used to set the position of CALayer in the parent layer. It is based on the coordinate origin (0, 0) in the upper left corner of the parent layer)

* AnchorPoint is called a "positioning point", which determines the position indicated by the position attribute on CALayer. The value range of x and y is 0 to 0 ~ 1. The default value is (0.5, 0.5)

1. Create a CALayer and add it to the view layer of the controller.

1 CALayer * myLayer = [CALayer layer]; 2 // set the layer width and height (100x100) 3 myLayer. bounds = CGRectMake (0, 0,100,100); 4 // set the layer position 5 myLayer. position = CGPointMake (100,100); 6 // set the background color of the layer: Red 7 myLayer. backgroundColor = [UIColor redColor]. CGColor; 8 9 // Add the myLayer to the view layer of the controller 10 [self. view. layer addSublayer: myLayer];

Row 5th sets the position of myLayer to (100,100), and because anchorPoint is (0.5, 0.5) by default, the final effect is: the midpoint of myLayer will be in the parent layer (100,100) location

Note that the Blue Line is added by myself for your convenience. It is not the default display effect. The width of the two blue lines is 100.

 

2. If you change anchorPoint to (0, 0), the upper left corner of myLayer will be at (100,100 ).

1 myLayer.anchorPoint = CGPointMake(0, 0);

 

3. If you change anchorPoint to (1, 1), the lower right corner of myLayer will be at (100,100 ).

1 myLayer.anchorPoint = CGPointMake(1, 1);

 

 

4. Change anchorPoint to (0, 1), and the lower left corner of myLayer will be at (100,100 ).

1 myLayer.anchorPoint = CGPointMake(0, 1);

I think you should have understood the purpose of anchorPoint. It determines which point on CALayer will be at the position specified. The value range of x and y is 0 to 0 ~ 1. The default value is (0.5, 0.5). Therefore, by default, the midpoint of CALayer is at the position specified by position. When anchorPoint is another value, and so on.