After several experiments, I found that if the articles shared can form a series, the effect will be very good. At the same time, I can also gain a lot, I can review the whole block, and I can also help myself to learn knowledge in a more in-depth block. It is very important to comb lines and organize knowledge system.

So this time I’m going to share with you the animation part of iOS. IOS animation rendering is awesome, lol. In fact, it was the animation of iOS and the gesture processing of iOS that deeply moved me, so THAT I, a middle-aged man like me, started to work on iOS. La la la la la

Let’s begin our first article.

1. The final effect and mind map

The effect achieved. Accidentally revealing the time of writing the article. -_ – + + +

Realization of the steps mind map:

2. CALayer

Actually, today’s share is about CALayer. Because all the animation is done on CALayer.

• In iOS, everything you can see and touch is basically a UIView, like a button, a text label, a text input field, an icon, and so on, all of these are UIViews
• The only reason UIView stays on screen is because of one layer inside it
• When a UIView object is created, a layer (CALayer object) is automatically created inside the UIView, which is accessible through the Layer property of UIView
  
  @property(nonatomic,readonly,retain) CALayer *layer;
• When the UIView needs to be displayed on the screen, it calls the drawRect: method and draws everything on its own layer. When the drawing is done, the system copies the layers onto the screen and the UIView is displayed
• In other words, UIView doesn’t display itself, it’s the layers inside it that do

2.1 Basic attributes of CALayer

Attribute types	The attribute name	use
@property CGFloat	borderWidth;	Edge width
@property CGColorRef	borderColor;	The color of the edge
@property CGColorRef	backgroundColor;	The background color
@property float	opacity;	transparency
@property CGColorRef	shadowColor;	Shadow color
@property float	shadowOpacity;	Shadow opacity, set to 0 to 1.
@property CGSize	shadowOffset;	Shadow offset
@property CGFloat	shadowRadius;	The opacity of the shadow
@property(strong) id	contents;	The content. You can set it to a picture, but you need to bridge it.
@property CGFloat	cornerRadius;	Rounded corners
@property CGRect	bounds;	The size of the Layer
@property CGPoint	position;	By default, it’s the center of UIView
@property CGPoint	anchorPoint;	The position of the anchor
@property CATransform3D	transform;	It’s a matrix that you use to do the deformation. You can think of it as a structure.
@property BOOL	masksToBounds;	Cut the excess part

• When setting the shadow, the shadow color + the shadow offset (or the shadow path) + the shadow transparency are both necessary.
• Shadow blur, if not set, defaults to 3.0000.
• Shadow path:
  • Once the shadow path is set, it is no longer necessary to set the shadow offset.
  • Once the shadow path is set, it cannot be set againmasksToBounds. Because more than that will be cut.
    
    Take the following figure as an example:

UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)]; [self.view addSubview:imageView]; // Set the background color. Pay attention to the interchange between UIColor and CGColor imageView. Layer. The backgroundColor = [UIColor grayColor]. CGColor; / / generates a path UIBezierPath * path = [UIBezierPath bezierPathWithRect: CGRectMake (-, 10-10, imageView.bounds.size.width + 20, imageView.bounds.size.height + 20)]; / / set the shadow path imageView. Layer. ShadowPath = path. CGPath; / / set the shadow color imageView. Layer. ShadowColor = [UIColor lightGrayColor]. CGColor; / / set the shadow transparency imageView. Layer. ShadowOpacity = 0.5;Copy the code

2.2 Manually Creating a CALayer

• Create a CALayer
• When you set the frame, the internal position changes the bounds.size.
• Setting position is just like setting center in UIView.
• Remember to add to parent CALayer.

CALayer *layer = [[CALayer alloc] init]; / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- set the position and size -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / a: directly set frame / / layer frame = CGRectMake (50, 50, 200, 200); Layer. bounds = CGRectMake(0, 0, 100, 100); // Set the position (by default, position refers to center). layer.position = CGPointMake(150, 150); / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- set the position and size -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - layer. BackgroundColor = [UIColor redColor]. CGColor; Layer. The opacity = 0.7; [self.view.layer addSublayer:layer]; }Copy the code

2.3 the transform

From here on out, our coordinate axes will become xyz three axes, because the pattern will also become three-dimensional.

• Connect a line from the center point of the layer to the given coordinate point, and then rotate with this line as the central axis

  self.myLayer.transform = CATransform3DMakeRotation(M_PI_4, 10, 20, 30);Copy the code

  What this code means is to draw a line from {0,0,0} to {10,20,30}. The graph rotates M_PI_4 degrees around this line.

2.3.1 Modify Perspective

In the real world, when the object from us, due to the perspective look smaller, theoretically from our view than near the point of view and with short, but it does not happen, and our current perspective is equidistant, namely in the 3 d transformation remain parallel, similar to the aforementioned affine transformation.

“To make some corrections, we need to introduce a projection transform (also known as the Z-transform) to make some changes to the transformation matrix other than the rotation. Core Animation does not provide us with a function to set the perspective transform, so we need to manually change the matrix values. Fortunately, it is very simple: CATransform3D perspective is controlled by a very simple element in a matrix: M34. The M34 is used to scale the X and Y values to calculate how far away you want to be from the perspective.”

Excerpt From: Zhong. “Advanced Skills for Ios Core Animation.” iBooks.

• Modify m34 of transform to achieve this effect
• The transform can be viewed as a structure, so you need to pass an intermediate value to modify it.
• The default value of m34 is 0. You can set m34 to -1.0 /dTo apply perspective
• dIt represents the imaginary distance between the camera and the screen, in pixels, so how do you calculate that distance? You don’t really need it, you just have to make an estimate.”
• “Because the point-of-view camera doesn’t actually exist, it’s free to decide where it should be based on what appears on the screen. Usually 500 to 1,000 is good.”

Excerpt From: Zhong. “Advanced Skills for Ios Core Animation.” iBooks.

Struct CATransform3D{CGFloat m11(x zoom), m12(y shear), m13(rotation), m14(); CGFloat m21(x shear), m22(y zoom), m23, m24; CGFloat m31(rotation), m32, m33, m34(Perspective effect, need rotation Angle to see effect); M41 (x translation), m42(y translation), m43(z translation), m44; }; struct CGAffineTransform { CGFloat a, b, c, d; CGFloat tx, ty; };Copy the code

CATransform3D transform = CATransform3DIdentity; Transform. m34 = -1.0/800; // transform = CATransform3DRotate(transform, -m_PI_4, 0, 1, 0); imageView.layer.transform = transform;Copy the code

2.3.2 zoom

// Transform = CATransform3DMakeScale(<#CGFloat sx#>, <#CGFloat sy#>, <#CGFloat sz#>)/ / way 2: transform = CATransform3DScale (imageView. Layer. The transform, <#CGFloat sx#>, <#CGFloat sy#>, <#CGFloat sz#>)Copy the code

2.4 position and anchorPoint for important attributes

• By default, position is the center of UIView
• Position determines the position of the layer on the parent.
• But anchorPoint determines the position in itself.
• The value of anchorPoint must be 0 or 1. So it’s a percentage.

Implicit animation

• Some animation is automatically generated by default when some properties of a non-root Layer are modified
• Implicit animation exists for all non-root Layer, that is, manually created CALayer objects
• All the notes say yesAnimatable, this property has an implicit animation effect.

3.1 Several common Animatable Properties:

• Bounds: Set the width and height of the CALayer. Modifying this property produces a scaling animation
• BackgroundColor: used to set the backgroundColor of CALayer. Changing this property produces a gradient animation of the background color
• Position: Used to set the position of CALayer. Modifying this property produces a pan animation

3.2 Turn off implicit animation

• You can turn off the default implicit animation effects through animation transactions (CATransaction)
• Steps to turn off or modify implicit animation:
  • Turn on animated things
  • Close animation effects or modify animation events
  • Set the action after animation (optional)
  • Modify the properties
    • submit

      // Enable [CATransaction begin]; // Close the animation [CATransaction]setDisableActions:YES]; / / modify attributes self. Myview. Layer. The position = CGPointMake (10, 10); // Commit [CATransaction commit];Copy the code

Honey, I was wrong. Write here to find already hot yao long hot yao long, and then write down this article should no one see.

So, so… Change your mind and turn this article into the next episode. Ha ha ~ so happy to hit their own face ~

So, prove a point. Plans are just for planning, set a goal, can achieve it again. Ha ha ~