CoreText精彩文字轮廓绘制动画的一点改进

大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处.

如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;)

---

原文在:

http://oleb.net/blog/2010/12/animating-drawing-of-cgpath-with-cashapelayer/

原理说明在:

http://www.codeproject.com/Articles/109729/Low-level-text-rendering

文章写得非常棒!推荐大家阅读.

不过其源代码运行有点小问题,就是有时候画笔显示不出来!

第一次绘制图形的时候没问题,而切换至文字轮廓绘制的时候有时候画笔不显示.

在- (void) animationDidStop:(CAAnimation *)anim finished:(BOOL)flag处下断点,发现在切换视图时(此时上一个动画还未完成),也会被打断.

进入startAnimation方法查看

- (void) startAnimation
{
    [self.pathLayer removeAllAnimations];
    [self.penLayer removeAllAnimations];

    self.penLayer.hidden = NO;

    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 10.0;
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
    [self.pathLayer addAnimation:pathAnimation forKey:@"strokeEnd"];

    CAKeyframeAnimation *penAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    penAnimation.duration = 10.0;
    penAnimation.path = self.pathLayer.path;
    penAnimation.calculationMode = kCAAnimationPaced;
    penAnimation.delegate = self;
    [self.penLayer addAnimation:penAnimation forKey:@"position"];
}

发现开头对原有动画做了删除操作,而删除动画也会引起animationDidStop的回调,虽然在删除后作者特地启用了显示画笔:

self.penLayer.hidden = NO;

但是,这和animationDidStop的执行顺序是没有保证的!如果animationDidStop在之后执行,就会出现前面提到的画笔又被隐藏从而不显示的问题.

知道了原因解决起来也就非常简单了,我们只需要修改animationDidStop方法如下即可:

- (void) animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    //如果动画不是由于删除而停止的才隐藏画笔!
    if (flag){
        self.penLayer.hidden = YES;
    }
}

现在运行,小bug得到了修复,可爱的画笔又勤奋的工作了: