文字動畫也是CAShapeLayer圖形動畫的一種，巧妙運用文字動畫可以實現很不錯的效果，比如半糖app的下拉動畫。本文就主要講一下其實現原理。
文字動畫主要分為兩部分：
- 將文字轉化為
CAShapeLayer - 通過更改
CAShapeLayer的StrokeEnd屬性值生成動畫
將文字轉換為CAShapeLayer
將文字轉換為CAShapeLayer的過程比較復雜，可以細分為以下幾個步驟：
- 創建
NSAttributedString并生成CTLineRef - 使用
CTLineRef生成CTRunRef數組 - 遍歷
CTRunRef數組，得到每個CTRunRef - 遍歷
CTRunRef中每個長度為1的區間生成CGGlyph并轉換為CGPath路徑，將所有路徑拼接起來 - 創建
ShapeLayer并將生成的路徑賦值給該ShapeLayer
以下是每個步驟的實現方式：
創建NSAttributedString并生成CTLineRef
// 定義字體屬性
CTFontRef font = CTFontCreateWithName(CFSTR("HelveticaNeue-UltraLight"), fontSize, NULL);
NSDictionary *attrs = [NSDictionary dictionaryWithObjectsAndKeys:(__bridge id)font, kCTFontAttributeName,nil];
// 創建NSAttributedString
NSAttributedString *str = [[NSAttributedString alloc] initWithString:text attributes:attrs];
CTLineRef line = CTLineCreateWithAttributedString((CFAttributedStringRef)str);
使用CTLineRef生成CTRunRef數組
CTLineRef line = CTLineCreateWithAttributedString((CFAttributedStringRef)str);
CFArrayRef runArray = CTLineGetGlyphRuns(line);
遍歷CTRunRef數組，得到每個CTRunRef
for (CFIndex runIndex = 0; runIndex < CFArrayGetCount(runArray); runIndex++) {
//
CTRunRef run = (CTRunRef)CFArrayGetValueAtIndex(runArray, runIndex);
CTFontRef runFont = CFDictionaryGetValue(CTRunGetAttributes(run), kCTFontAttributeName);
}
遍歷CTRunRef中每個長度為1的區間生成CGGlyph并轉換為CGPath路徑，將所有路徑拼接起來
for (CFIndex glyphIndex = 0; glyphIndex < CTRunGetGlyphCount(run); glyphIndex++) {
CGGlyph glyph;
CGPoint position;
CFRange currentRange = CFRangeMake(glyphIndex, 1);
CTRunGetGlyphs(run, currentRange, &glyph);
CTRunGetPositions(run, currentRange, &position);
CGPathRef letter = CTFontCreatePathForGlyph(runFont, glyph, NULL);
CGAffineTransform t = CGAffineTransformMakeTranslation(position.x, position.y);
CGPathAddPath(letters, &t, letter);
CGPathRelease(letter);
}
創建ShapeLayer并將生成的路徑賦值給該ShapeLayer
// 創建UIBezierPath
UIBezierPath *path = [UIBezierPath bezierPathWithCGPath:letters];
// 創建并配置CAShapeLayer
CAShapeLayer *pathLayer = [CAShapeLayer layer];
pathLayer.frame = self.bounds;
pathLayer.bounds = CGPathGetBoundingBox(path.CGPath);
pathLayer.geometryFlipped = YES;
pathLayer.path = path.CGPath;
pathLayer.strokeColor = fontColor.CGColor;
pathLayer.fillColor = nil;
pathLayer.lineWidth = 1.0f;
pathLayer.lineJoin = kCALineJoinBevel;
pathLayer.strokeStart = 0;
pathLayer.strokeEnd = 0;
最后，將ShapeLayer添加到動畫圖層中就行了
生成文字動畫
通過改變ShapeLayer的StrokeEnd屬性值就可以生成文字動畫
添加Slider
- (void)setupSlider {
CGFloat leftMargin = 20;
UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(leftMargin, kMainHeight - 30, kMainWidth - leftMargin * 2, 3)];
slider.minimumValue = 0;
slider.maximumValue = 1;
[self.view addSubview:slider];
[slider addTarget:self action:@selector(sliderValueChanged:) forControlEvents:UIControlEventValueChanged];
}
實現Slider的ValueChange方法
- (void)sliderValueChanged:(UISlider *)sender {
self.pathLayer.strokeEnd = sender.value;
}
至此，一個文字動畫就完成了
本文demo的github地址：<a>https://github.com/zephyrw/TextAnimationDemo.git</a>
