将字符串转换成贝塞尔曲线并执行动画

部分开源代码支持:

https://github.com/aderussell/string-to-CGPathRef

效果:

源码:

//
//  ShapeWordView.h
//  PathWord
//
//  Created by XianMingYou on 15/3/6.
//  Copyright (c) 2015年 XianMingYou. All rights reserved.
//#import <UIKit/UIKit.h>
#import "UIBezierPath+TextPaths.h"@interface ShapeWordView : UIView@property (nonatomic, strong) NSString *text;
@property (nonatomic, strong) UIFont   *font;
@property (nonatomic, strong) UIColor  *lineColor;
@property (nonatomic, assign) CGFloat   lineWidth;/***  创建view*/
- (void)buildView;/***  百分比**  @param percent 百分比*/
- (void)percent:(CGFloat)percent animated:(BOOL)animated;@end

//
//  ShapeWordView.m
//  PathWord
//
//  Created by XianMingYou on 15/3/6.
//  Copyright (c) 2015年 XianMingYou. All rights reserved.
//#import "ShapeWordView.h"@interface ShapeWordView ()
@property (nonatomic, strong) CAShapeLayer  *shapeLayer;
@end@implementation ShapeWordView- (void)buildView {// 过滤数据CGFloat   lineWidth   = (self.lineWidth <= 0 ? 0.5 : self.lineWidth);UIFont   *font        = (self.font == nil ? [UIFont systemFontOfSize:18.f] : self.font);UIColor  *lineColor   = (self.lineColor == nil ? [UIColor blackColor] : self.lineColor);NSString *text        = self.text;if (text == nil || text.length == 0) {return;}// 初始化layerself.shapeLayer             = [CAShapeLayer layer];self.shapeLayer.frame       = self.bounds;self.shapeLayer.lineWidth   = lineWidth;self.shapeLayer.fillColor   = [UIColor clearColor].CGColor;self.shapeLayer.strokeColor = lineColor.CGColor;self.shapeLayer.path = [UIBezierPath pathForMultilineString:textwithFont:fontmaxWidth:self.bounds.size.widthtextAlignment:NSTextAlignmentCenter].CGPath;self.shapeLayer.bounds          = CGPathGetBoundingBox(self.shapeLayer.path);self.shapeLayer.geometryFlipped = YES;self.shapeLayer.strokeEnd       = 0.f;[self.layer addSublayer:self.shapeLayer];
}- (void)percent:(CGFloat)percent animated:(BOOL)animated {if (animated) {if (percent <= 0) {self.shapeLayer.strokeEnd = 0;} else if (percent > 0 && percent <= 1) {self.shapeLayer.strokeEnd = percent;} else {self.shapeLayer.strokeEnd = 1.f;}} else {if (percent <= 0) {[CATransaction setDisableActions:YES];self.shapeLayer.strokeEnd = 0;[CATransaction setDisableActions:NO];} else if (percent > 0 && percent <= 1) {[CATransaction setDisableActions:YES];self.shapeLayer.strokeEnd = percent;[CATransaction setDisableActions:NO];} else {[CATransaction setDisableActions:YES];self.shapeLayer.strokeEnd = 1.f;[CATransaction setDisableActions:NO];}}
}@end

使用:

//
//  ViewController.m
//  PathWord
//
//  Created by XianMingYou on 15/3/6.
//  Copyright (c) 2015年 XianMingYou. All rights reserved.
//#import "ViewController.h"
#import "UIBezierPath+TextPaths.h"
#import "ShapeWordView.h"@interface ViewController ()<UITableViewDelegate>
@property (nonatomic, strong) UITableView   *tableView;
@property (nonatomic, strong) ShapeWordView *shape;
@end@implementation ViewController- (void)viewDidLoad {[super viewDidLoad];self.tableView          = [[UITableView alloc] initWithFrame:self.view.boundsstyle:UITableViewStylePlain];self.tableView.delegate = self;[self.view addSubview:self.tableView];self.shape = [[ShapeWordView alloc] initWithFrame:CGRectMake(10, 20, 290, 100)];self.shape.lineColor           = [UIColor redColor];self.shape.text                = @"YouXianMing";self.shape.lineWidth           = 0.5f;[self.shape buildView];[self.view addSubview:self.shape];
}- (void)scrollViewDidScroll:(UIScrollView *)scrollView {CGFloat offsetY = - scrollView.contentOffset.y;if (offsetY >= 0) {CGFloat percent = offsetY / 50;[self.shape percent:percent animated:NO];}
}@end