Search code examples
core-animationquartz-2d

Dynamic UIBezierPath

i would like to make Dynamic UIBezierPath Seems to be changing as the Following Video

Example of Dynamic BezierPath

i first try to make an array of Points and Draw lines between them then change the point i array changing the path but it does not give me the perfect view 

for (int i=0; i<frame.size.width; i++)
        {
            [_screenPoints addObject:[NSValue valueWithCGPoint:CGPointMake(i, height)]];

        }

can anyone give me an idea how to make someThing like that ?

Solution

  • You can do what you describe using a CAShapeLayer and a CGPath. You then create a CABasicAnimation that animates a change to your CGPath.

    (CGPath is the Core Foundation object that underlies UIBezierPaths. You can get a CGPath from a UIBezierPath if you aren't used to working with CGPath objects.)

    The trick to animating changes to a path is that the path needs to keep the same number and type of control points before and after the animation. So in the game video you posted, you'd break your path into a fixed number of line segments (let's say 5 line segments). When the line is straight, it would still be a connected set of 5 line segments that made a straight line. Then to animate it to a different shape you'd just move the control points in the path.