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.
source to share
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];
source to share
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.
source to share
There is no easy way to do this. I suppose it would be easier to implement the following:
-
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: http://code.tutsplus.com/tutorials/smooth-freehand-drawing-on-ios--mobile-13164
-
Use the current path (in red in the photo) as a clipping mask so that the fill doesn't overflow.
-
1. Draw the path you created in 1. with a very thick stroke to make it fill.
source to share
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"];
source to share