Relationship between the beiser curve and CAShapeLayer and Stroke animation,

Relationship between the beiser curve and CAShapeLayer and Stroke animation,

1. Relationship between the beiser curve and CAShapeLayer

1.1CAShapeLayer requires a shape to take effect. You can create a vector-based path for the besell curve, and then provide the path to CAShapeLayer. The path will be closed.

1.2 The beiser curve is used as the path of CAShapeLayer, and its path is a closed loop curve that is connected at the beginning and end.

2. Practical Application

2.2 draw an ellipse

 

2.2 draw a rectangle. The method of drawing a circle is the same as that of the top, but the method called during drawing is inconsistent.

3. Note: The beiser curve and the frame value of CAShapeLayer do not interfere with each other. The beiser curve is only placed on the CAShapeLayer layer, so the frame. size of CAShapeLayer cannot be smaller than the frame. size of the beiser curve,MasksToBounds is an attribute of CAShapeLayer. It prohibits the path of the beiser curve from exceeding the frame range of CAShapeLayer.

4. Usage of StrokeStart and StrokeEnd

4.1 usage steps:

4.1.1 set the fillColor of ShapeLayer to transparent color

4.1.2 set the width of the edge line

4.1.3 set the edge line color

4.1.4 set the strokeStart value to 0The strokeEnd value changes to trigger implicit animation.

4.1.5 change the timer

4.2 case applications

This is a gradient slide, similar to the wait rotation view of buckle login. You can download the demo in my blog resources.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.