将字符串转换成贝塞尔曲线并执行动画
部分开源代码支持:
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#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; } // 初始化layer self.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:text withFont:font maxWidth:self.bounds.size.width textAlignment: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 ()@property (nonatomic, strong) UITableView *tableView;@property (nonatomic, strong) ShapeWordView *shape;@end@implementation ViewController- (void)viewDidLoad { [super viewDidLoad]; self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds style: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