iOS animation effects

About several coordinate systems for a layer.

For iOS, the (0,0) point of the coordinate system is in the upper-left corner, which is the lower the Y value. The more you go to the right, the greater the X value.

A frame of a layer, which is part of the Position,bounds,anchorpoint and transform properties.

Setting a new frame will change the layer's position and bounds accordingly, but the frame itself is not saved.

Position: is a Cgpoint value that specifies the position of the layer as its parent layer, based on the parent layer's coordinate system.

Bounds: is a cgrect value that specifies the layer's size (bounds.size) and the layer's origin (Bounds.origin), which is based on its own. If you change the origin of bounds, the coordinates will change in the sublayer of the layer. That is, changing the coordinate system itself is the same as the position of the parent layer, but the sub-layer position on it changes.

Anchorpoint: is a cgpoint value that specifies the position of a bounds-based coordinate system. The anchor points (anchor point) Set the value of bounds relative to position, as well as the center point of a change. The anchor point uses the spatial coordinate system to take a value range of 0-1. The default is 0.5, which is the center point of bald, and if it is (0,0), the layer moves to the left. If it is (in), move down to the right.

Looking at the following two graphs, it is clear enough to see that the change in the anchor point is different. (This is the MAC OS coordinate system, and if it is iOS, then the (0,0) point is at the top left of the graph.) ）

Explanations for Anchorpoint in iOS

The location of the red dot in the anchor point is the default (0.5,0.5). When the image is transformed, it is scaled, offset, and so on at this point.

Once the position of the anchor is modified: (0,0), then the image becomes. Various transformations will follow this point to move.

So, in the iOS system, the anchor's coordinate system is: the upper-left corner is (0,0), the lower-right corner is (in).

According to this diagram, in understanding the above definition, it is intuitive.

//

//

//

The geometric transformation of the layer.

You can change the geometry of a layer by using a matrix.

The CATRANSFORM3D data structure defines a homogeneous three-dimensional transformation (a matrix of 4x4 cgfloat values) for the rotation, scaling, skew, skew, and applied perspective of the layer.

The 2 properties of a layer specify the transformation matrix: Transform and Sublayertransform.

Transform: Is the placement of the Anchorpoint (anchor Point) to change the layers and sublayers on the layer.

Sublayertransform: Is the placement of the Anchorpoint (anchor Point) to change the layer's sublayers, not including itself.

Catransform3didentity is the unit matrix, which has no scaling, rotation, skew, or perspective. The matrix is applied to the layer, that is, the default value is set.

//

//

//

Transform function

Catransform3dmaketranslation

Official documents:

Returns a transform that translates by ' (TX, Ty, TZ) '. T ' = [1 0 0 0; 0 1 0 0; 0 0 1 0; TX ty TZ 1].

Catransform3d catransform3dmaketranslation (cgfloat tx, cgfloat ty, cgfloat tz).

To make an explanation, for beginners, may not understand what it means. I'll say it in detail

For Catransform3d, it is a 4x4 cgfloat matrix.

The values given above are: [1 0 0 0; 0 1 0 0; 0 0 1 0; TX ty TZ 1].

After giving it a vertical rise. It is found that:

1 0 0 0

0 1 0 0

0 0 1 0

TX Ty TZ 1

It was obvious that it was pricked up.

Catransform3d is also a structure. He has a formula of his own that can be applied.

struct CATransform3D { CGFloat     m11（x缩放）,    m12（y切变）,      m13（旋转）,     m14（）;

CGFloat     m21（x切变）,    m22（y缩放）,      m23（）,             m24（）;

CGFloat     m31（旋转）,      m32（ ）,               m33（）,              m34（透视效果，要操作的这个对象要有旋转的角度，否则没有效果。正直/负值都有意义）;

CGFloat     m41（x平移）,     m42（y平移）,     m43（z平移）,     m44（）; };

According to this formula, it is clear at a glance.

Catransform3d catransform3dmaketranslation (cgfloat tx, cgfloat ty, cgfloat TZ)

The parameter means that

Tx::x panning.  Ty:y panning. Tz:z panning

//////

Swap function:

Catransform3d catransform3dmaketranslation (cgfloat tx, cgfloat ty, cgfloat TZ)

Tx:x axis offset position, down to positive.

Ty:y axis offset position, positive to right.

Tz:z the axis offset position, and a positive number outward.

Cases:
If there are 2 layers, one is green and the other is red. Load Green First, then red after loading.

The left and right shift of the tx,ty is not said first.

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 (closer to the screen), the smaller the value, the more the layer is inside (the screen).

Catransform3d catransform3dtranslate (Catransform3d t, cgfloat tx, cgfloat ty, cgfloat tz);

T: This is the previous function. Everything else is the same.

It can be understood as: the superposition of functions, the superposition of effects.

Catransform3d Catransform3dmakescale (cgfloat sx, CGFloat sy, cgfloat sz);

Sx:x axis Scaling, which represents a scaling ratio, is typically a number between 0---1.

Sy:y axis Scaling.

SZ: When the overall proportion of the transformation, that is M11 (SX) = = M22 (SY), if the M33 (SZ) >1, the overall reduction of the graph, if 0<1, the overall graphics amplification, if M33 (SZ) <0, the occurrence of the symmetry of the original point transformation.

When SX = 1,sy = 1 o'clock.

When SX = 0.5,sy = 0.5.

Catransform3d Catransform3dscale (Catransform3d T, cgfloat SX, CGFloat sy, cgfloat SZ)

T: This is the previous function. Everything else is the same.

It can be understood as: the superposition of functions, the superposition of effects.

Catransform3d catransform3dmakerotation (cgfloat angle, cgfloat x, cgfloat y, CGFloat z);

The rotation effect.

Angle: The arc of rotation, so convert the angle to radians: angle * m_pi/180.

x: Rotates in the x-axis direction. Value range-Between 1---1

Y: Rotates in the y-axis direction. Value range-Between 1---1

Z: Rotates toward the z-axis. Value range-Between 1---1

Example: Rotate 60 degrees to the x-axis.                 Rotates 60 degrees to the y-axis. Rotates 60 degrees to the Z axis.

to the X-axis, the y-axis rotates 60 degrees, which is the diagonal rotation.

You can rotate the image by simultaneously changing it through the X, Y, Z axes.

Catransform3d catransform3drotate (Catransform3d t, cgfloat Angle, cgfloat x, cgfloat y, CGFloat z);

T: This is the previous function. Everything else is the same.

It can be understood as: the superposition of functions, the superposition of effects.

Catransform3d Catransform3dinvert (Catransform3d t);

The rollover effect.

Unused use

Cgaffinetransform catransform3dgetaffinetransform (Catransform3d t);

BOOL Catransform3disaffine (Catransform3d t);

Affine effects.

is to convert a Catransform3d object into a Cgaffinetransform object.

Which translates the catransform3d matrix into a cgaffinetransform matrix.

The transform function also provides the ability 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"];

iOS animation effects