Explain the Catransform3d graphics transformation in the core animation framework of IOS _ios

Source: Internet
Author: User

One, matrix coordinates
Catransform3d defines a change matrix, through the setting of the matrix parameter, we can change some properties of layer, this property changes, can produce the effect of animation.
CATransform3D CATransform3DMakeTranslation (CGFloat tx, CGFloat ty, CGFloat tz)
tx:x axis offset position, down to positive number.
Ty:y the axis offset, and to the right is a positive number.
Tz:z axis offset position, positive outward.
Cases:
If there are 2 layers, one is green and the other is red. Load Green First, then load red.
The left and right deviation of the tx,ty.
If the green TZ is-10, the red TZ 0 effect is as follows.

If the green TZ is 0, the red TZ-10 effect is as follows.

For TZ, the larger the value, the more the layer goes outward (near the screen), the smaller the value, the deeper the layer (the screen).
CATransform3D CATransform3DTranslate (CATransform3D t, CGFloat tx, CGFloat ty, CGFloat tz);
T: is the last function. Everything else is the same.
Can be understood as: the superposition of functions, the superposition of effects.
Catransform3d Catransform3dmakescale (cgfloat sx, CGFloat sy, cgfloat sz);
The sx:x axis is scaled to represent a scaling ratio, typically a number between 0---1.
Sy:y axis Scaling.
SZ: The overall proportional transformation, that is, M11 (SX) = = M22 (sy), if M33 (SZ) >1, the overall reduction of graphics, if the 0<1, graphic overall amplification, if M33 (SZ) <0, the origin of the symmetry of the original point of change.
When SX = 1,sy = 1 o'clock. As shown in figure:

When SX = 0.5,sy = 0.5. As shown in figure:

CATransform3D CATransform3DScale (CATransform3D t, CGFloat sx, CGFloat sy, CGFloat sz)
T: is the last function. Everything else is the same.
Can be understood as: the superposition of functions, the superposition of effects.
CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z);
rotation effect.
Angle: The arc of rotation, so to convert the angle to radians: angle * m_pi/180.
x: Rotate to the x-axis direction. Value range-Between 1---1
Y: Rotate to the y-axis direction. Value range-Between 1---1
Z: rotate to the z axis direction. Value range-Between 1---1
Example: Rotate 60 degrees to the X axis.

Rotate 60 degrees to the Y axis.

Rotate 60 degrees to the Z axis.

To the x-axis, the Y axis rotates 60 degrees, or it rotates diagonally.


You can rotate the image by changing the x,y,z axis at the same time.
CATransform3D CATransform3DRotate (CATransform3D t, CGFloat angle, CGFloat x, CGFloat y, CGFloat z);
T: is the last function. Everything else is the same.
Can be understood as: the superposition of functions, the superposition of effects.
CATransform3D CATransform3DInvert (CATransform3D t);
Flip effect.

CGAffineTransform CATransform3DGetAffineTransform (CATransform3D t);
bool CATransform3DIsAffine (CATransform3D t);
Affine effect.
is to convert a Catransform3d object into a Cgaffinetransform object.
Which is to convert the Catransform3d matrix into a cgaffinetransform matrix.
The transformation function also provides the possibility to compare whether a transformation matrix is a unit matrix or whether two matrices are equal.
bool CATransform3DIsIdentity (CATransform3D t);
bool CATransform3DEqualToTransform (CATransform3D a, CATransform3D b);
You can also set the transform effect by modifying the data structure and key values.
struct CATransform3D
               {

                 CGFloat m11, m12, m13, m14;

                           CGFloat m21, m22, m23, m24;

                           CGFloat m31, m32, m33, m34;

                                  CGFloat m41, m42, m43, m44;
}
You can modify one of these values directly to achieve the same effect.
or modify the key value
[myLayer setValue:[NSNumber numberWithInt:0] forKeyPath:@"transform.rotation.x"];

two, properties and methods in Catransform3d
//Initialize a Transform3D object, do not make any transformations
Const CATRANSFORM3D catransform3didentity;
//To determine whether a Transform3D object is an initialized object
bool Catransform3disidentity (Catransform3d t);
//Compare two Transform3D objects to be the same
BOOL Catransform3dequaltotransform (Catransform3d A, catransform3d b);
//Overlay Two Transform3D Object transform properties, return a new Transform3D object
Catransform3d catransform3dconcat (Catransform3d A, Catransform3d b);
1, translation transformation
//Return Transform3D object of a translation transformation Tx,ty,tz corresponding x,y,z axis translation
Catransform3d Catransform3dmaketranslation (cgfloat tx, cgfloat ty, cgfloat tz);
//The translation transformation is based on a transform3d transformation, T is the previous transform3d, the other parameters are above
Catransform3d catransform3dtranslate (Catransform3d t , CGFloat tx, cgfloat ty, cgfloat tz);
For example:

    UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    imageView.image = [UIImage imageNamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    [self.view addSubview:imageView];
   
    UIImageView * newImageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    newImageView.image=[UIImage imageNamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    [self.view addSubview:newImageView];
    CATransform3D trans = CATransform3DMakeTranslation(10, 200, 0);
    newImageView.layer.transform =trans;
The effect is as follows:

2, the scaling transformation
//x,y,z corresponds to the x axis, the y axis, and the z-axis scaling
Catransform3d catransform3dmakescale (cgfloat SX, CGFloat sy, cgfloat sz);
//The scaling transformation is based on a transform3d transformation, and other parameters are as above
Catransform3d Catransform3dscale (Catransform3d T, cgfloat SX, CGFloat Sy, CGFloat sz);
For example:
Uiimageview * ImageView = [[Uiimageview alloc]initwithframe:cgrectmake (MB, MB)];
   ;  imageview.image = [uiimage imagenamed:@ "screenshot 2015-12-06 afternoon 3.27.15.png"];
    [Self.view Addsubview:imageview];
   
    uiimageview * Newimageview = [[Uiimageview alloc]initwithframe: CGRectMake (100, 300, 100, 100)];
    newimageview.image=[uiimage imagenamed:@ "screenshot 2015-12-06 pm 3.27.15.png"];
    [Self.view Addsubview:newimageview];
    Catransform3d trans = Catransform3dmakescale (2, 1, 1);
    NewImageView.layer.transform =trans; The
effect is as follows:

3. Rotation transform
//angle参数是旋转的角度,为弧度制 0-2π
//x,y,z决定了旋转围绕的中轴,取值为-1——1之间,例如(1,0,0),则是绕x轴旋转(0.5,0.5,0),则是绕x轴与y轴中
//间45度为轴旋转,依次进行计算
CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z);
//在一个transform3D的基础上进行旋转变换,其他参数如上
CATransform3D CATransform3DRotate (CATransform3D t, CGFloat angle, CGFloat x, CGFloat y, CGFloat z);
For example:
UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    imageView.image = [UIImage imageNamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    [self.view addSubview:imageView];
   
    UIImageView * newImageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 300, 100, 100)];
    newImageView.image=[UIImage imageNamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    [self.view addSubview:newImageView];
    CATransform3D trans = CATransform3DMakeRotation(M_PI/2, 0, 0, 1);
    newImageView.layer.transform =trans;
The effect is as follows:

In addition, when we have a rotational component perpendicular to the z-axis, setting the value of M34 can increase the perspective, or it can be understood as the depth of the effect, for example:

    Uiimageview * ImageView = [[Uiimageview alloc]initwithframe:cgrectmake (100, 100, 100, 100)] ;
    imageview.image = [uiimage imagenamed:@ "screenshot 2015-12-06 afternoon 3.27.15.png"];
    imageView.layer.transform = catransform3dmakerotation (M_PI/4, 0, 1, 0);
    [Self.view Addsubview:imageview];
   
    uiimageview * Newimageview = [[Uiimageview alloc]initwithframe: CGRectMake (100, 300, 100, 100)];
    newimageview.image=[uiimage imagenamed:@ "screenshot 2015-12-06 pm 3.27.15.png"];
    [Self.view Addsubview:newimageview];
    Catransform3d trans = catransform3didentity;
    trans.m34 = -1/100.0;
    trans = catransform3drotate (trans, M_pi/4, 0, 1, 0); 
    NEWIMAGEVIEW.L Ayer.transform =trans; The
two imageview have a rotation transformation of the y-axis, the second has a perspective, the first is not, and runs as follows:

4. Rotate Flip Transform
//将一个旋转的效果进行翻转
CATransform3D CATransform3DInvert (CATransform3D t);
For example:
   UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    imageView.image = [UIImage imageNamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    imageView.layer.transform = CATransform3DMakeRotation(M_PI/4, 0, 0, 1);
    [self.view addSubview:imageView];
   
    UIImageView * newImageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 300, 100, 100)];
    newImageView.image=[UIImage imageNamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    [self.view addSubview:newImageView];
    CATransform3D trans = CATransform3DMakeRotation(M_PI/4, 0, 0, 1);
    trans = CATransform3DInvert(trans);
   
    newImageView.layer.transform =trans;
5, the conversion of Catransform3d and Cgaffinetransform
Cgaffinetransform is a matrix of transformations in the Uikit framework that acts like a catransform, except that it can directly function in view without acting on layer, which can also be transformed by the following methods:
//将一个CGAffinrTransform转化为CATransform3D
CATransform3D CATransform3DMakeAffineTransform (CGAffineTransform m);
//判断一个CATransform3D是否可以转换为CAAffineTransform
bool CATransform3DIsAffine (CATransform3D t);
//将CATransform3D转换为CGAffineTransform
CGAffineTransform CATransform3DGetAffineTransform (CATransform3D t);

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.