iOS CoreAnimation之CABasicAnimation：文字路径动画

前言：

主要用到以下内容： 1.CABasicAnimation -- animationWithKeyPath:@"strokeEnd"//开始绘制2.CAKeyframeAnimation -- animationWithKeyPath:@"position"//以position作为关键帧动画3.CAShapeLayer//CAShapeLayer需要与贝塞尔曲线配合使用才有意义、可作为进度条4.CALayer//展示view的layer

---

Demo地址

---

效果展示：

获取字体路径：

    UIBezierPath *path = [self getStringLayer:@"I'm Quinn-魁"];

通过字体路径创建CAShapeLayer：

    [path addLineToPoint:CGPointMake(0, 50)];    CAShapeLayer *pathLayer = [CAShapeLayer layer];    pathLayer.frame = self.view.layer.bounds;    pathLayer.bounds = CGPathGetBoundingBox(path.CGPath);    pathLayer.backgroundColor = [[UIColor yellowColor] CGColor];    pathLayer.geometryFlipped = YES;    pathLayer.path = path.CGPath;    pathLayer.strokeColor = [UIColor colorWithRed:234.0/255 green:84.0/255 blue:87.0/255 alpha:1].CGColor;    pathLayer.fillColor = [UIColor whiteColor].CGColor;    pathLayer.lineWidth = 1.0f;    pathLayer.lineJoin = kCALineJoinMiter;

添加到显示的view的layer上：

[self.view.layer addSublayer:pathLayer];

再来一个图片的layer（用作关键帧动画图片）：

    UIImage *penImage = [UIImage imageNamed:@"Quinn.png"];    CALayer *penLayer = [CALayer layer];    penLayer.contents = (id)penImage.CGImage;    penLayer.anchorPoint = CGPointZero;    penLayer.frame = CGRectMake(0.0f, 50.0f, penImage.size.width, penImage.size.height);    [pathLayer addSublayer:penLayer];

添加到显示的view的layer上：

[self.view.layer addSublayer:penLayer];

当我们得到路径时，这时候还没有任何效果，只是在屏幕上绘制了一张图片和几个文字，我们需要让他动起来：

设置绘制动画

duration表示动画时间fromValue起始状态（0-1）toValue结束状态（0-1）addAnimation添加路径动画speed 速度timeOffset 时间速度和时间这两个属性与duration和fromValue、toValue有关

    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:@"strokeStart"];    pathAnimation.speed = 0.1;    pathAnimation.timeOffset = 0;

当将 strokeEnd 更改为 strokeStart

//此时动画展现方式为擦除动画，大家可以一试究竟

让图片跟随路径动画一起动起来：

calculationMode：可以理解为动画的频率、效果kCAAnimationLinear（线性）kCAAnimationPaced（均匀）kCAAnimationCubic（圆滑）kCAAnimationCubicPaced（均匀圆滑）delegate ：//- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;

    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"];

获取路径的方法：getStringLayer 方法如下：

- (UIBezierPath *)getStringLayer:(NSString *)str{    //创建可变path      CGMutablePathRef letters = CGPathCreateMutable();//    HelveticaNeue-UltraLight//设置字体    CTFontRef font = CTFontCreateWithName(CFSTR("Helvetica-Bold"), 32.0f, NULL);    NSDictionary *attrs = [NSDictionary dictionaryWithObjectsAndKeys:                           (__bridge id)font, kCTFontAttributeName,                           nil];    NSAttributedString *attrString = [[NSAttributedString alloc] initWithString:str                                                                     attributes:attrs];    //根据字符串创建 line                                                                    CTLineRef line = CTLineCreateWithAttributedString((CFAttributedStringRef)attrString);    //获取每一个字符作为数组    CFArrayRef runArray = CTLineGetGlyphRuns(line);    // 遍历字符数组    for (CFIndex runIndex = 0; runIndex < CFArrayGetCount(runArray); runIndex++)    {        // Get FONT for this run        CTRunRef run = (CTRunRef)CFArrayGetValueAtIndex(runArray, runIndex);        CTFontRef runFont = CFDictionaryGetValue(CTRunGetAttributes(run), kCTFontAttributeName);        // for each GLYPH in run        for (CFIndex runGlyphIndex = 0; runGlyphIndex < CTRunGetGlyphCount(run); runGlyphIndex++)        {            // get Glyph & Glyph-data            CFRange thisGlyphRange = CFRangeMake(runGlyphIndex, 1);            CGGlyph glyph;            CGPoint position;            CTRunGetGlyphs(run, thisGlyphRange, &glyph);            CTRunGetPositions(run, thisGlyphRange, &position);            // Get PATH of outline            {                CGPathRef letter = CTFontCreatePathForGlyph(runFont, glyph, NULL);                CGAffineTransform t = CGAffineTransformMakeTranslation(position.x, position.y);                CGPathAddPath(letters, &t, letter);                CGPathRelease(letter);            }        }    }    CFRelease(line);    UIBezierPath *path = [UIBezierPath bezierPath];    [path moveToPoint:CGPointZero];    [path appendPath:[UIBezierPath bezierPathWithCGPath:letters]];    CGPathRelease(letters);    CFRelease(font);    return path;}

原文：http://blog.csdn.net/Xoxo_x/article/details/71512943
参考博客：http://blog.csdn.net/mydo/article/details/51620720