iOS-漢字順序展示

前言：

主要用到以下內容： 1.CABasicAnimation -- animationWithKeyPath:@"strokeEnd"//開始繪製2.CAKeyframeAnimation -- animationWithKeyPath:@"position"//以position作為主要畫面格動畫3.CAShapeLayer//CAShapeLayer需要與貝茲路徑配合使用才有意義、可作為進度條4.CALayer//展示view的layer

Demo地址

效果展示：

擷取字型路徑：

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

1 2

通過字型路徑建立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;

1 2 3 4 5 6 7 8 9 10 11 12 13 14

添加到顯示的view的layer上：

[self.view.layer addSublayer:pathLayer];

1

再來一個圖片的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];

1 2 3 4 5 6

添加到顯示的view的layer上：

[self.view.layer addSublayer:penLayer];

1 2

當我們得到路徑時，這時候還沒有任何效果，只是在螢幕上繪製了一張圖片和幾個文字，我們需要讓他動起來：

設定繪製動畫

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;

1 2 3 4 5 6 7

當將 strokeEnd 更改為 strokeStart

//此時動畫展現方式為擦除動畫，大家可以一試究竟

1

讓圖片跟隨路徑動畫一起動起來：

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

1 2 3 4 5 6

擷取路徑的方法：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;}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

原文：http://blog.csdn.net/Xoxo_x/article/details/71512943 
參考部落格：http://blog.csdn.net/mydo/article/details/51620720