IOS Animation Animation-4-5:calayer Subclass: Catransformlayer

First of all: This is a series of articles, refer to other articles under this topic to help you understand this article.

Today Saturday, I hope everyone has a happy weekend.
Let's talk about it today. Catransformlayer:catransformlayer is a layer that is designed to create a three-dimensional view, or a collection of multiple layers. He doesn't have an extra API, so to speak, he just carries a child layer.

Let's take a look at an example and explain it by example.

International practice First:

This is a purely hand-crafted figure.
Create a Catransformlayer object first:

var transformLayer = CATransformLayer()transformLayer.frame = someView.boundssomeView.layer.addSublayer(transformLayer)

This does not have any technical content. The same someview for me a view created with storyboard

Then create his child layer and add the layer to the Transformlayer

var layer = Sidelayerwithcolor (redcolor) transformlayer.addsublayer (layer) layer = Sidelayerwithcolor (Orangecolor) varTransform= Catransform3dmaketranslation (Sidelength/2,0.0, Sidelength/-2)Transform= Catransform3drotate (Transform, Degreestoradians (90.0),0.0,1.0,0.0) layer.Transform=TransformTransformlayer.addsublayer (layer) layer = Sidelayerwithcolor (yellowcolor) layer.Transform= Catransform3dmaketranslation (0.0,0.0,-sidelength) transformlayer.addsublayer (layer) layer = Sidelayerwithcolor (greencolor)Transform= Catransform3dmaketranslation (Sidelength/-2,0.0, Sidelength/-2)Transform= Catransform3drotate (Transform, Degreestoradians (90.0),0.0,1.0,0.0) layer.Transform=TransformTransformlayer.addsublayer (layer) layer = Sidelayerwithcolor (bluecolor)Transform= Catransform3dtranslate (Transform,0.0, Sidelength/-2, Sidelength/2)Transform= Catransform3drotate (Transform, Degreestoradians (90.0),1.0,0.0,0.0) layer.Transform=TransformTransformlayer.addsublayer (layer) layer = Sidelayerwithcolor (purplecolor)Transform= Catransform3dmaketranslation (0.0, Sidelength/2.0, Sidelength/-2.0)Transform= Catransform3drotate (Transform, Degreestoradians (90.0),1.0,0.0,0.0) layer.Transform=TransformTransformlayer.addsublayer (layer) Transformlayer.anchorpointz = sidelength/-2.0

• Explain:
  You can see that the code is divided into six blocks, which are the six polygons that create a cube. It's all based on the first one. Rotate and pan (if there is a less understanding of this please see: IOS animation Animation-3: Catransform3d effects detailed)
  Again: Sidelayerwithcolor (purplecolor) What the hell is this?
  Don't worry, this is for the convenience of writing a method to create a layer, the content is as follows

func sideLayerWithColor(color: UIColor) -> CALayer {    let layer = CALayer()    layer.frame = CGRect(originsize:   CGSize(widthheight: sideLength))    layer.backgroundColor = color.CGColor    return layer}

Another: Degreestoradians (), this is the conversion angle, looks more convenient and more pleasing to the eye.

func degreesToRadians(degrees: Double) -> CGFloat {    return180.0)}

The parameters in parentheses are the colors I define to distinguish the colors of each face.

var redColor = UIColor.redColor()var orangeColor = UIColor.orangeColor()var yellowColor = UIColor.yellowColor()var greenColor = UIColor.grayColor()var purpleColor = UIColor.purpleColor()var blueColor = UIColor.blueColor()

The last line sets the anchor point, setting the anchor point to the center of the Cube

Now a cube is ready, but after running it is still flat, because the cube is facing the screen and the other faces are obscured.

Here's a way to get him to rotate his angle.

Func Applyroationforxoffset (xoffset:double, yoffset:double) {Let Totaloffset = sqrt (xoffset * xoffset + yOffset * yOf Fset) Let totalrotation = CGFloat (Totaloffset * M_PI/180.0) Let Xrotationalfactor = CGFloat (xoffset)/totalrotation Let Yrotationalfactor = CGFloat (yoffset)/totalRotation Let Currenttransform = Catransform3dtranslate (transformlayer. Sublayertransform,0.0,0.0,0.0) Let Rotationtransform = Catransform3drotate (transformlayer. Sublayertransform, Totalrotation, Xrotationalfactor * currenttransform. M12-yrotationalfactor * Currenttransform. MOne by one, Xrotationalfactor * currenttransform. M22-yrotationalfactor * Currenttransform. MXrotationalfactor * Currenttransform. M32-yrotationalfactor * Currenttransform. M) Print (Currenttransform. MCurrenttransform,. MOne) Transformlayer. Sublayertransform= Rotationtransform}

• Explain
  The first function is to calculate the sum of squares and then open the root, to figure out the straight distance,
  CGFloat (Totaloffset * m_pi/180.0) is the move distance back to the angle
  Initialize transform
  About matrix transformation do not understand also please refer to: IOS animation Animation-3: Catransform3d special effects detailed)
  Then call this method in the appropriate place (after adding all the sub-layers)

After setting a value for the parameter, you can see a cube with a stereo effect.
Now let's get this cube moving.
Gesture operation, of course, Touchbegan and touchmoved.

Override Func Touchesbegan (touches:Set<uitouch&gt, Withevent event:uievent?) {Let Touch:uitouch = touches. First! StartPoint = Touch. Locationinview(Someview)} Override Func touchesmoved (touches:Set<uitouch&gt, Withevent event:uievent?) {Let Touch:uitouch = touches. First! Let Currentpoint = Touch. Locationinview(someview) Let DeltaX = Currentpoint. x-StartPoint. xLet DeltaY = Currentpoint. Y-StartPoint. YApplyroationforxoffset (Double (DeltaX), yoffset:double (deltay)) StartPoint = Touch. Locationinview(Someview)}

• Explain
  Record your finger's starting position when Touchbegan (StartPoint)
  Record the current position of the finger while touchmoved (currentpoint)
  Then by calculating the distance to the x-axis and the y-axis movement
  Call the method to rotate the cube: Applyroationforxoffset (Double (DeltaX), yoffset:double (DeltaY))
  And should be updated in a timely manner (StartPoint).
  Well, believe that the effect is also out, here put on their own demo, so still not very understand the child shoes reference.

The introduction of the Calayer sub-class is also over, but does not mean that the introduction of the animation is over, not yet! Keep your eye on it!

IOS Animation Animation-4-5:calayer Subclass: Catransformlayer