Install the app animation and the app animation on your own

Install the app animation and the app animation on your own

I recently learned about CALayer-related animations. One day I suddenly found that the animation for installing an app on Apple was very good, so I wanted to implement it myself. I still don't know the specific effect. It seems that simple animations are not as simple as I think. First, this animation is divided into two steps: one is that the circle in the middle is circled like a clock; the other is that the circle outside is enlarged to include the size of the entire image; the first is the first step: at this time, the external circle and the inner circle are semi-transparent. At first, I always wanted to use the mask method to implement it. I tried it for a long time, but I still couldn't do it. I threw it away. After two days, I watched it again and found that I thought it was complicated. from the surface, the first part of the animation was to draw a circle and then fill it with a color, the center is the part of the circle and then fill it. The problem is that it is difficult to achieve a little bit of animation. So I just want to do it if I use a stroke? Then I found that it would be easy to draw a row with the same width as the radius. The painting would be as much as it would be and where it would be to stop! Then, when I compared it with the code, I suddenly realized that CAShapeLayer has the lineWidth attribute. It's easy to draw it like this! (Note that when CAShapeLayer calculates the range of fillColor, it is calculated according to the center of the line, so the actual width in the Code is twice the radius.) The same is true for transparency, there is no need for mask at all. It is covered during painting. In turn, it is not a little bit exposed !!! Put it in the code, let strokeEnd be changed from 1 to 0. (Here, we need to pay attention to the direction problem. The besell curve has a method to take the opposite direction and pay attention when setting the path.) The remaining question is: how to draw an intermediate circle transparent, what is the translucent image between the circle and the border? The first thing I think of is .... Make an image... Then I tried it. Sure you can! But the animation in the second step cannot be done... So we still need to use CAShapeLayer to draw it by ourselves... This problem was solved by chunge. A high-end parameter is used, that is, the fillRule parameter of CAShapeLayer. There are two optional values kCAFillRuleEvenOdd and kCAFillRuleNonZero specific reference: http://stackoverflow.com/questions/15375777/cut-out-shape-with-animation and: http://blog.csdn.net/iunion/article/details/26221213 is roughly: nonzero literally meaning "non-zero ". According to this rule, it is necessary to determine whether a point is in the graph, from which a ray is taken in any direction, and then detect the intersection between the ray and the graph path. Counting starts from 0. If the path passes through the ray from left to right, the count is increased by 1. If the path passes through the ray from right to left, the count is reduced by 1. After the counting result is obtained, if the result is 0, the vertex is considered to be external to the image; otherwise, the result is considered to be internal. Demonstrate nonzero rules:

 
Evenodd literally means "parity ". According to this rule, you need to determine whether a point is in the graph, from which a ray is taken in any direction, and then check the number of intersections between the ray and the graph path. If the result is an odd number, the vertex is considered to be an internal vertex. If the result is an even number, the vertex is considered to be an external vertex. Demonstrate the evenodd rule: first draw a rectangle, and then use the appendPath method to add a circle as the path of the entire CAShapeLayer; (you can also use the moveToPoint method ); fillRule is used to make the circle transparent and externally translucent. Then add the layer. The rest is a stokeEnd animation, which is simple. Step 2: Increase the radius of the circle. This is just a path animation. The circle is drawn by the last method in the first step, you only need to set the path to the final size, it is also relatively simple and some details see the code notes; Specific demo see gitHub: LXMAppleReveal https://github.com/Phelthas/LXMRevealDemo Classification