Use Catransform3d on a layer to make a three-dimensional animation-B

On UIView, we can use Cgaffinetransform to do the View: Pan (translation), rotate (Rotation), scale, tilt (Invert) operations, but these operations are not dynamic stereo effects, This can only be referred to as a two-dimensional deformation. In the layer, we can use Catransform3d for "perspective rotation" to achieve the effect of three-dimensional deformation, but this is often referred to as 2.5D, rather than the real 3D, because he can not let the layer really become three-dimensional objects, but only to simulate three-dimensional animation effect.

See three-dimensional animation effects:

I'll take one step at a to achieve it.
1. The display effect, we need to create six layers to represent a stereoscopic figure of six different faces. and create a Catransformlayer class to act as a container:

/**底部容器*/@property (nonatomic,strong) CATransformLayer *contentLayer;/**上面*/@property (nonatomic,strong) CALayer *topLayer;/**下面*/@property (nonatomic,strong) CALayer *bottomLayer;/**左面*/@property (nonatomic,strong) CALayer *leftLayer;/**右面*/@property (nonatomic,strong) CALayer *rightLayer;/**前面*/@property (nonatomic,strong) CALayer *frontLayer;/**后面*/@property (nonatomic,strong) CALayer *backLayer;

Usually, like this batch creation object work, do not do silly yards farming, to learn to encapsulate, so that we only need to pass in the layer of the variable parameters necessary to create a layer.

 -( Calayer *) Layeratx: ( cgfloat) x y: ( cgfloat) y z: ( cgfloat) Z Color: (  Uicolor *) Color transform: ( catransform3d) transform{     calayer *layer = [ calayer Layer];    layer . backgroundcolor = Color . Cgcolor;    layer . Bounds =  CGRectMake ( 0,  0, , );    layer . Position =  Cgpointmake (x, y);    layer . zposition = z;    layer . Transform = transfor M    [ self . Contentlayer Addsublayer:layer];      return layer;     

I would like to say the Zposition and Transfrom properties of the layer in the above code, in this case I will use the Catransformlayer class, which is the subclass of Calayer, which is described in the official document as a sentence. " Catransformlayer objects is used to create sure 3D layer hierarchies ". So what's the difference between him and Calayer? The Calayer property in Zposition, If you use only Calayer, then zposition can only be used to calculate the order in which the layers are displayed, which will make the graphic look flat. And in Catransformlayer, this class, zposition It can be used to determine the space position. He will let the position of the graph be not limited to the X, Y axis, or you can set the value on the z axis to add depth of field to the graphic, so that the shape has a stereoscopic effect. So, x, Y, Z are the values of the axis, the axis, and the axis.

The following is the core of this article: Calayer's Transfrom attribute: This property is mainly the Operation Catranfrom3d class to three-dimensional deformation of the layer. In our example, we mainly rotate the layer, So focus on the method of 3D rotation in the Catranfrom3d class:

CA_EXTERN CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x,    CGFloat y, CGFloat z)

As can be seen, this is a C language encapsulated good function, the parameters inside I to explain: the first parameter: the angle inside is the layer needs to rotate the angle, is in radians, I enumerate a few commonly used: M_PI is to represent 180 degrees, m_pi_2 90 degrees, M_pi_ 4 means 45 degrees. The following three parameters x, Y, Z: We know that in two-dimensional deformation, the rotation effect is around a point to change, but in three-dimensional change, but it is around an axis. And these three parameters determine a point in the coordinate system in the stereo plane, the point and the line of the dot (upper left corner) determine an axis, Let me give you a special example: rotate 45 degrees around the y-axis, so it's necessary that the three-parameter points are on the y-axis, the y-axis, and the other values are necessarily 0, so the parameters should be filled in like this: Catransform3dmakerotation (m_pi_4, 0, 1, 0);

Okay, so now initialize Catransformlayer, and then add six layers to the container.

Create Catransformlayer object Catransformlayer *contentlayer = [Catransformlayer layer];    Contentlayer.frame =self.view.layer.bounds;    Cgsize size = contentLayer.bounds.size; Contentlayer.transform = Catransform3dmaketranslation (Size.width/2, Size.Height/2,0);    Self.contentlayer = Contentlayer; [Self.view.layer Addsublayer:contentlayer];Initialize six layersThe top and bottom are rotated 90 degrees along the x axis self.toplayer = [Self layeratx:0 y:-ksize/2 Z:0 Color:[uicolor Redcolor] transform:catransform3dmakerotation (m_pi_2,1,0,0)]; Self.bottomlayer = [Self layeratx:0 y:ksize/2 Z:0 Color:[uicolor Greencolor] transform:catransform3dmakerotation (m_pi_2, 1,  0,  0)];     //left and right along the y-axis 90 degrees    self.leftlayer = [Self layeratx:-ksize/ Span>2 y:  0 Z:  0 color:[uicolor Bluecolor] transform:catransform3dmakerotation (m_pi_2,  0,  1,  0)];    self.rightlayer = [self layeratx:ksize/ 2 y:  0 Z:  0 color:[uicolor Blackcolor] Transform: Catransform3dmakerotation (M_pi_2,  0,  1,  0)];     //front and back no need to change, So use catransform3didentity    self.frontlayer = [self layeratx:  0 y:  0 z:ksize/ 2 color:[ Uicolor Browncolor] transform:catransform3didentity];    self.backlayer = [self layeratx:  0 y:  0 z:-ksize/ 2 color:[uicolor Browncolor] Transform:ca Transform3didentity];               

Note: Ksize is a macro I define that represents the side length of this cube.
What effect is displayed on the view now?

Why do I only show the browncolor of the front layer? That's right, because after 90 degrees of rotation, both up and down on the front layer of the four side, and the view perpendicular, so we do not see, then I give a pan gesture, along with the movement of the finger, rotate this stereoscopic figure.

- (void)pan:(UIPanGestureRecognizer *)recognizer{   //获取到的是手指移动后，在相对坐标中的偏移量(以手指接触屏幕的第一个点为坐标原点)    CGPoint translation = [recognizer translationInView:self.view];    CATransform3D transform = CATransform3DIdentity;    transform = CATransform3DRotate(transform, translation.x * 1 / 100, 0, 1, 0);    transform = CATransform3DRotate(transform, translation.y * - 1 / 100, 1, 0, 0);    self.view.layer.sublayerTransform = transform;}

Use Catransform3d on a layer to make a three-dimensional animation-B