Learning animation-transforming CGAffineTransform and CATransform3D

Learning animation-transforming CGAffineTransform and CATransform3D

CGAffineTransform affine deformation
Cg: Core Graphics
Affine: Affine; Transform: change, make... Deformation; conversion.
~~~~ Have you noticed these things ~~~~~
NS: next step. It is generally an exponential data, such as NSObject and NSString.
CG: generally used for rendering and drawing. For example, CGAffine.
UI: generally used for common views and controllers,
In objective-c, CF, CA, CG, and UI refer to core foundation, core animation, and core graphic ), the abbreviation of user interface.
~~~~ Have you noticed these things ~~~~~

CGAffineTransform involves the CGPoint and matrix content. CGAffineTransform is a 3X2 matrix that can be multiplied with two-dimensional space vectors (such as CGPoint. CGAffineTransform is a 3X2 matrix that can be multiplied by a two-dimensional space vector (such as CGPoint. When the transform matrix is applied to the layer, each point in the layer rectangle is transformed accordingly to form a new Quadrilateral shape. The "affinetransform" in CGAffineTransform means that no matter what value is used in the transformation matrix, the two lines in the layer remain parallel after the transformation, and the CGAffineTransform can make any transformation that meets the preceding annotation.
~~~~~~~~ @-@! I am a split line haha! @-@~~~~~~~~~~~
Create a CGAffineTransform
The following functions create a CGAffineTransform instance: CGAffineTransformMakeRotation (CGFloat angle)
CGAffineTransformMakeScale (CGFloat sx, CGFloat sy)
CGAffineTransformMakeTranslation (CGFloat tx, CGFloat ty );
CALayer also has a transform attribute, but its type is CATransform3D, rather than CGAffineTransform. This chapter will explain in detail later. The transform attribute of CALayer corresponding to UIView is affineTransform.

UIView * trans = [[UIView alloc] initWithFrame: CGRectMake (100,100,200,200)]; [self. view addSubview: trans]; trans. backgroundColor = [UIColor lightGrayColor]; CALayer * lay = [CALayer layer]; lay. contents = (_ bridge id _ Nullable) ([UIImage imageNamed: @ "logo-60"]. CGImage); lay. frame = CGRectMake (25, 25,150,150); [trans. layer addSublayer: lay]; // trans. transform = CGAffineTransformMakeRotation (M_PI_4); trans. layer. affineTransform = CGAffineTransformMakeRotation (M_PI_4); // The two are the same

Hybrid Transformation <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> Principal + Principal/ydLUu + y6z7Hku6 + juyA8YnI + Principal/K/B/Principal + bShyc/Principal + Principal/Cw + a8uLj2uq/K/Principal + Principal" brush: java; "> CGAffineTransform affine = CGAffineTransformIdentity; affine = CGAffineTransformRotate(affine,M_PI / 180.0 * 30.f); affine = CGAffineTransformTranslate(affine, 100, 0); affine = CGAffineTransformScale(affine, 0.5, 0.5); trans.transform = affine;

It is clear that the image is moved down, which leads to a problem: During the hybrid transformation, the items before the changed content affect the items after the change, therefore, when the first rotation occurs, the next translation will first select 30 degrees, which is equivalent to moving at the bottom of the Oblique direction. If the first scaling is performed, the moving distance will also change.

// Change the transformation order affine = affine (affine, M_PI/180.0 * 30.f); affine = CGAffineTransformScale (affine, 0.5, 0.5); affine = CGAffineTransformTranslate (affine, 100, 0 );

Shear transformation
This is not commonly used. CGAffineTransform does not directly provide a function. Its effect is to set the c and d attributes of CGAffineTransform.

 CGAffineTransform affine = CGAffineTransformIdentity; affine.c = 1; affine.d = 1;

3D changes
CGAffineTransform is only valid for 2D transformations. In order to move or rotate in a 3D space, this can be achieved through the transform attribute (CATransform3D type. CATransform3D is a 4x4 matrix that can be transformed in a 3-dimensional space.
The 3D effect is very simple, that is, there is an extra z axis processing, so the previous comments rotate and scale into CATransform3DMakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z)
CATransform3DMakeScale (CGFloat sx, CGFloat sy, CGFloat sz)
CATransform3DMakeTranslation (Gloat tx, CGFloat ty, CGFloat tz)

// A simple rotation effect CATransform3D affine = CATransform3DMakeRotation (M_PI_4, 1, 1, 0); trans. layer. transform = affine;

Perspective Projection
In the real world, when an object is far away from us, the angle of view looks smaller. In theory, the side that is far away from us is shorter than the side that is close to the angle of view, but it does not actually happen, and our current angle of view is of equal distance, that is, the parallelism in 3D transformation is maintained, which is similar to the previously mentioned affine transformation.
The perspective effect in CATransform3D is controlled by a very simple element in a matrix: m34. M34 is used to scale X and Y proportionally to calculate how far it is from the perspective. The default value of m34 is 0. We can set m34 to-1.0/d to apply the perspective effect. d represents the distance between the camera and the screen in the imagination, in pixels, usually 500-1000.

 CATransform3D affine = CATransform3DIdentity; affine.m34 = -1.0 / 500.0; affine = CATransform3DRotate(affine, M_PI_4, 0, 1, 0); trans.layer.transform = affine;

! [Write picture description here] (http://img.blog.csdn.net/20160405145156397)