The cube rotation implementation details of the "Turn" Catransform3d matrix transformation

Original URL: http://blog.csdn.net/ch_soft/article/details/7351896

The first part, the previous days to do animation, the use of Catransform3d, because did not learn computer graphics, the matrix of the m11--m44 of the various meanings are not clear, after a few days of research summarized as follows: (for me as the rookie learning)

1. struct CATRANSFORM3D
2. {
3. CGFloat M11 (x scale), M12 (y Shear), M13 (), M14 ();
4. CGFloat M21 (x Shear), M22 (y scale), M23 (), M24 ();
5. CGFloat M31 (), M32 (), M33 (), M34 (Perspective effect, the object to be manipulated has a rotational angle, otherwise no effect.) Of course, there will be changes in the z direction to have a perspective effect);
6. CGFloat M41 (x translation), M42 (y translation), M43 (z-shift), M44 ();
7. };

Ps:

• When the overall proportion of the transformation, that is, when the M11==M22, if the m33>1, the overall reduction of the graph, if the 0<m33<1, the overall enlargement of the graph, if m33<0, the occurrence of the symmetry of the original point of the transformation.
• The M12 or M21 is a shear effect, when the "m12= angle" and "m21=-angle" is the rotation effect. Two angle values are the same.
• () empty places are supplemented later.
• Also, to use Catransform3d, the quartzcore.framework must be imported into the project. Then in the file

#import <QuartzCore/CATransform3D.h>.

iphone Perspective effect (perspective)

2. Catransform3d Transform = catransform3didentity;
4. Transform. M34 = 0.0005; //Perspective effect
6. Transform = catransform3drotate(transform,(m_pi), 0, 1, 0);
8. [Piece. layer SetTransform: transform];

The second line must be written in front of the third line! Own understanding!

Part II

1. Significance of CATRANSFORM3D structure members.

?

structCATransform3D{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（）;};

PS: When the overall proportion of the transformation, that is, when the M11==M22, if the m33>1, the overall reduction of the graph, if the 0<m33<1, the overall enlargement of the graph, if the s<0, the occurrence of the symmetry of the original point transformation.

() empty places are supplemented later.

2. Catransform3dmaketranslation

Catransform3dmaketranslation (0, 0, 0) creates a 4*4 unit matrix.

3. Catransform3dmakerotation and Catransform3drotate

Catransform3dmakerotation ()

[OBJC]View PlainCopy

2. _transformedlayer = [Calayer layer];
4. _transformedlayer. frame = self. bounds;
6. _transformedlayer. Anchorpoint = Cgpointmake (0. 5f, 0. 5f);
8. Catransform3D sublayertransform = Catransform3DIdentity;
10. Set Perspective
12. Sublayertransform. M34 = kperspective;
14. [_transformedlayer Setsublayertransform:sublayertransform];
18. [self. Layer Addsublayer:_transformedlayer];
20. Init sublayers
22. Catransform3D t = catransform3DMakeTranslation (0, 0, 0);
24. Take snapshot of the current view
26. [_transformedlayer addsublayer:[self snapshot:t
28. Withview:_contentview
30. ismasked:YES]];
32. Temporarily supports One Direction rollover
34. Rotatedirection direction = Rotatefrombottom;
36. if (YES | | direction = = rotatefrombottom)
38. {
40. CGFloat height = self. Bounds. Size. Height;
42. //cgfloat cubesize = 100.0f;
44. t = catransform3DRotate (t, D2R (90. 0), 1, 0, 0); "1"
46. t = catransform3DTranslate (T, 0, height, 0);
48. Calayer *sublayer = [self snapshot:t withview:view ismasked:YES];
50. [_transformedlayer Addsublayer:sublayer];
52. }
54. Else
56. {
58. }
62. _newcontentview = view;
66. [self animationcuberotate:direction withduration:duration];

　　

4. Flipped animations

[OBJC]View PlainCopy

2. -(void) Animationcuberotate: (rotatedirection) Direction
4. withduration: (float) duration
6. {
8. [Catransaction flush];
10. CGFloat height = self. Bounds. Size. Height;
12. cabasicanimation *rotation;
14. //Cabasicanimation *translationx;  If you flip along the x-axis, this variable is not used.
16. cabasicanimation *translationy;  //If you flip along the y-axis, this variable is not used.
18. cabasicanimation *translationz;
20. caanimationgroup *animationgroup = [Caanimationgroup animation];
22. Animationgroup. Delegate = self ;
24. Animationgroup. Duration = Duration;
28. if (direction = = Rotatefrombottom)
30. {
32. //Create a keyframe animation (in a direction).
34. Translationy = [cabasicanimation animationwithkeypath:
36. @ "SUBLAYERTRANSFORM.TRANSLATION.Y"];
38. Translationy. tovalue = [NSNumber numberwithfloat:-(height/ 2]]; "2"
40. rotation = [Cabasicanimation animationwithkeypath:
42. @ "sublayertransform.rotation.x"];
44. Rotation. tovalue = [NSNumber numberwithfloat:d2R (-90. 0f)];
46. }
48. Else if (direction = = rotatefromtop)
50. {
52. }
56. //Processing z-axis
58. Translationz = [cabasicanimation animationwithkeypath:
60. @ "Sublayertransform.translation.z"];
62. Translationz. tovalue = [NSNumber numberwithfloat:height/ 2]; "3"
64. Animationgroup. Animations =
66. [Nsarray arraywithobjects:rotation, Translationy, Translationz, nil nil];
68. Animationgroup. Fillmode = kcafillmodeforwards;
70. Animationgroup. removedoncompletion = NO;
72. [_transformedlayer addanimation:animationgroup Forkey:kanimationkey];
74. }

Made, I find this thing really difficult to articulate, mainly because my theory is weak,

"1" for the x-axis rotation, is 1,0,0, for the y-axis rotation, is 0,1,0 ... The following line also needs to be converted correctly.

"2" Here should be related to Anchorpoint.

The value of "3" affects things like depth, such as cube, which is closer to us, or farther away. (But it doesn't seem to be a perspective relationship)

The third part, the case development: In general, we do not have to operate the narrow matrix of iOS directly, the SDK provides us with a ready-made conversion method. Here we will use the core animation to use this matrix for cube rotation implementation, this is my down from the Internet after the code, my own after the summary of the notes, inevitably there are shortcomings, I hope that there is no misleading to see this article's classmates.

The conversion used here is called the main include rotation function and move function: Catransform3drotate catransform3dmaketranslation

Principle Description:
Rotation type: Rotate to top from current display
Operation: 1. The rotation is divided into a paragraph, the formation of the path, by the cakeyframeanimation, each section is determined by the angle of rotation, such as the angle of a (rotation should be completed 90 degrees); 2. Shift the current view (after adding) to an offset matrix, that is, to transfer the view center point to a predetermined position after the rotation of the angle; 3. The above result is rotated by a angle.
Description: Rotate from the current to the top, to the bottom, to the left, to the right, and from all of these positions. Just form the basic composition of the cube rotation. Because all the way the process is similar, just modify the rotation axis (referred to later) and offset, so it is only one of the narrative.

Specific implementation:
1. Add two sub-view
UIView *view = [[UIView alloc] initwithframe:cgrectmake (100, 100, 200, 200)];
View.backgroundcolor = [Uicolor Redcolor];
View.center = Self.view.center;
[Self.view Addsubview:view];

UIView *view1 = [[UIView alloc] initwithframe:cgrectmake (100, 100, 200, 200)];
View1. backgroundcolor = [Uicolor Redcolor];
View1. Center = self.view.center;
[Self.view Addsubview:view1];

2. Perform rotation
The core transformation of a rotation: (Focus on understanding two transformations, why should this change?) Need a certain space geometry thinking)
CGFloat radius = Degree_to_radius (90* (float) (count-1-index)/(float) (count-1));//calculates the angle of rotation, where count is the number of rotation path nodes, Index is the number of nodes (rotated 90 degrees altogether)
Catransform3d Transform3D = catransform3dmaketranslation (0,-r*sinf (RADIUS),-r* (1-COSF (RADIUS)));// Calculates the offset moment (indicates that the offset on the y-axis is-r*sinf (RADIUS) and the latter on the z-axis)
Transform3D = Catransform3drotate (transform3d, radius, 1.f, 0, 0);//Calculate the rotation matrix on the above basis
Nsvalue *value = [Nsvalue valuewithcatransform3d:transform3d];
[Values addobject:value];//adds matrix values to the path
if (Index > 0) {
[Timingfunctions addobject:[camediatimingfunction functionwithname:kcamediatimingfunctionlinear]];//Add Time Control

The Note:catransform3drotate () method manufactures a rotation matrix that controls the angle and direction of rotation. One trick here is that the direction of the positive and negative influence vectors of a coordinate value of a vector value also affects the direction of rotation of the view.

To create a path:
Cakeyframeanimation *animation = [Cakeyframeanimation Animationwithkeypath:keypath];
Nsmutablearray *values = [Nsmutablearray array]; The path of the matrix representation
Nsmutablearray *timingfunctions = [Nsmutablearray array];//corresponding Time control
for (int i = 0; i< count; i + +)
｛
Execute the above code quickly
｝
Animation.values = values;
Animation.timingfunctions = timingfunctions;
animation.duration = Duration;

3. At this point, the path creation is successful and the hardest part is past. Continue our Journey:
Create Caanimationgroup:
Caanimationgroup *cubicanimation = [Caanimationgroup animation];
cubicanimation.duration = Duration;
Cubicanimation.delegate = delegate;
Cubicanimation.animations = [Nsarray arraywithobjects:transform,nil]; Transform is the last part of our hard-to-create cakeyframeanimation *animation

4. Assembling, realizing animation
Catransform3d transform = catransform3didentity;
[Self.layer Setsublayertransform:transform]; Restore 3D settings (no restoration is required, official requirements must be restored)
[Catransaction begin];
[Catransaction setanimationduration:duration]; Set the animation run time length
[Catransaction Setcompletionblock:completionblock]; Actions to perform after completion
[Subviewin.layer addanimation:inanimation forkey:@ "Cubein"]; Add animations to the layer and the system will automatically start him
[Catransaction commit];


5. Important: Finally, the darkest hour is always before the dawn, and this time it is no exception. All we do is turn a face around, and to form a cube effect, we have to rotate the other face accordingly. Dizzy, slowly back, and then hard to do the work again. But fortunately we have a computer to help us do those annoying repetitive things, write a function body, copy, modify parameter values, ok! Part IV Catransform3d Mytransform;
Mytransform = catransform3dmakerotation (angle, x, y, z);

The Catransform3dmakerotation function creates a transition that rotates the layer in a three-dimensional axis coordinate system in any radian. The x-y-z axis has a definite range (between 1 and + 1). The value specified by the corresponding axis tells the system to rotate on that axis. For example, if the x-axis is set to 1 or 1, the object rotates in the direction of the x-axis, which means that it will be rotated vertically. Consider these values as straws inserted on each axis of an image (Think of these values as inserting straws through the image for each axis.). If the straw is inserted over the x-axis, the image will rotate vertically along the stalk. You can create more complex rotations using the axis angle values ... For most purposes, however, values between 1 and +1 are sufficient.

To rotate horizontally (vertically) 45 degrees, you can use the following code:

Mytransform = Catransform3dmakerotation (0.78, 1.0, 0.0, 0.0);

To rotate the same value on the y-axis:
Mytransform = catransform3dmakerotation (0.78, 0.0, 1.0, 0.0);


0.78, used in the previous example, is calculated by the angle value is converted to a radian value. To convert the angle value to a radian value, you can use a simple formula mπ/180. For example, 45π/180 = 45 (3.1415)/180 = 0.7853. If you plan to use angular values in your program all the time, you can write a simple conversion method to help keep your code understandable:

Double radians (float degrees) {
Return (degrees * 3.14159265)/180.0;
}

When you create a transformation, you will call this method:

Mytransform = Catransform3dmakerotation (radians (45.0), 0.0, 1.0, 0.0);

When the transform (transformation) is created, it is applied to the layer you are working on. The Calayer object provides a transform property to connect the transformation. The layer performs the transformation assigned to the Transform property:

ImageView.layer.transform = Mytransform;

When the object is displayed, the transition effect applied to it is displayed. In your code, you still think of it as a 2D object. However, it is rendered according to the type of conversion provided.

The cube rotation implementation details of the "Turn" Catransform3d matrix transformation