Introduction to the

  • It is a very powerful set of animation processing apis that can be used to produce stunning animation effects, often with less effort. In other words, very powerful functionality can be achieved with very little code
  • Core Animation executes animations in the background without blocking the main thread.
  • Note that Core Animation works directly on CALayer, not UIView
  • Core Animation hands over most of the actual drawing tasks to graphics hardware, which speeds up graphics rendering. This automatic graphics acceleration technology allows animation to have a higher frame rate and smoother display, without taxing the CPU and affecting the speed of the program

Core Animation class inheritance diagram

Black lines represent inheritance, black text represents class names, and white text represents attributes. A CAMediaTiming is a protocol.

The Core Animation application

  • Commonly used attributes

    Duration: beginTime: the beginning time of the animation repeatCount: the number of times the animation is repeated Autoreverses: An animation executed is reverted to the original animation

  • animationwithkeypath

    X = wide scale scale transform.scale. Y = high scale scale transform.rotation. Z = rotation with the Z-axis as the center = Transparency margin = layout zPosition = flip backgroundColor = backgroundColor cornerRadius = borderWidth = borderWidth = bounds = size contents = content ContentsRect = content size cornerRadius = frame = size position hidden = display hide mask masksToBounds position = position shadowColor = shadowColor ShadowOffset = shadowOffset shadowOpacity = shadowRadius = shadow rounded corner

  • TimingFunction: The display rhythm system that controls the animation provides five values to choose from:

    KCAMediaTimingFunctionLinear linear animation kCAMediaTimingFunctionEaseIn first slow, quick (slow in fast out) kCAMediaTimingFunctionEaseOut quickly before they are slow (fast into slow out) KCAMediaTimingFunctionEaseInEaseOut first slow, quick again slow kCAMediaTimingFunctionDefault default, also belong to middle is faster

  • Delegate: Animation delegate. Detects the execution and end of the animation.

- (void)animationDidStart:(CAAnimation *)anim; // start animation - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag; // End of animationCopy the code

  • Path: Execution path in keyframe animation

  • Type: Indicates the animation type of transition animation. The system provides four transition animations.

    KCATransitionFade kCATransitionMoveIn Enters the overlay effect kCATransitionPush pushes the effect kCATransitionReveal Reveals the leave effect

  • Subtype: Animation direction of transition animation

    KCATransitionFromRight comes in on the right and kCATransitionFromLeft comes in on the left and kCATransitionFromTop comes in on the top and kCATransitionFromBottom comes in on the bottom

The transform deformation

Pan, scale, rotate, generally with animateWithDuration animation effect

  • CGAffineTransform is a structure, similar to CGRect and size, created using CG…. Make() and CGAffineTransform do the same.

  • CGAffineTransformMake(A, B, C, D,tx, TY) AD scaling BC rotation tx,ty displacement, the basic 2D matrix formula x= Ax +cy+tx y=bx+dy+ty 1. StructCGAffineTransform {CGFloata,b,c,d; CGFloattx,ty; }; CGAffineTransformCGAffineTransformMake

  • supplement

The multiplication of two matrices can only be defined if the number of columns in the first matrix A is equal to the number of rows in the other matrix B. If A is an m by n matrix and B is an n by P matrix, their product C is an M by P matrix

, one of its elements:

And this product is denoted as:

[8].

Such as:

Matrix multiplication satisfies the following operation law:

Associative law:

Left distributive law:

Right distributive law:

Matrix multiplication does not satisfy the commutative law.

  • Translation Translation
/ / this sentence mean: 100 tempView horizontal translation, the vertical translation 50. Self. TempView. Transform = CGAffineTransformMakeTranslation (100, 50);Copy the code
  • The zoom Scale
/ / 0.5 times the width of the zoom, height 0.3 times zoom self. TempView. Transform = CGAffineTransformMakeScale (0.5, 0.3);Copy the code
  • Rotate the Rotation
// Select rotation by how many angles. 180 ° in the iOS ` M_PI `, 90 ° ` M_PI_2 `, 45 ° ` M_PI_4 ` / / positive is clockwise, Negative number is 180 degrees clockwise counterclockwise / / self. TempView. Transform = CGAffineTransformMakeRotation (M_PI_2);Copy the code
  • Multiple deformations are nested
[UIView animateWithDuration:2.f animations:^{//1. First create a CGAffineTransform translation = CGAffineTransformMakeTranslation(100, 50); CGAffineTransformScale = CGAffineTransformScale(Translation, 0.5, 0.3); Transform = CGAffineTransformRotate(scale, M_PI_2);}]; self.tempview.transform = CGAffineTransformRotate(scale, M_PI_2);Copy the code
  • cumulative
[UIView animateWithDuration:1.0 animations:^{
       
       static double angle = 0;
       angle += M_PI_4;
       self.tempView.transform = CGAffineTransformMakeRotation(angle);
   }];
Copy the code
[UIView animateWithDuration:1.0 animations:^{
   
       self.tempView.transform = CGAffineTransformRotate(self.tempView.transform, M_PI_4));
 }];
Copy the code
  • remove
self.tempView.transform = CGAffineTransformMakeRotation(0);
Copy the code
self.tempView.transform = CGAffineTransformIdentity;
Copy the code
  • How does layer translation, rotation, and scaling work
In two-dimensional coordinates, we set the coordinate point of the matrix as: A: [xy1], and the basic transformation matrix of affine transformation is: B: [AB0] CD0 [tx Ty 1] to obtain A transformed matrix through A * B: C = [(a * x + C * y + tx) (b + d * * x + y ty) (1)] here, we assume that C = [1] x 'y' x' = a*x + c*y + tx y' = b*x + d*y + tyCopy the code
translation
X '= a*x + C *y + tx y' = b*x + D *y + ty. For example: a = 1, b = 0, c = 0, d = 1 the above equation becomes: x' = x + tx y' = y + ty The point C(x',y') is equivalent to the point A(x,y) shifted by some distanceCopy the code

CGAffineTransform CGAffineTransformMakeTranslation (CGFloat tx, CGFloat ty) is through the realization of such calculations.

The zoom
X '= a*x + c*y + tx y' = b*x + d*y + tyCopy the code

A and d correspond CGAffineTransform CGAffineTransformMakeScale (CGFloat sx, CGFloat sy) method the parameters in the sx and sy

rotating
X '= a*x + c*y + tx y' = b*x + d*y + ty A = cosa, b = sina, c = -sina, d = cosa, tx = 0, ty = 0 X prime is equal to cosine of a times x minus sine of a times y and y prime is equal to sine of a times x plus cosine of a times y and then you get x prime and y prime as you rotate x and y by degrees A. The affine rotation matrix can be obtained by substituting a = Cosa, b = sina, c = -sina, d = Cosa, tx = 0, ty = 0 into our basic transformation matrix:Copy the code

Point of a corresponding method CGAffineTransformMakeRotation (CGFloat Angle) of Angle parameters.

All of the above transformations can be performed using the basic transformation function: CGAffineTransformMake(CGFloat A, CGFloat B, CGFloat C, CGFloat D, CGFloat tx, CGFloat TY) brings the values of a,b,c,d,tx,ty into the transformation result.

Mixing transformation

With CGAffineTransformMake, the effect of the previous transformation is always clear when making a transformation, that is, each transformation is based on the initial position of the layer as a reference point, but what if we want to make each transformation based on the previous transformation? The Core Graphics framework also provides a set of functions that allow us to perform deeper transformations based on one transformation

CGAffineTransformRotate(CGAffineTransform t, CGFloat angle)
CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy)
CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty)
Copy the code

Transform the layer using CGAffineTransformMake and CGAffineTransform respectively (the transform of the view and the affineTransform property of the layer will have the same effect)

- (IBAction)button1Click:(UIButton *)sender { if (sender.isSelected) { sender.selected = NO; / / by translation, back to the current view position relative to the frame (0, 0) self. TestView. Transform = CGAffineTransformMakeTranslation (0, 0); }else { sender.selected = YES; / / by translation, translation to the current view position relative to the frame (0, 50) of the self. The testView. Transform = CGAffineTransformMakeTranslation (0, 50); }}Copy the code
- (IBAction)button2Click:(UIButton *)sender {
    if (sender.isSelected) {
        sender.selected = NO;
        self.testView.layer.affineTransform = CGAffineTransformTranslate(CGAffineTransformIdentity, 0, 0);
        // self.testView.transform / CGAffineTransformIdentity
    }else {
        sender.selected = YES;
            self.testView.layer.affineTransform = CGAffineTransformTranslate(CGAffineTransformIdentity, 0, 50);
       // self.testView.transform / CGAffineTransformIdentity
    }
}
Copy the code

3 d transform

In CALyer, there is also a Transform property, but it is of type CATransform3D and is used for 3D transformations. Before, we mentioned the layer’s zPosition property. The transform property is used to manipulate the zPosition property to control the position of the layer towards or away from the user’s perspective, thus achieving the EFFECT of 3D transformation. CATransform3D is also a matrix, but unlike the 2×3 matrix, CATransform3D is a 4×4 matrix that can transform in three dimensions

CATransform3DMakeRotation(CGFloat angle, CGFloat x, CGFloat y, CGFloat z)
CATransform3DMakeScale(CGFloat sx, CGFloat sy, CGFloat sz) 
CATransform3DMakeTranslation(Gloat tx, CGFloat ty, CGFloat tz)
Copy the code

Element M34 is used to control perspective projection. Element M34 is used to scale X and Y values to calculate how far away you want to be from the perspective. We can apply perspective by setting m34 to -1.0 / d. D represents the imaginary distance between the perspective and the screen in pixels. Generally, a value of D between 500 and 1000 is comfortable to look at

UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"image_1.jpg"]]; imageView.frame = CGRectMake(75, 100, 250, 250); [self.view addSubview:imageView]; CATransform3D transform = CATransform3DIdentity; Transform. m34 = -1.0/500.0; transform = CATransform3DRotate(transform, M_PI_4, 0, 1, 0); imageView.layer.transform = transform;Copy the code

Github.com/Zws-China/C…

Core Graphics

UIBezierPath