Swift detailed 24---------------coreanimation (i) calayer

Coreanimation (i) calayer

CoreAnimationis a big topic, to achieve a lot of cool animation, must master it, before mastering it, first to understand CALayer -layer

Calayer

We usually use UIView it to build an application, which CALayer is a property of the layer view.layer . It UIview is a rectangular block managed by a hierarchical tree and, if played, makes the PS concept of the layer clearer. CALayerYou can also include some content (like pictures, text, or background colors), manage the location of sublayers, and some methods and properties to animate and transform. And UIView The biggest difference is that CALayer the user's interaction is not handled. (This can be used hitTest to determine whether the click will say later)

CALayerUIViewthe internal implementation details of the calculation should be done. For some simple needs, we really don't need to deal with it CALayer , because UIView the advanced API that Apple has passed indirectly makes the animation simple. But this simplicity inevitably leads to some flexible flaws. If you slightly want to make some changes at the bottom, or use some UIView of the interface features that Apple does not implement, then there is no choice but to intervene Core Animation .

Let's look at CLayer some of the basic properties:

1, Contents

The type of this property is defined as an ID, which means it can be any type of object. You can give him arbitrary values, compile without error, but in practice if you are not cgimage. What you get is a blank.

 view1.layer.contents"xhh")?.CGImage

You can set contentsGravity its display mode by setting it. Equivalent UIView to thecontentMode

• Kcagravitycenter
• Kcagravitytop
• Kcagravitybottom
• Kcagravityleft
• Kcagravityright
• Kcagravitytopleft
• Kcagravitytopright
• Kcagravitybottomleft
• Kcagravitybottomright
• Kcagravityresize
• Kcagravityresizeaspect
• Kcagravityresizeaspectfill

You can try it yourself, kCAGravityResizeAspectFill this one is covered. kCAGravityResizeAspectis to show the size of itself.

If the picture is more than CALayer can be used maskToBounds for cropping, cut out the excess (with rounded corners to use good).

2, Contentsrect

This is used to crop the image, the default contentsrect is {0, 0, 1, 1}, which means that the entire homestay map is visible by default. If we change to {0,0,0.5,0.5}, the image will be cropped off the top left corner of 1/4.

Hand-drawn, relatively poor, probably the meaning, the upper left corner

The lower-right coordinate is equivalent to 1, 1. How do you want to cut yourself?

3. Cornerradius Fillet

is a floating-point value that controls the curvature of the layer's corners. The default is 0 (right angle).
You can set it to any value. By default, this curvature value affects only the background color without affecting the background picture or sublayer.

If masksToBounds set to true, everything inside the layer will be intercepted.

  v1.layer.contents"xhh")?.CGImage  v1.layer.contentsGravity = kCAGravityResizeAspectFill  v1.layer.cornerRadius40

4, BorderWidth, bordercolor

These two are the settings for the width and color of the border.

ly3.cornerRadius20 //设置圆角ly3.borderWidth5 //边框宽度ly3.borderColor = UIColor.blueColor().CGColor //边框颜色

5. Shadowopacity Set Shadow

Give the Shadowopacity property a value that is greater than the default value (that is, 0), and the shadow can be displayed below any layer of intent.

Shadows are up by default

6, Shadowcolor,shadowoffset and Shadowradius

Setting the other three properties of the shadow shadowColor is obviously to set the shadow color, which shadowOffset controls the direction and distance of the shadow. It is a cgsize value, the width controls the lateral displacement of the shadow, and the height controls the longitudinal displacement. shadowOffsetThe default value is {0,-3}, meaning that the shadow has an upward displacement of 3 points relative to the y-axis.

Or the above figure, let's set a shadowOffset look.

  ly3.shadowOffset = CGSizeMake(2, 1)

Down 2, right 1.

shadowRadiusproperty controls the blur of the shadow, and when its value is 0, the shadow has a very definite boundary line like the view. When the value is getting bigger, the boundary line will look more and more blurred and natural. Apple's own application design is more in favor of natural shadows, so a non-0 value is more appropriate.

Try this on your own.

shadowOpacityThis shadow is for content, not for borders.

ly4.frame = CGRectMake(160,1005050)ly4.contents"n")?.CGImagely4.shadowOpacity0.5  //这个阴影是针对内容的 而不是针对边框的v1.layer.addSublayer(ly4)

Effect

Here the compiler itself infers the content border, in fact, the shadow is the shape can be specified by their own

CGPathCreateMutable();//CGPathAddRectnilself//方形的CGPathAddEllipseInRectnilself//圆形的self.ly4.shadowPath = squarePath;

Comment out that the sentence is square, look at the two effects

The square and round sizes are based on the background layer size, and if you need a shadow of a complex shape, use the Uibezierpath class (which will be said later)

7. Layer Mask Mask

This takes two layers to synthesize one, requires a picture layer to look directly at the example

//图层蒙版 合成ly5.frame = CGRectMake(0,05050)ly5.contents"n")?.CGImagely6.frame = ly5.framely6.backgroundColor = UIColor.purpleColor().CGColorly6.mask = ly5v2.layer.addSublayer(ly6)

Layer 5 Put the bird that figure, layer six set a background color and frame, the key is that ly6.mask = ly5 , only in the mask layer content is its concern, and everything else will be hidden. See Effect

With their own background color, make out a bird template, but also stop good, later, Micro Bo what the icon directly so engage.

First of all, sleepy, the other said next time. The sample project is also the original address:
Https://github.com/smalldu/SwiftStudy

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Swift detailed 24---------------coreanimation (i) calayer