iOS實現繪畫文字動畫
阿新 • • 發佈:2019-01-27
通過Core Text 結合 Bezier 曲線和 CAShapeLayer 可以做出繪畫文字的動畫。如下程式碼:
//開始動畫CGMutablePathRef letters = CGPathCreateMutable(); //建立path CTFontRef font = CTFontCreateWithName(CFSTR("Helvetica-Bold"), 100.0f, NULL); //設定字型 NSDictionary *attrs = [NSDictionary dictionaryWithObjectsAndKeys: (id)font, kCTFontAttributeName, nil]; NSAttributedString *attrString = [[NSAttributedString alloc] initWithString:@"" attributes:attrs]; CTLineRef line = CTLineCreateWithAttributedString((CFAttributedStringRef)attrString); //建立line CFArrayRef runArray = CTLineGetGlyphRuns(line); //根據line獲得一個數組 // 獲得每一個 run for (CFIndex runIndex = 0; runIndex < CFArrayGetCount(runArray); runIndex++) { // 獲得 run 的字型 CTRunRef run = (CTRunRef)CFArrayGetValueAtIndex(runArray, runIndex); CTFontRef runFont = CFDictionaryGetValue(CTRunGetAttributes(run), kCTFontAttributeName); // 獲得 run 的每一個形象字 for (CFIndex runGlyphIndex = 0; runGlyphIndex < CTRunGetGlyphCount(run); runGlyphIndex++) { // 獲得形象字 CFRange thisGlyphRange = CFRangeMake(runGlyphIndex, 1); //獲得形象字資訊 CGGlyph glyph; CGPoint position; CTRunGetGlyphs(run, thisGlyphRange, &glyph); CTRunGetPositions(run, thisGlyphRange, &position); // 獲得形象字外線的path { CGPathRef letter = CTFontCreatePathForGlyph(runFont, glyph, NULL); CGAffineTransform t = CGAffineTransformMakeTranslation(position.x, position.y); CGPathAddPath(letters, &t, letter); CGPathRelease(letter); } } } CFRelease(line); //根據構造出的 path 構造 bezier 物件 UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointZero]; [path appendPath:[UIBezierPath bezierPathWithCGPath:letters]]; CGPathRelease(letters); CFRelease(font); //根據 bezier 建立 shapeLayer物件 CAShapeLayer *pathLayer = [CAShapeLayer layer]; pathLayer.frame = self.animationLayer.bounds; pathLayer.bounds = CGPathGetBoundingBox(path.CGPath); pathLayer.geometryFlipped = YES; pathLayer.path = path.CGPath; pathLayer.strokeColor = [[UIColor blackColor] CGColor]; pathLayer.fillColor = nil; pathLayer.lineWidth = 3.0f; pathLayer.lineJoin = kCALineJoinBevel; [self.animationLayer addSublayer:pathLayer]; self.pathLayer = pathLayer;
程式碼來源:http://oleb.net/blog/2010/12/animating-drawing-of-cgpath-with-cashapelayer/- (void) startAnimation { [self.pathLayer removeAllAnimations]; 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"]; }