IOS: how to animate filling in a uibezier way?

I am working on a child mail tracking program - see attached screenshot.

I was able to map the letter using the bezierpath identified by the font glyphs and allow the strokes to be written inside the bezierpath.

Now I want to add a help animation to show you how to write this letter from start to finish.

How to do it?

We assume that we are showing "A" and I want to show an animation of how to write "A" for children.

Any pointers / ideas.

Many thanks. enter image description here enter image description here


source to share

4 answers

I used this animation for my application. Created a circular progress bar that fills the dot clockwise

CABasicAnimation* pathAnim = [CABasicAnimation animationWithKeyPath: @"path"];
pathAnim.toValue = (id)newPath.CGPath;

// -- initialize CAAnimation group with duration of 0.2secs and beginTime will begin after another.
CAAnimationGroup *anims = [CAAnimationGroup animation];
anims.animations = [NSArray arrayWithObjects:pathAnim, nil];
anims.removedOnCompletion = NO;
anims.duration = 0.2f;
anims.beginTime = CACurrentMediaTime() + anims.duration*i;
anims.fillMode  = kCAFillModeForwards;
[anims setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];

[progressLayer addAnimation:anims forKey:nil];




I cannot find a "built-in" way to animate the fill the way you want. However, there is a built-in way to animate the beat:

Use UIView

with support CAShapeLayer

. CAShapeLayer

has a property path

. Then you can apply animation to strokeStart

layer strokeStart

and / or strokeEnd


Hope it helps.



There is no easy way to do this. I suppose it would be easier to implement the following:

  1. Create a path for each character that will track how the stroke will be written. If you have a limited number of characters, as in the alphabet, this can be done manually. You can implement something like this to capture the path:

  2. Use the current path (in red in the photo) as a clipping mask so that the fill doesn't overflow.

  3. 1. Draw the path you created in 1. with a very thick stroke to make it fill.



After loading bezierpath

add init animation:

CAKeyframeAnimation *shapeKeyframeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"strokeEnd"];
shapeKeyframeAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
shapeKeyframeAnimation.keyTimes = @[@0.0f, @0.6f, @1.0f];
shapeKeyframeAnimation.values =  @[@0.0f, @1.0f, @1.0f];
shapeKeyframeAnimation.duration = 4.0f;
shapeKeyframeAnimation.repeatCount = CGFLOAT_MAX;


then add it to your shape layer:

[shapeLayer addAnimation:_loadingKeyframeAnimation forKey:@"stoke"];




All Articles