Layer conversion and dedicated layer for iOS core Animation

Layer conversion and dedicated layer for iOS core Animation
IOS affinetransform is a CGAffineTransform, which is characterized by the fact that the sides of the transformed graph are still parallel, including round (CGFloat angle)/CGAffineTransformMakeScale (CGFloat sx, CGFloat sy) /CGAffineTransformMakeTranslation (CGFloat tx, CGFloat ty), read the code directly

1 blueView = UIView () 2 blueView. frame = CGRectMake (50,100,100,100) 3 blueView. backgroundColor = UIColor. blueColor () 4 self. view. addSubview (blueView) 5 6 yellowView = UIView () 7 yellowView. frame = CGRectMake (50 + 200/1 .414, 100,100,100) // pay attention to the horizontal position of the yellowView and compare it with the blueView. backgroundColor = UIColor. yellowColor () 9 self. view. addSubview (yellowView) 10 11 blueView. transform = CGAffineTransformIdentity // initialize transform12 blueView. transform = CGAffineTransformMakeScale (0.5, 0.5) // scale down 0.5 times 13 blueView. transform = CGAffineTransformRotate (blueView. transform, CGFloat (M_PI_4) // rotate pi/414 blueView. transform = CGAffineTransformTranslate (blueView. transform, 400, 0) // Pan 400

 

Here, you only need to note that the superposition of transform has an impact on each other. The blueView is reduced by 0.5 times and rotated by 45 °, so we should have translated 400 at the horizontal position and finally shifted 200 at the 45 ° direction, so the distance between the horizontal direction and the translation is about 200/1. 414, compared with yellowView. 3D transformation 3D transformation is different from affine transformation. Although it is also multiplied by a two-dimensional vector, It is a two-dimensional vector of 4x4, and the affine transformation is a vector of 2x3, in addition, 3D transformation can be used to set a vector by directly changing a single value of the vector, such as transform. m11/transform. m44 corresponds to the value at the corresponding position on the vector. Because it is a 3-dimensional space transformation, there are some differences. The affine rotation is equivalent to the Z axis rotation of 3D transformation. Its x, y's composite vector can make it rotate to the skewed angle (such as 45 °), while the translation ignores the same on the Z axis, and the zooming ignores the line on the Z axis. however, due to 3D transformation and scaling, the translation and scaling ratio will be used, and the rotation of x/y/z axis will not change its direction. This is because the matrix value has a wide range, does not affect each other. 1 blueLayer. transform = CATransform3DIdentity // initialize transform2 blueLayer. transform = CATransform3DMakeScale (0.5, 0.5, 0) // scale down 0.5 times 3 blueLayer. transform = CATransform3DRotate (blueLayer. transform, CGFloat (M_PI_4), 0.0, 1.0, 0) // rotate pi/44 blueLayer. transform = CATransform3DTranslate (blueLayer. transform, 400, 0, 0) // translation 400 as the 3D transformation is divided into multiple directions, the rotation along the X or Y direction is like scaling, you can set the value corresponding to the vector to fix this effect and make it look more realistic. As a result, it has a skew angle and a projection effect, in this way, when you perform translation, the displayed size will be changed. Therefore, do not use it together, but make the effect effective, you need to set the m34 value when initializing transform (this value is preferably-1/500. 0 to-1/5000. 0), put it in the back has no effect, in the back can not be scaled up or down, otherwise it will overwrite this value. therefore, the effect is displayed separately. 1 var transform = CATransform3DIdentity // initialize transform2 transform. m34 =-1/500.0 // set m34 value 3 // transform = CATransform3DScale (transform, 0.5, 0.5, 0) // reduce by 0.5 times, here we cannot use 4 transform = CATransform3DRotate (transform, CGFloat (M_PI_4), 0.0, 1.0, 0) // rotate pi/45 transform = CATransform3DTranslate (transform, 400, 0, 0) // translate 4006 blueLayer. transform = transform when you translate a large distance in the direction of the projection, its final imaging is a point, which is generally the anchorPoint of the layer, if this effect is required for several child layers of a layer, set the m34 of its parent layer transform to-1/500.0 and set its sublayerTransform attribute, when the rotote attribute of its sub-layer is set, the sub-layer will have a corresponding projection effect. for example, outLayer. sublayerTransform = outLayer. transform, If you rotate 180 ° to view the layer from the back, the layer will display an image that is symmetric With the layer, because the layer is drawn on both sides, however, if there is a text, it will look messy and waste GPU resources, so it is best to disable it, and layer provides this attribute: doubleSided. If the value is true and double-sided is false, it is single-sided. the choice of the internal and external layers can be superimposed and offset, which can be rotated on the Z axis, but not on X/Y, because they are not in the same 3D space, you must note that if you use the special Vector Value m34 for projection, initialize a transform to CATransform3DIdentity at a time, then, the m34 value is directly set and then rotated, and then assigned to the transform special layer of the layer. CAShapeLayer is a layer dedicated for drawing shapes. It has great advantages over plotting, it uses hardware acceleration, so the drawing speed is very fast, it does not need to host images, so it does not use too much memory, it will not be cropped like a normal layer, and it will not be pixel-based, in the end, it will not be blurred. you can set lineWith (line width, expressed by points), lineCap (line end), and lineJoin (line combination), but there is only one chance to set it. CAShapeLayer can also set the rounded corner separately. The following shows the code and the corresponding two running effects. The person in the previous line and the other is the right-angle rectangle of the three rounded corners.

DEMO1: 1 let shapePath = UIBezierPath() 2 shapePath.moveToPoint(CGPointMake(175, 100)) 3 shapePath.addArcWithCenter(CGPointMake(150, 100), radius: 25, startAngle: 0, endAngle:CGFloat( 2 * M_PI ), clockwise: true) 4 shapePath.moveToPoint(CGPointMake(150, 125)) 5 shapePath.addLineToPoint(CGPointMake(150, 175)) 6 shapePath.addLineToPoint(CGPointMake(125, 225)) 7 shapePath.moveToPoint(CGPointMake(150, 175)) 8 shapePath.addLineToPoint(CGPointMake(175, 225)) 9 shapePath.moveToPoint(CGPointMake(100, 150))10 shapePath.addLineToPoint(CGPointMake(200, 150))11 12 let shapeLayer = CAShapeLayer()13 shapeLayer.strokeColor = UIColor.redColor().CGColor14 shapeLayer.fillColor = UIColor.clearColor().CGColor15 shapeLayer.lineWidth = 516 shapeLayer.lineJoin = kCALineJoinRound17 shapeLayer.lineCap = kCALineCapRound18 shapeLayer.path = shapePath.CGPath19 self.view.layer.addSublayer(shapeLayer)

 

DEMO2: 1 var rect = CGRectMake (50, 50,100,100); 2 var radii = CGSizeMake (20, 20); 3 var corners = UIRectCorner. topRight | UIRectCorner. bottomRight | UIRectCorner. bottomLeft4 var shapePath = UIBezierPath (roundedRect: rect, cursor: corners, cornerRadii: radii) CATextLayer can directly write text in Core Graphics in the layer, which is the implementation method of UILabel, it is very troublesome to record text directly on a layer. iOS provides a CATextLayer to display text on a layer. It uses Core text and the rendering speed is very fast.

1 var textLayer = CATextLayer () 2 textLayer. frame = CGRectMake (100,100,200,300) 3 self. view. layer. addSublayer (textLayer) 4 5 // set its attribute 6 textLayer. foregroundColor = UIColor. redColor (). CGColor 7 textLayer. alignmentMode = kCAAlignmentJustified 8 textLayer. wrapped = true 9 10 // Its font is of the CGFont type. You need to set 11 var font = UIFont separately in large and small fonts. systemFontOfSize (24) 12 textLayer. font = CGFontCreateWithFontName (font. fontName) 13 textLayer. fontSize = font. pointSize14 15 var textStr = "hello kitty hi nohhhh no wo shi lllll aaaaawo jiojhello kitty hi nohhhh no wo shi lllll aaaaawo jioj" 16 textLayer. string = textStr17 18 // Its contentScale is 1 by default. to display it with the quality of retina, set it to 219 textLayer. contentsScale = UIScreen. mainScreen (). scale

 

NSAttributedString rich text can also be used here, but it is quite troublesome because of the swift type conversion problem and no demo is written. the CATransformLayer layer class solves the hierarchical relationship between layers, as shown in the demo below: If it is CALayer rotation, there is no hierarchy. If it is CATransformLayer, it has a hierarchical View Code CAGradientLayer. It can be used to set gradient, and set the transition color and position through the colors attribute and startPoint and endPoint. It is useless to set the background color at this time.

1 gradientLayer = CAGradientLayer()2 gradientLayer.frame = CGRectMake(50, 50, 300, 300)3 gradientLayer.backgroundColor = UIColor.grayColor().CGColor4 self.view.layer.addSublayer(gradientLayer)5 6 gradientLayer.colors = [UIColor.redColor().CGColor,UIColor.blueColor().CGColor, UIColor.greenColor().CGColor]7 gradientLayer.startPoint = CGPointMake(0, 0)8 gradientLayer.endPoint = CGPointMake(1, 1)

 

It also has a locations attribute, which can set the spacing of each gradient. The length of this array must be the same as that of the colors array. The location value is based on the endPoint value, it is not a matter of time, how many CAReplicatorLayer can be used when multiple identical layers need to be created, but when the track color changes with rules, it will display its child layers regularly, and you can set the number of times it repeats, the color of each gradient increases and decreases, and the path of each transform transformation.

 1 repeatLayer = CAReplicatorLayer() 2 repeatLayer.frame = CGRectMake(50, 50, 300, 300) 3 repeatLayer.backgroundColor = UIColor.grayColor().CGColor 4 self.view.layer.addSublayer(repeatLayer) 5  6 var transform = CATransform3DIdentity 7 transform = CATransform3DTranslate(transform, 0, 100, 0); 8 transform = CATransform3DRotate(transform, CGFloat( M_PI / 5.0 ), 0, 0, 1); 9 transform = CATransform3DTranslate(transform, 0, -100, 0);10 repeatLayer.instanceTransform = transform;11 12 repeatLayer.instanceCount = 1013 14 repeatLayer.instanceBlueOffset = -0.115 repeatLayer.instanceRedOffset = -0.116 17 var layer  = CALayer()18 layer.frame = CGRect(x: 125, y: 125, width: 50, height: 50)19 layer.backgroundColor = UIColor.whiteColor().CGColor20 repeatLayer.addSublayer(layer) 

 

The final result is a circle of squares with changing colors. It can be used as an animation for effects such as the path of an airplane. it is an important practical use of reflection, because if the layer is copied, the reflection cannot be updated in real time with the original layer, and the CAReplicatorLayer can. view Code CAScrollLayer is similar to UIScrollView. It has more scrollPoint methods than CALayer. If you want to use this method, you can use CAScrollLayer 1 NSTimer. scheduledTimerWithTimeInterval (2, target: self, selector: NSSelectorFromString ("setPosition"), userInfo: nil, repeats: false) 2 3 func setPosition () {4 self. scrollLayer. scrollToPoint (CGPointMake (0,100) 5} When ledlayer supports ledlayer, the image/PDF can be displayed separately. If the resolution of an image exceeds 2048*2048 (due to different platforms ), the maximum texture size of OpenGL is exceeded, so there will be performance problems. a pdf is usually relatively large, so it is prone to performance problems (a demo will be written later). CAEmitterLayer can imitate particle reflection, if the flame is used, the color/radiation rate, transparency, direction, and number of particles can be controlled.

1 emitterLayer = CAEmitterLayer () 2 emitterLayer. frame = CGRectMake (100,100,200,200) 3 emitterLayer. backgroundColor = UIColor. grayColor (). CGColor 4 self. view. layer. addSublayer (emitterLayer) 5 6 emitterLayer. renderMode = kCAEmitterLayerAdditive 7 emitterLayer. emitterPosition = CGPointMake (emitterLayer. frame. size. width/2, emitterLayer. frame. size. height/2) 8 9 var cell = CAEmitterCell () 10 cell . Contents = UIImage (named: "lizi.png ")?. CGImage11 cell. birthRate = 10 // The Particle occurrence rate is 12 cells. lifetime = 4.0 // declare the cycle, 13 cells in seconds. emissionRange = 2 // The transmitting direction is 14 15 cells. color = UIColor (red: 1, green: 1, blue: 0.5, alpha: 1 ). CGColor // the color of the particle 16 cell. alphaSpeed =-0.4 // The transparency changes at a rate of 17 cells. velocity = 50 // particle velocity 18 cell. velocityRange = 100 // particle speed range, constraint speed 19 20 emitterLayer. emitterCells = [cell]

 

CAEAGLLayer is a layer that provides OpenGL ES for plotting. It can be used in combination with CLKView in GLKit to pre-assume the type to be drawn and quickly draw. The specific demo is specially written. AVFoundation is in the foundation framework, but it is consistent with the use of layer. The demo is as follows:

 1 var urlStr = NSBundle.mainBundle().pathForResource("1.mp4", ofType: nil) 2 var url = NSURL(fileURLWithPath: urlStr!) 3 var player = AVPlayer(URL: url) 4  5 var playLayer = AVPlayerLayer(player: player) 6 playLayer.frame = CGRectMake(0, 0,400, 300) 7 playLayer.backgroundColor = UIColor.grayColor().CGColor 8 self.view.layer.addSublayer(playLayer) 9 10 player.play()